@nativescript-community/ui-mapbox 7.0.2 → 7.0.4

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [7.0.4](https://github.com/nativescript-community/ui-mapbox/compare/v7.0.3...v7.0.4) (2025-10-30)
+
+### Bug Fixes
+
+* **ios:** working marker image and other fixes ([3ec0f75](https://github.com/nativescript-community/ui-mapbox/commit/3ec0f75f72708a03cafb2a0a1cd847cea8e74206))
+
+## [7.0.3](https://github.com/nativescript-community/ui-mapbox/compare/v7.0.2...v7.0.3) (2025-10-29)
+
+**Note:** Version bump only for package @nativescript-community/ui-mapbox
+
 ## [7.0.2](https://github.com/nativescript-community/ui-mapbox/compare/v7.0.1...v7.0.2) (2025-10-28)
 
 ### Bug Fixes

package/common.js

@@ -13,7 +13,7 @@ export var CLogTypes;
     CLogTypes[CLogTypes["error"] = 3] = "error";
 })(CLogTypes || (CLogTypes = {}));
 export const CLog = (type, ...args) => {
-    Trace.write(args.map((a) => (a && typeof a === 'object' ? JSON.stringify(a) : a)).join(' '), MapboxTraceCategory, type);
+    Trace.write(args.join(' '), MapboxTraceCategory, type);
 };
 // ------------------------------------------------------------
 export var MapStyle;
@@ -269,18 +269,9 @@ export class MapboxViewCommonBase extends ContentView {
     onStart() {
         return this.mapbox?.onStart(this.getNativeMapView());
     }
-    // onResume(nativeMap?: any): Promise<any> {
-    //     return this.mapbox && this.mapbox.onResume(this.getNativeMapView());
-    // }
-    // onPause(nativeMap?: any): Promise<any> {
-    //     return this.mapbox && this.mapbox.onPause(this.getNativeMapView());
-    // }
     onStop(nativeMap) {
         return this.mapbox?.onStop(this.getNativeMapView());
     }
-    // onLowMemory(nativeMap?: any): Promise<any> {
-    //     return this.mapbox.onLowMemory(this.getNativeMapView());
-    // }
     onDestroy(nativeMap) {
         return this.mapbox?.onDestroy(this.getNativeMapView());
     }

package/index.android.d.ts

@@ -65,6 +65,7 @@ export declare class MapboxView extends MapboxViewBase {
      */
     createNativeView(): object;
     onLoaded(): void;
+    onUnloaded(): void;
     initNativeView(): void;
     /**
      * when the view is destroyed.
@@ -160,12 +161,6 @@ export declare class Mapbox extends MapboxCommon implements MapboxApi {
      */
     hide(): Promise<void>;
     unhide(): Promise<void>;
-    /**
-     * destroy the map programmatically
-     *
-     * Destroy the map instance.
-     */
-    clear(nativeMap?: any): void;
     destroy(nativeMap?: any): Promise<void>;
     /**
      * Clear Event Listeners

package/index.android.js

@@ -174,16 +174,22 @@ export class MapboxView extends MapboxViewBase {
     onLoaded() {
         super.onLoaded();
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.info, 'onLoaded()');
+            CLog(CLogTypes.info, 'onLoaded()', this);
         }
         if (!this.initialized) {
             this.initMap();
             this.initialized = true;
         }
     }
+    onUnloaded() {
+        super.onUnloaded();
+        if (Trace.isEnabled()) {
+            CLog(CLogTypes.info, 'onUnloaded()', this);
+        }
+    }
     initNativeView() {
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.info, 'initNativeView(): top');
+            CLog(CLogTypes.info, 'initNativeView(): top', this);
         }
         this.nativeView.owner = this;
         // Application.android.on(AndroidApplication.activityStartedEvent, this.onStart, this);
@@ -202,13 +208,13 @@ export class MapboxView extends MapboxViewBase {
      * @link https://docs.nativescript.org/plugins/ui-plugin-custom
      */
     disposeNativeView() {
+        super.disposeNativeView();
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.info, 'disposeNativeView(): top');
+            CLog(CLogTypes.info, 'disposeNativeView(): top', this);
         }
         this.nativeView.owner = null;
         this.mapbox?.destroy();
         this.mapbox = null;
-        super.disposeNativeView();
     }
     /**
      * initialize the map
@@ -455,7 +461,7 @@ export class Mapbox extends MapboxCommon {
                 logoPlugin.setEnabled(!settings.hideLogo);
                 logoPlugin.setPosition(Mapbox.mapPositionToGravity(settings.logoPosition));
                 if (Trace.isEnabled()) {
-                    CLog(CLogTypes.info, 'show(): onMapReady() with instance:', this._mapboxMapInstance);
+                    CLog(CLogTypes.info, 'show(): onMapReady() with instance:', this._mapboxMapInstance, this._mapboxViewInstance);
                 }
                 // Android SDK 7.0.0 and on requires that the style be set separately after the map
                 // is initialized. We do not consider the map ready until the style has successfully
@@ -472,6 +478,9 @@ export class Mapbox extends MapboxCommon {
                             }
                             // initialize the event handlers now that we have a constructed view.
                             this.markerManager = new MarkerManager(this._mapboxMapInstance, this._mapboxViewInstance, (marker) => {
+                                if (Trace.isEnabled()) {
+                                    CLog(CLogTypes.info, 'MarkerManager.onMarkerClicked():');
+                                }
                                 const cachedMarker = this._getClickedMarkerDetails(marker);
                                 if (cachedMarker?.onTap) {
                                     const result = cachedMarker.onTap(cachedMarker);
@@ -611,16 +620,11 @@ export class Mapbox extends MapboxCommon {
             throw ex;
         }
     }
-    /**
-     * destroy the map programmatically
-     *
-     * Destroy the map instance.
-     */
-    clear(nativeMap) {
+    async destroy(nativeMap) {
         this.clearEventListeners();
         this._markerIconDownloadCache = {};
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.info, 'destroy(): destroying mapbox view.');
+            CLog(CLogTypes.info, 'destroy(): destroying mapbox view.', this.view, this._mapboxViewInstance);
         }
         if (this.lineManager) {
             this.lineManager.onDestroy();
@@ -657,7 +661,7 @@ export class Mapbox extends MapboxCommon {
             const viewGroup = this._mapboxViewInstance.getParent();
             if (viewGroup !== null) {
                 if (Trace.isEnabled()) {
-                    CLog(CLogTypes.info, 'destroy(): removing _mapboxViewInstance view.');
+                    CLog(CLogTypes.info, 'destroy(): removing _mapboxViewInstance view.', this._mapboxViewInstance);
                 }
                 viewGroup.removeView(this._mapboxViewInstance);
             }
@@ -670,9 +674,6 @@ export class Mapbox extends MapboxCommon {
             this._mapboxMapInstance = null;
         }
     }
-    async destroy(nativeMap) {
-        this.clear();
-    }
     // private enableUserLocationPlugin() {
     //     if (!this.map) {
     //         return;
@@ -791,30 +792,12 @@ export class Mapbox extends MapboxCommon {
         }
         this._mapboxViewInstance.onStart();
     }
-    // async onResume(nativeMapViewInstance?: any) {
-    //     if (Trace.isEnabled()) {
-    //         CLog(CLogTypes.info, 'onResume()');
-    //     }
-    //     this._mapboxViewInstance.onResume();
-    // }
-    // async onPause(nativeMapViewInstance?: any) {
-    //     if (Trace.isEnabled()) {
-    //         CLog(CLogTypes.info, 'onPause()');
-    //     }
-    //     this._mapboxViewInstance.onPause();
-    // }
     async onStop(nativeMap) {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'onStop()');
         }
         this._mapboxViewInstance.onStop();
     }
-    // async onLowMemory(nativeMap?: any) {
-    //     if (Trace.isEnabled()) {
-    //         CLog(CLogTypes.info, 'onLowMemory()');
-    //     }
-    //     this._mapboxViewInstance.onLowMemory();
-    // }
     async onDestroy(nativeMap) {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'onDestroy()');
@@ -1155,6 +1138,7 @@ export class Mapbox extends MapboxCommon {
             marker.android = this.markerManager.addMarker(new AndroidMarker({
                 position: com.mapbox.geojson.Point.fromLngLat(marker.lng, marker.lat),
                 title: marker.title,
+                id: marker.id,
                 snippet: marker.subtitle,
                 icon: icon?.android
             }));
@@ -1163,7 +1147,6 @@ export class Mapbox extends MapboxCommon {
                 this.markerManager.selectMarker(marker.android);
             }
             marker.update = (newSettings) => {
-                console.log('update marker', Object.keys(newSettings), newSettings);
                 const theMarker = this._markers.find((m) => m.id === marker.id);
                 if (theMarker) {
                     if (newSettings.onTap) {
@@ -1201,6 +1184,9 @@ export class Mapbox extends MapboxCommon {
         if (!this._mapboxMapInstance) {
             return;
         }
+        if (Trace.isEnabled()) {
+            CLog(CLogTypes.info, '_removeMarkers: ', ids);
+        }
         this._markers.forEach((marker) => {
             if (!ids || (marker && marker.id && ids.indexOf(marker.id) > -1)) {
                 if (marker && marker.android) {
@@ -1478,7 +1464,6 @@ export class Mapbox extends MapboxCommon {
                 }
                 const polygonOptions = new com.mapbox.maps.plugin.annotation.generated.PolygonAnnotationOptions();
                 const nPoints = java.util.Arrays.asList([java.util.Arrays.asList(points.map((p) => com.mapbox.geojson.Point.fromLngLat(p.lng, p.lat)))]);
-                console.log('add points', nPoints);
                 polygonOptions.withPoints(nPoints);
                 polygonOptions.withFillColor(Mapbox.getAndroidColor(options.fillColor));
                 polygonOptions.withFillOpacity(options.fillOpacity === undefined ? 1 : options.fillOpacity);
@@ -1486,7 +1471,7 @@ export class Mapbox extends MapboxCommon {
                 if (options.strokeColor) {
                     polygonOptions.withFillOutlineColor(Mapbox.getAndroidColor(options.strokeColor));
                 }
-                this._polylines[options.id || new Date().getTime()] = this.polygonManager.create(polygonOptions);
+                this._polygons[options.id || new Date().getTime()] = this.polygonManager.create(polygonOptions);
                 resolve();
             }
             catch (ex) {
@@ -1640,10 +1625,10 @@ export class Mapbox extends MapboxCommon {
                         if (Trace.isEnabled()) {
                             CLog(CLogTypes.info, 'Mapbox:setOnMapClickListener(): click event at point:', point);
                         }
-                        return this.checkForClickEvent({
+                        return (listener({
                             lat: point.latitude(),
                             lng: point.longitude()
-                        });
+                        }) ?? true);
                     }
                 });
                 com.mapbox.maps.plugin.gestures.GesturesUtils.addOnMapClickListener(this._mapboxMapInstance, this.onMapClickListener);
@@ -1670,7 +1655,7 @@ export class Mapbox extends MapboxCommon {
                         lng: point.longitude()
                     })
                 });
-                this._getGesturesPlugin().addOnMapLongClickListener(this.onMapLongClickListener);
+                com.mapbox.maps.plugin.gestures.GesturesUtils.addOnMapLongClickListener(this._mapboxMapInstance, this.onMapLongClickListener);
                 resolve();
             }
             catch (ex) {
@@ -1789,7 +1774,7 @@ export class Mapbox extends MapboxCommon {
                 this.onFlingListener = new com.mapbox.maps.plugin.gestures.OnFlingListener({
                     onFling: () => listener()
                 });
-                this._getGesturesPlugin().addOnFlingListener(this.onFlingListener);
+                com.mapbox.maps.plugin.gestures.GesturesUtils.addOnFlingListener(this._mapboxMapInstance, this.onFlingListener);
                 resolve();
             }
             catch (ex) {
@@ -1966,7 +1951,6 @@ export class Mapbox extends MapboxCommon {
                     bounds: options.bounds,
                     ...options.metadata
                 };
-                console.log('downloadRegion', regionId, new com.mapbox.bindgen.Value(JSON.stringify(info)));
                 const regionOptions = new com.mapbox.common.TileRegionLoadOptions.Builder()
                     .geometry(bbox)
                     .descriptors(java.util.Collections.singletonList(tilesetDescriptor))
@@ -2617,7 +2601,11 @@ export class Mapbox extends MapboxCommon {
             return 'file://' + path.join(knownFolders.currentApp().path, input.replace('~/', ''));
         }
         else {
-            const key = Object.keys(MapStyle)[Object.values(MapStyle).indexOf(input)];
+            let key = Object.keys(MapStyle)[Object.values(MapStyle).indexOf(input)];
+            // on android STREETS is defined as MAPBOX_STREETS field
+            if (key === 'STREETS') {
+                key = 'MAPBOX_STREETS';
+            }
             // fix because MAPBOX_STREETS and others are not exposed by the
             const field = Style.class.getDeclaredField(key) || Style.class.getDeclaredField('MAPBOX_STREETS');
             field.setAccessible(true);
@@ -2825,7 +2813,6 @@ export class Mapbox extends MapboxCommon {
                 invoke: (settings) => {
                     settings.setEnabled(true);
                     settings.setPulsingEnabled(true);
-                    console.log('setPuckBearingEnabled', options.cameraMode, options.renderMode, options.renderMode !== 'NORMAL', com.mapbox.maps.plugin.PuckBearing.HEADING, com.mapbox.maps.plugin.PuckBearing.COURSE);
                     settings.setLocationPuck(com.mapbox.maps.plugin.locationcomponent.LocationComponentUtils.createDefault2DPuck(true));
                     settings.setPuckBearingEnabled(options.renderMode !== 'NORMAL');
                     settings.setPuckBearing(options.cameraMode?.indexOf('COMPASS') !== -1 ? com.mapbox.maps.plugin.PuckBearing.HEADING : com.mapbox.maps.plugin.PuckBearing.COURSE);

package/index.d.ts

@@ -67,10 +67,7 @@ export declare class Mapbox extends MapboxCommon implements MapboxApi {
     unhide(): Promise<void>;
     destroy(nativeMap?: any): Promise<void>;
     onStart(nativeMap?: any): Promise<void>;
-    onResume(nativeMap?: any): Promise<void>;
-    onPause(nativeMap?: any): Promise<void>;
     onStop(nativeMap?: any): Promise<void>;
-    onLowMemory(nativeMap?: any): Promise<void>;
     onDestroy(nativeMap?: any): Promise<void>;
     setMapStyle(style: string | MapStyle, nativeMap?: any): Promise<void>;
     getImage(imageId: string, nativeMap?: any): Promise<ImageSource>;

package/index.ios.d.ts

@@ -39,6 +39,7 @@ export declare class Mapbox extends MapboxCommon implements MapboxApi {
     removeImage(imageId: string, nativeMap?: any): Promise<void>;
     addMarkers(markers: MapboxMarker[], nativeMap?: any): Promise<void>;
     selectedMarker: MapboxMarker;
+    isMarkerSelected(marker: MapboxMarker): boolean;
     deselectMarker(marker: MapboxMarker): Promise<void>;
     selectMarker(marker: MapboxMarker): Promise<void>;
     removeMarkers(ids?: any, nativeMap?: any): Promise<void>;
@@ -104,8 +105,6 @@ export declare class Mapbox extends MapboxCommon implements MapboxApi {
         y: number;
     }, nativeMap?: any): LatLng;
     onStart(nativeMap?: any): Promise<void>;
-    onResume(nativeMap?: any): Promise<void>;
-    onPause(nativeMap?: any): Promise<void>;
     onStop(nativeMap?: any): Promise<void>;
     onLowMemory(nativeMap?: any): Promise<void>;
     onDestroy(nativeMap?: any): Promise<void>;

package/index.ios.js

@@ -87,7 +87,7 @@ async function fetchImageIOS(imagePath) {
         if (_markerIconDownloadCache[imagePath])
             return _markerIconDownloadCache[imagePath];
         const img = await Http.getImage(imagePath);
-        if (img && img.ios) {
+        if (img?.ios) {
             _markerIconDownloadCache[imagePath] = img.ios;
             return img.ios;
         }
@@ -403,7 +403,7 @@ export class Mapbox extends MapboxCommon {
                 view.addSubview(nativeMap);
                 this.setMapboxViewInstance(nativeMap);
                 if (settings.showUserLocation) {
-                    this.showUserLocationMarker({});
+                    this.showUserLocationMarker({ cameraMode: 'NONE' });
                 }
                 this.initEventHandlerShim(settings, this._mapboxViewInstance);
                 if (settings.onMapReady) {
@@ -559,7 +559,7 @@ export class Mapbox extends MapboxCommon {
                     return m;
                 }));
                 updated.forEach((m) => {
-                    if (m.icon && typeof m.icon === 'string' && m.iconDownloaded) {
+                    if (typeof m?.icon === 'string' && m.iconDownloaded) {
                         try {
                             b.addImage(m.icon, m.iconDownloaded);
                             delete m.iconDownloaded;
@@ -598,7 +598,8 @@ export class Mapbox extends MapboxCommon {
                                 _marker.lng = newSettings.lng;
                                 b.updateMarkerPosition(_marker.id + '', newSettings.lat, newSettings.lng);
                             }
-                            if (newSettings.selected) {
+                            if (newSettings.selected || this.isMarkerSelected(_marker)) {
+                                // this will also update callout position
                                 this.selectMarker(_marker);
                             }
                         }
@@ -615,8 +616,11 @@ export class Mapbox extends MapboxCommon {
             }
         });
     }
+    isMarkerSelected(marker) {
+        return this.selectedMarker === marker || this.selectedMarker?.id === marker.id;
+    }
     async deselectMarker(marker) {
-        if (this.selectedMarker === marker || this.selectedMarker?.id === marker.id) {
+        if (this.isMarkerSelected(marker)) {
             this.hideCalloutForMarkerById(marker.id + '');
             this.selectedMarker = null;
         }
@@ -627,7 +631,7 @@ export class Mapbox extends MapboxCommon {
                 if (Trace.isEnabled()) {
                     CLog(CLogTypes.info, 'selectMarker():', marker.id);
                 }
-                if (this.selectedMarker) {
+                if (this.selectedMarker && !this.isMarkerSelected(marker)) {
                     this.deselectMarker(this.selectedMarker);
                 }
                 await this.showCalloutForMarkerById(marker.id + '');
@@ -1313,7 +1317,6 @@ export class Mapbox extends MapboxCommon {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'createCalloutView1():', marker.id, marker.title, !!this._reusableCalloutView);
         }
-        this._reusableCalloutView.removeEventListener('tap');
         return this._reusableCalloutView;
     }
     async showCalloutForMarkerById(markerId) {
@@ -1324,10 +1327,12 @@ export class Mapbox extends MapboxCommon {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'showCalloutForMarkerById():', typeof markerId, markerId);
         }
+        const callout = this.createCalloutView(m);
         if (this.bridgeInstance.hasViewAnnotationForMarker(markerId)) {
-            return;
+            // let s Update
+            this.bridgeInstance.removeViewAnnotationForMarker(markerId);
+            // return;
         }
-        const callout = this.createCalloutView(m);
         callout.on('tap', () => {
             try {
                 const res = m.onCalloutTap ? m.onCalloutTap(m) : undefined;
@@ -1338,6 +1343,8 @@ export class Mapbox extends MapboxCommon {
                 console.error('callout tap handler error', e);
             }
         });
+        this._reusableCalloutView.removeEventListener('tap');
+        this._reusableCalloutView.nativeViewProtected?.removeFromSuperview();
         try {
             const nativeView = createUIViewAutoSizeUIViewAutoSize(callout);
             if (Trace.isEnabled()) {
@@ -1707,12 +1714,12 @@ export class Mapbox extends MapboxCommon {
     onStart(nativeMap) {
         return Promise.resolve();
     }
-    onResume(nativeMap) {
-        return Promise.resolve();
-    }
-    onPause(nativeMap) {
-        return Promise.resolve();
-    }
+    // onResume(nativeMap?: any): Promise<void> {
+    //     return Promise.resolve();
+    // }
+    // onPause(nativeMap?: any): Promise<void> {
+    //     return Promise.resolve();
+    // }
     onStop(nativeMap) {
         return Promise.resolve();
     }

package/markers/Marker.android.d.ts

@@ -7,13 +7,14 @@ export declare class AndroidMarker {
     icon: android.graphics.Bitmap;
     title?: string;
     snippet?: string;
+    id?: string | number;
     pointAnnotation: com.mapbox.maps.plugin.annotation.generated.PointAnnotation;
     viewAnnotation: android.view.View;
     view: StackLayout;
     anchor: com.mapbox.maps.ViewAnnotationAnchorConfig;
     layerId: string;
-    prepared: boolean;
     constructor(opts: {
+        id: string | number;
         position: com.mapbox.geojson.Point;
         icon: android.graphics.Bitmap;
         title?: string;

package/markers/Marker.android.js

@@ -5,11 +5,11 @@ import { CLog, CLogTypes } from '../common';
  */
 export class AndroidMarker {
     constructor(opts) {
-        this.prepared = false;
         if (!opts.title && !opts.snippet) {
             throw new Error('Marker should have either title or snippet!');
         }
         this.position = opts.position;
+        this.id = opts.id;
         this.icon = opts.icon;
         this.title = opts.title;
         this.snippet = opts.snippet;
@@ -23,7 +23,7 @@ export class AndroidMarker {
         this.pointAnnotation = pointAnnotationManager.create(new PointAnnotationOptions().withPoint(this.position).withIconAnchor(IconAnchor.valueOf('BOTTOM')).withIconImage(this.icon));
         this.layerId = layerId;
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'MarkerManager prepareAnnotationMarker: ' + layerId);
+            CLog(CLogTypes.log, 'MarkerManager prepareAnnotationMarker: ' + layerId, this.id, this.pointAnnotation);
         }
     }
     update(pointAnnotationManager) {

package/markers/MarkerManager.android.d.ts

@@ -13,6 +13,7 @@ export declare class MarkerManager {
     private selectedMarker;
     private onInfoWindowTapped;
     private _reusableCalloutView;
+    private _reusableCalloutNativeView;
     private onMapClickListener;
     private onPointClickListener;
     onViewAnnotationUpdatedListener: com.mapbox.maps.viewannotation.OnViewAnnotationUpdatedListener;
@@ -28,7 +29,7 @@ export declare class MarkerManager {
     prepareViewAnnotation(marker: AndroidMarker, onInfoWindowClick: any): void;
     removeMarker(marker: AndroidMarker): void;
     selectMarker(marker: AndroidMarker, deselectIfSelected?: boolean, update?: boolean): void;
-    deselectMarker(marker: AndroidMarker): void;
+    deselectMarker(marker: AndroidMarker): boolean;
     destroy(): void;
     updateOffsetX(marker: AndroidMarker, leftTop: any, width: number): void;
     isSelected(marker: AndroidMarker): boolean;

package/markers/MarkerManager.android.js

@@ -6,7 +6,7 @@ import { createInfoWindowView } from './Marker.common';
  */
 export class MarkerManager {
     constructor(map, mapView, onMarkerClick, onInfoWindowClick) {
-        this.markerList = new Set();
+        this.markerList = [];
         this.map = map;
         this.mapView = mapView;
         this.onInfoWindowTapped = onInfoWindowClick;
@@ -17,13 +17,19 @@ export class MarkerManager {
         // add click listeners
         this.onPointClickListener = new com.mapbox.maps.plugin.annotation.generated.OnPointAnnotationClickListener({
             onAnnotationClick: (annotation) => {
-                for (const marker of this.markerList) {
-                    if (marker.pointAnnotation === annotation) {
-                        if (onMarkerClick(marker)) {
-                            return true;
-                        }
-                        this.selectMarker(marker, true);
+                const index = this.markerList.findIndex((m) => m.pointAnnotation === annotation);
+                if (Trace.isEnabled()) {
+                    CLog(CLogTypes.info, 'MarkerManager.onAnnotationClick():', annotation, index, this.markerList.map((m) => m.id));
+                }
+                if (index !== -1) {
+                    const marker = this.markerList[index];
+                    if (Trace.isEnabled()) {
+                        CLog(CLogTypes.info, 'MarkerManager.onAnnotationClick(): found', annotation);
+                    }
+                    if (onMarkerClick(marker)) {
+                        return true;
                     }
+                    this.selectMarker(marker, true);
                 }
                 return true;
             }
@@ -32,17 +38,17 @@ export class MarkerManager {
         // Map click listener to deselect all markers
         this.onMapClickListener = new com.mapbox.maps.plugin.gestures.OnMapClickListener({
             onMapClick: (point) => {
-                if (this.selectedMarker) {
-                    this.deselectMarker(this.selectedMarker);
-                    return true;
+                if (Trace.isEnabled()) {
+                    CLog(CLogTypes.log, 'MarkerManager onMapClick: ', !!this.selectedMarker);
                 }
-                return false;
+                return this.deselectMarker(this.selectedMarker);
             }
         });
         com.mapbox.maps.plugin.gestures.GesturesUtils.addOnMapClickListener(map, this.onMapClickListener);
     }
     deselectAll() {
-        this.markerList.forEach((marker) => this.deselectMarker(marker));
+        this.deselectMarker(this.selectedMarker);
+        // this.markerList.forEach((marker: AndroidMarker) => this.deselectMarker(marker));
     }
     adjustViewAnnotationXOffset(marker) {
         const listener = new com.mapbox.maps.viewannotation.OnViewAnnotationUpdatedListener({
@@ -61,21 +67,20 @@ export class MarkerManager {
     updateMarker(marker) {
         // this.adjustViewAnnotationXOffset(marker);
         marker.update(this.pointAnnotationManager);
-        com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, new com.mapbox.maps.ViewAnnotationOptions.Builder().annotatedFeature(com.mapbox.maps.AnnotatedFeature.valueOf(marker.pointAnnotation.getGeometry())).build());
+        if (marker.viewAnnotation) {
+            com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, new com.mapbox.maps.ViewAnnotationOptions.Builder().annotatedFeature(com.mapbox.maps.AnnotatedFeature.valueOf(marker.pointAnnotation.getGeometry())).build());
+        }
     }
     addMarker(marker) {
         if (Trace.isEnabled()) {
-            CLog(CLogTypes.log, 'MarkerManager addMarker: ' + JSON.stringify(marker));
+            CLog(CLogTypes.log, 'MarkerManager addMarker: ', marker, !!this.selectedMarker);
+        }
+        if (!marker.pointAnnotation || this.markerList.findIndex((m) => m.pointAnnotation === marker.pointAnnotation) === -1) {
+            marker.prepareAnnotationMarker(this.pointAnnotationManager, MarkerManager.LAYER_ID);
+            this.deselectMarker(this.selectedMarker);
+            this.markerList.push(marker);
+            // this.selectMarker(marker);
         }
-        marker.prepareAnnotationMarker(this.pointAnnotationManager, MarkerManager.LAYER_ID);
-        this.prepareViewAnnotation(marker, (e) => {
-            // info Window tapped.
-            if (!this.onInfoWindowTapped(marker)) {
-                this.deselectMarker(marker);
-            }
-        });
-        this.markerList.add(marker);
-        // this.selectMarker(marker);
         return marker;
     }
     /**
@@ -84,6 +89,9 @@ export class MarkerManager {
      */
     prepareViewAnnotation(marker, onInfoWindowClick) {
         // --- Step 1: Create a NativeScript view tree
+        if (Trace.isEnabled()) {
+            CLog(CLogTypes.info, 'MarkerManager:prepareViewAnnotation():', this._reusableCalloutView);
+        }
         if (this._reusableCalloutView) {
             const title = this._reusableCalloutView.getViewById('title');
             title.text = marker?.title || '';
@@ -93,20 +101,29 @@ export class MarkerManager {
         }
         else {
             this._reusableCalloutView = createInfoWindowView(marker.title, marker.snippet);
+            this._reusableCalloutView._setupAsRootView(Utils.android.getApplicationContext());
+            this._reusableCalloutView.parent = Application.getRootView();
+            this._reusableCalloutView._isAddedToNativeVisualTree = true;
+            this._reusableCalloutView.callLoaded();
+        }
+        if (!this._reusableCalloutNativeView) {
+            const nativeView = this._reusableCalloutView.nativeViewProtected;
+            const frameLayout = new android.widget.FrameLayout(this._reusableCalloutView._context);
+            const layoutParams = new android.widget.FrameLayout.LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
+            frameLayout.addView(nativeView);
+            frameLayout.setLayoutParams(layoutParams);
+            frameLayout.measure(android.view.View.MeasureSpec.makeMeasureSpec(0, android.view.View.MeasureSpec.UNSPECIFIED), android.view.View.MeasureSpec.makeMeasureSpec(0, android.view.View.MeasureSpec.UNSPECIFIED));
+            frameLayout.layout(0, 0, this._reusableCalloutView.getMeasuredWidth(), this._reusableCalloutView.getMeasuredHeight());
+            this._reusableCalloutNativeView = frameLayout;
+        }
+        if (this._reusableCalloutNativeView.getParent()) {
+            if (Trace.isEnabled()) {
+                CLog(CLogTypes.info, 'MarkerManager:prepareViewAnnotation(): remove from parent', this._reusableCalloutNativeView.getParent());
+            }
+            this._reusableCalloutNativeView.getParent().removeView(this._reusableCalloutNativeView);
         }
-        this._reusableCalloutView._setupAsRootView(Utils.android.getApplicationContext());
-        this._reusableCalloutView.parent = Application.getRootView();
-        this._reusableCalloutView._isAddedToNativeVisualTree = true;
-        this._reusableCalloutView.callLoaded();
-        const nativeView = this._reusableCalloutView.nativeViewProtected;
         this._reusableCalloutView.removeEventListener('tap');
         this._reusableCalloutView.on('tap', onInfoWindowClick);
-        const frameLayout = new android.widget.FrameLayout(this._reusableCalloutView._context);
-        const layoutParams = new android.widget.FrameLayout.LayoutParams(android.view.ViewGroup.LayoutParams.WRAP_CONTENT, android.view.ViewGroup.LayoutParams.WRAP_CONTENT);
-        frameLayout.addView(nativeView);
-        frameLayout.setLayoutParams(layoutParams);
-        frameLayout.measure(android.view.View.MeasureSpec.makeMeasureSpec(0, android.view.View.MeasureSpec.UNSPECIFIED), android.view.View.MeasureSpec.makeMeasureSpec(0, android.view.View.MeasureSpec.UNSPECIFIED));
-        frameLayout.layout(0, 0, nativeView.getMeasuredWidth(), nativeView.getMeasuredHeight());
         // frameLayout.setLayoutParams(new android.widget.FrameLayout.LayoutParams(nativeView.getMeasuredWidth(), nativeView.getMeasuredHeight()));
         // --- Step 3: Prepare view annotation options
         const ViewAnnotationAnchor = com.mapbox.maps.ViewAnnotationAnchor;
@@ -132,17 +149,25 @@ export class MarkerManager {
         ]))
             .build();
         // --- Step 4: Add the view to Mapbox’s ViewAnnotationManager
-        com.nativescript.mapbox.ViewAnnotationManager.addViewAnnotation(this.mapView, frameLayout, viewAnnotationOptions);
+        com.nativescript.mapbox.ViewAnnotationManager.addViewAnnotation(this.mapView, this._reusableCalloutNativeView, viewAnnotationOptions);
         // --- Step 5: Store references
-        marker.viewAnnotation = frameLayout;
+        marker.viewAnnotation = this._reusableCalloutNativeView;
         marker.view = this._reusableCalloutView;
-        marker.prepared = true;
     }
     removeMarker(marker) {
-        if (!marker.prepared)
+        if (Trace.isEnabled()) {
+            CLog(CLogTypes.info, '_removeMarkers: ', marker.id, marker.pointAnnotation);
+        }
+        if (!marker.pointAnnotation)
             return;
-        this.markerList.delete(marker);
-        com.nativescript.mapbox.ViewAnnotationManager.removeViewAnnotation(this.mapView, marker.viewAnnotation);
+        const index = this.markerList.findIndex((m) => m.pointAnnotation === marker.pointAnnotation);
+        if (index !== -1) {
+            this.markerList.splice(index, 1);
+        }
+        if (marker.viewAnnotation) {
+            com.nativescript.mapbox.ViewAnnotationManager.removeViewAnnotation(this.mapView, marker.viewAnnotation);
+            marker.viewAnnotation = null;
+        }
         this.pointAnnotationManager.delete(marker.pointAnnotation);
         marker.destroy();
     }
@@ -156,23 +181,34 @@ export class MarkerManager {
             this.deselectMarker(this.selectedMarker);
         }
         this.selectedMarker = marker;
-        // this.adjustViewAnnotationXOffset(marker);
-        com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, new com.mapbox.maps.ViewAnnotationOptions.Builder().visible(java.lang.Boolean.valueOf(true)).selected(java.lang.Boolean.valueOf(true)).build());
-        marker.viewAnnotation.setVisibility(android.view.View.VISIBLE);
+        this.prepareViewAnnotation(marker, (e) => {
+            // info Window tapped.
+            if (!this.onInfoWindowTapped(marker)) {
+                this.deselectMarker(marker);
+            }
+        });
     }
     deselectMarker(marker) {
         if (!this.selectedMarker || marker.pointAnnotation !== this.selectedMarker.pointAnnotation) {
-            return;
+            return false;
+        }
+        if (Trace.isEnabled()) {
+            CLog(CLogTypes.log, 'MarkerManager deselectMarker: ', marker, !!this.selectedMarker);
         }
         this.selectedMarker = null;
-        const View = android.view.View;
-        const viewAnnotationOptionsBuilder = new com.mapbox.maps.ViewAnnotationOptions.Builder().selected(java.lang.Boolean.valueOf(false)).visible(java.lang.Boolean.valueOf(false));
+        // const View = android.view.View;
+        // const viewAnnotationOptionsBuilder = new com.mapbox.maps.ViewAnnotationOptions.Builder().selected(java.lang.Boolean.valueOf(false)).visible(java.lang.Boolean.valueOf(false));
         // if (marker.anchor) {
         //     const anchorBuilder = marker.anchor.toBuilder().offsetX(0.0).build();
         //     viewAnnotationOptionsBuilder.variableAnchors(java.util.Collections.singletonList(anchorBuilder));
         // }
-        com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, viewAnnotationOptionsBuilder.build());
-        marker.viewAnnotation.setVisibility(View.INVISIBLE);
+        if (marker.viewAnnotation) {
+            com.nativescript.mapbox.ViewAnnotationManager.removeViewAnnotation(this.mapView, marker.viewAnnotation);
+            marker.viewAnnotation = null;
+        }
+        // com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, viewAnnotationOptionsBuilder.build());
+        // marker.viewAnnotation.setVisibility(View.INVISIBLE);
+        return true;
     }
     destroy() {
         this.markerList.forEach((m) => this.removeMarker(m));
@@ -181,8 +217,10 @@ export class MarkerManager {
         const gesturePlugin = this.mapView.getPlugin('MAPBOX_GESTURES_PLUGIN_ID');
         com.mapbox.maps.plugin.gestures.GesturesUtils.removeOnMapClickListener(this.map, this.onMapClickListener);
         this.onMapClickListener = null;
-        com.nativescript.mapbox.ViewAnnotationManager.removeOnViewAnnotationUpdatedListener(this.mapView, this.onViewAnnotationUpdatedListener);
-        this.onViewAnnotationUpdatedListener = null;
+        if (this.onViewAnnotationUpdatedListener) {
+            com.nativescript.mapbox.ViewAnnotationManager.removeOnViewAnnotationUpdatedListener(this.mapView, this.onViewAnnotationUpdatedListener);
+            this.onViewAnnotationUpdatedListener = null;
+        }
         if (this._reusableCalloutView) {
             this._reusableCalloutView._tearDownUI();
             this._reusableCalloutView = null;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-mapbox",
-    "version": "7.0.2",
+    "version": "7.0.4",
     "description": "Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.",
     "main": "index",
     "typings": "index.d.ts",
@@ -55,5 +55,5 @@
     "dependencies": {
         "@nativescript-community/perms": "^3.0.4"
     },
-    "gitHead": "b430be9b6de94048db69df9d79c0d3172661935a"
+    "gitHead": "76d122e7d75fa5889e1dcf1ff52638ad1ec67ebf"
 }

package/platforms/ios/src/MapboxBridge.swift

@@ -202,7 +202,7 @@ public class MapboxBridge: NSObject {
         // Register this bridge for the created MapView
         MapboxBridge.registerBridge(self, for: mv)
         
-        addImage("default_pin", image: UIImage(named: "default_pin"))
+        addImage("default_pin", UIImage(named: "default_pin"))
 
         if let options = optionsOpt {
             if ((options["hideLogo"] as? Bool) == true) {
@@ -409,7 +409,7 @@ public class MapboxBridge: NSObject {
         return nil
     }
     
-    @objc public func addImage(_ imageId: String, image: UIImage?) {
+    @objc public func addImage(_ imageId: String, _ image: UIImage?) {
         guard let mv = mapView else { return }
         if (image != nil) {
             imageRegistry[imageId] = image!
@@ -545,7 +545,7 @@ public class MapboxBridge: NSObject {
         annotation.allowOverlapWithPuck = true
         let image = an.image
         let imageHeight = image?.image.size.height ?? 0
-        let offsetY = imageHeight - 12
+        let offsetY = imageHeight/2 + 5
         // TODO: variableAnchors is broken for now if multiple
         annotation.variableAnchors = [ViewAnnotationAnchorConfig(anchor: .bottom, offsetY: offsetY)
                                       //                                      , ViewAnnotationAnchorConfig(anchor: .bottomLeft, offsetY: offsetY), ViewAnnotationAnchorConfig(anchor: .bottomRight, offsetY: offsetY)
@@ -559,6 +559,7 @@ public class MapboxBridge: NSObject {
     @objc public func updateViewAnnotationForMarker(_ markerId: String, _ lat: Double, _ lng: Double) -> Bool {
         guard mapView != nil else { return false }
         guard let view = viewAnnotationByMarkerId[markerId] else { return false }
+        view.view.setNeedsLayout()
         view.annotatedFeature = .geometry(Point(CLLocationCoordinate2D(latitude: lat, longitude: lng)))
         return true
     }

package/typings/mapbox.bridge.ios.d.ts

@@ -32,7 +32,7 @@ declare class MapboxBridge extends NSObject {
 
   setStyle(styleURIOrURL: string, completion: (success: boolean, error?: any) => void): void;
 
-  addImage(imageId: string, image: any): void;
+	addImage(imageId: string, image: UIImage): void;
   removeImage(imageId: string): void;
 
   addMarkers(markers: string): void;