@nativescript-community/ui-mapbox 7.0.0-alpha.14.3191a7b → 7.0.1

package/markers/MarkerManager.android.js

@@ -1,5 +1,6 @@
-import { Trace } from '@nativescript/core';
+import { Application, Trace, Utils } from '@nativescript/core';
 import { CLog, CLogTypes } from '../common';
+import { createInfoWindowView } from './Marker.common';
 /**
  * MarkerManager (Native Android Mapbox SDK version)
  */
@@ -58,7 +59,7 @@ export class MarkerManager {
         com.nativescript.mapbox.ViewAnnotationManager.addOnViewAnnotationUpdatedListener(this.mapView, listener);
     }
     updateMarker(marker) {
-        this.adjustViewAnnotationXOffset(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());
     }
@@ -67,7 +68,7 @@ export class MarkerManager {
             CLog(CLogTypes.log, 'MarkerManager addMarker: ' + JSON.stringify(marker));
         }
         marker.prepareAnnotationMarker(this.pointAnnotationManager, MarkerManager.LAYER_ID);
-        marker.prepareViewAnnotation(this.mapView, (e) => {
+        this.prepareViewAnnotation(marker, (e) => {
             // info Window tapped.
             if (!this.onInfoWindowTapped(marker)) {
                 this.deselectMarker(marker);
@@ -77,6 +78,66 @@ export class MarkerManager {
         // this.selectMarker(marker);
         return marker;
     }
+    /**
+     * Build a NativeScript view to use as info window.
+     * Then attach it to Mapbox via ViewAnnotationManager.
+     */
+    prepareViewAnnotation(marker, onInfoWindowClick) {
+        // --- Step 1: Create a NativeScript view tree
+        if (this._reusableCalloutView) {
+            const title = this._reusableCalloutView.getViewById('title');
+            title.text = marker?.title || '';
+            const subtitle = this._reusableCalloutView.getViewById('subtitle');
+            subtitle.text = marker?.snippet;
+            subtitle.visibility = marker?.snippet ? 'visible' : 'collapse';
+        }
+        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();
+        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;
+        const ViewAnnotationAnchorConfigBuilder = com.mapbox.maps.ViewAnnotationAnchorConfig.Builder;
+        const offsetY = (marker.pointAnnotation.getIconImageBitmap()?.getHeight() ?? 0) + MarkerManager.MARKER_PADDING_PX;
+        const anchor = new ViewAnnotationAnchorConfigBuilder().anchor(ViewAnnotationAnchor.BOTTOM).offsetY(offsetY).build();
+        // marker.anchor = anchor;
+        const viewAnnotationOptions = new com.mapbox.maps.ViewAnnotationOptions.Builder()
+            .visible(java.lang.Boolean.valueOf(true))
+            // .allowOverlap(java.lang.Boolean.valueOf(true))
+            // .width(java.lang.Double.valueOf(frameLayout.getMeasuredWidth()))
+            // .height(java.lang.Double.valueOf(frameLayout.getMeasuredHeight()))
+            .allowOverlapWithPuck(java.lang.Boolean.valueOf(true))
+            .ignoreCameraPadding(java.lang.Boolean.valueOf(true))
+            // .priority(java.lang.Long.valueOf(0))
+            .selected(java.lang.Boolean.valueOf(true))
+            .annotatedFeature(com.mapbox.maps.AnnotatedFeature.valueOf(marker.pointAnnotation.getGeometry()))
+            // TODO: variableAnchors is broken for now
+            .variableAnchors(java.util.Arrays.asList([
+            anchor
+            // new ViewAnnotationAnchorConfigBuilder().anchor(ViewAnnotationAnchor.BOTTOM_RIGHT).offsetY(offsetY).build(),
+            // new ViewAnnotationAnchorConfigBuilder().anchor(ViewAnnotationAnchor.BOTTOM_LEFT).offsetY(offsetY).build()
+        ]))
+            .build();
+        // --- Step 4: Add the view to Mapbox’s ViewAnnotationManager
+        com.nativescript.mapbox.ViewAnnotationManager.addViewAnnotation(this.mapView, frameLayout, viewAnnotationOptions);
+        // --- Step 5: Store references
+        marker.viewAnnotation = frameLayout;
+        marker.view = this._reusableCalloutView;
+        marker.prepared = true;
+    }
     removeMarker(marker) {
         if (!marker.prepared)
             return;
@@ -95,7 +156,7 @@ export class MarkerManager {
             this.deselectMarker(this.selectedMarker);
         }
         this.selectedMarker = marker;
-        this.adjustViewAnnotationXOffset(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);
     }
@@ -106,10 +167,10 @@ export class MarkerManager {
         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));
-        if (marker.anchor) {
-            const anchorBuilder = marker.anchor.toBuilder().offsetX(0.0).build();
-            viewAnnotationOptionsBuilder.variableAnchors(java.util.Collections.singletonList(anchorBuilder));
-        }
+        // 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);
     }
@@ -122,33 +183,38 @@ export class MarkerManager {
         this.onMapClickListener = null;
         com.nativescript.mapbox.ViewAnnotationManager.removeOnViewAnnotationUpdatedListener(this.mapView, this.onViewAnnotationUpdatedListener);
         this.onViewAnnotationUpdatedListener = null;
+        if (this._reusableCalloutView) {
+            this._reusableCalloutView._tearDownUI();
+            this._reusableCalloutView = null;
+        }
         this.map = null;
         this.mapView = null;
     }
     updateOffsetX(marker, leftTop, width) {
+        return;
         // if (marker.preventNextUpdateOffsetX) {
         //     marker.preventNextUpdateOffsetX = false;
         //     return;
         // }
-        const mapSize = this.mapView.getMapboxMap().getSize();
-        let resultOffsetX = 0.0;
-        if (leftTop.getX() < 0 && leftTop.getX() + width > 0) {
-            resultOffsetX = Math.abs(leftTop.getX()) + MarkerManager.ADDITIONAL_EDGE_PADDING_PX;
-        }
-        else if (leftTop.getX() + width > mapSize.getWidth() && leftTop.getX() < width) {
-            resultOffsetX = mapSize.getWidth() - leftTop.getX() - width - MarkerManager.ADDITIONAL_EDGE_PADDING_PX;
-        }
-        const anchor = marker.anchor ? marker.anchor.toBuilder().offsetX(resultOffsetX).build() : null;
-        if (anchor) {
-            const options = new com.mapbox.maps.ViewAnnotationOptions.Builder().variableAnchors(java.util.Collections.singletonList(anchor)).build();
-            // marker.preventNextUpdateOffsetX = true;
-            com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, options);
-        }
+        // const mapSize = this.mapView.getMapboxMap().getSize();
+        // let resultOffsetX = 0.0;
+        // if (leftTop.getX() < 0 && leftTop.getX() + width > 0) {
+        //     resultOffsetX = Math.abs(leftTop.getX()) + MarkerManager.ADDITIONAL_EDGE_PADDING_PX;
+        // } else if (leftTop.getX() + width > mapSize.getWidth() && leftTop.getX() < width) {
+        //     resultOffsetX = mapSize.getWidth() - leftTop.getX() - width - MarkerManager.ADDITIONAL_EDGE_PADDING_PX;
+        // }
+        // const anchor = marker.anchor ? marker.anchor.toBuilder().offsetX(resultOffsetX).build() : null;
+        // if (anchor) {
+        //     const options = new com.mapbox.maps.ViewAnnotationOptions.Builder().variableAnchors(java.util.Collections.singletonList(anchor)).build();
+        //     // marker.preventNextUpdateOffsetX = true;
+        //     com.nativescript.mapbox.ViewAnnotationManager.updateViewAnnotation(this.mapView, marker.viewAnnotation, options);
+        // }
     }
     isSelected(marker) {
         return this.selectedMarker?.pointAnnotation === marker.pointAnnotation;
     }
 }
+MarkerManager.MARKER_PADDING_PX = 10;
 MarkerManager.LAYER_ID = 'annotation-layer';
 MarkerManager.ADDITIONAL_EDGE_PADDING_PX = 20.0;
 //# sourceMappingURL=MarkerManager.android.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nativescript-community/ui-mapbox",
-    "version": "7.0.0-alpha.14.3191a7b",
+    "version": "7.0.1",
     "description": "Interactive, thoroughly customizable maps powered by vector tiles and OpenGL.",
     "main": "index",
     "typings": "index.d.ts",
@@ -53,7 +53,7 @@
     },
     "readmeFilename": "README.md",
     "dependencies": {
-        "@nativescript-community/perms": "^2.3.0"
+        "@nativescript-community/perms": "^3.0.4"
     },
-    "gitHead": "3191a7b4737338f81d8bd15615f11faf52024a66"
+    "gitHead": "c775cf24ff6f702e028f9a4fe2d562a863281eb5"
 }

package/platforms/ios/Podfile

@@ -1,2 +1,4 @@
 # see https://github.com/CocoaPods/CocoaPods/issues/11867 for why i use podspec
-pod 'Mapbox-iOS-SDK', :podspec => 'https://raw.githubusercontent.com/nativescript-community/mapbox-gl-native-ios/refs/heads/main/Mapbox-iOS-SDK.podspec'
+# pod 'Mapbox-iOS-SDK', :podspec => 'https://raw.githubusercontent.com/nativescript-community/mapbox-gl-native-ios/refs/heads/main/Mapbox-iOS-SDK.podspec'
+platform :ios, '14.0'
+pod 'MapboxMaps', '11.16.0'