@nativescript-community/ui-mapbox 7.0.3 → 7.0.5

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.5](https://github.com/nativescript-community/ui-mapbox/compare/v7.0.4...v7.0.5) (2025-10-30)
+
+**Note:** Version bump only for package @nativescript-community/ui-mapbox
+
+## [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

package/common.js

@@ -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
@@ -614,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();
@@ -660,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);
             }
@@ -673,9 +674,6 @@ export class Mapbox extends MapboxCommon {
             this._mapboxMapInstance = null;
         }
     }
-    async destroy(nativeMap) {
-        this.clear();
-    }
     // private enableUserLocationPlugin() {
     //     if (!this.map) {
     //         return;
@@ -794,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()');
@@ -2621,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);

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,10 +631,12 @@ 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 + '');
+                if (marker.title || marker.subtitle) {
+                    await this.showCalloutForMarkerById(marker.id + '');
+                }
                 resolve();
             }
             catch (ex) {
@@ -1313,8 +1319,6 @@ export class Mapbox extends MapboxCommon {
         if (Trace.isEnabled()) {
             CLog(CLogTypes.info, 'createCalloutView1():', marker.id, marker.title, !!this._reusableCalloutView);
         }
-        this._reusableCalloutView.removeEventListener('tap');
-        this._reusableCalloutView.nativeViewProtected?.removeFromSuperview();
         return this._reusableCalloutView;
     }
     async showCalloutForMarkerById(markerId) {
@@ -1325,10 +1329,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;
@@ -1339,6 +1345,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()) {
@@ -1373,7 +1381,7 @@ export class Mapbox extends MapboxCommon {
     }
     toggleCalloutForMarkerById(markerId) {
         const m = this._markers.find((x) => `${x.id}` === markerId);
-        if (!m || !m.id)
+        if (!m || !m.id || (!m.title && !m.subtitle))
             return;
         const exists = this.bridgeInstance.hasViewAnnotationForMarker(markerId);
         if (exists)
@@ -1708,12 +1716,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.js

@@ -5,9 +5,6 @@ import { CLog, CLogTypes } from '../common';
  */
 export class AndroidMarker {
     constructor(opts) {
-        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;

package/markers/MarkerManager.android.js

@@ -181,12 +181,14 @@ export class MarkerManager {
             this.deselectMarker(this.selectedMarker);
         }
         this.selectedMarker = marker;
-        this.prepareViewAnnotation(marker, (e) => {
-            // info Window tapped.
-            if (!this.onInfoWindowTapped(marker)) {
-                this.deselectMarker(marker);
-            }
-        });
+        if (marker.title || marker.snippet) {
+            this.prepareViewAnnotation(marker, (e) => {
+                // info Window tapped.
+                if (!this.onInfoWindowTapped(marker)) {
+                    this.deselectMarker(marker);
+                }
+            });
+        }
     }
     deselectMarker(marker) {
         if (!this.selectedMarker || marker.pointAnnotation !== this.selectedMarker.pointAnnotation) {
@@ -217,8 +219,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.3",
+    "version": "7.0.5",
     "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": "8dcec4f0ac14748e1dba5701bdc53e89bd45c135"
+    "gitHead": "c01d8e85c69b69325909a8735828c6fd60ea9c4c"
 }

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;