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

package/layers/layer-factory.ios.d.ts

@@ -1,13 +1,8 @@
 import { LayerCommon, LayerType } from '../common';
-export declare class LayerFactory {
-    static createLayer(style: any, source: any): Promise<LayerCommon>;
-    private static parseProperties;
-}
 export declare class Layer implements LayerCommon {
+    mapboxView: MapView;
     id: string;
-    private instance;
-    constructor(instance: MGLStyleLayer);
-    type(): LayerType;
+    constructor(mapboxView: MapView, id: string);
     visibility(): boolean;
     show(): void;
     hide(): void;
@@ -16,4 +11,9 @@ export declare class Layer implements LayerCommon {
     getFilter(): any[];
     setProperty(name: string, value: any): void;
     getProperty(name: string): any;
+    type(): LayerType;
+}
+export declare class LayerFactory {
+    static createLayer(mapboxView: MapView, style: any, belowLayerId: string): Promise<LayerCommon>;
+    static applyLayerProperties(mapboxView: MapView, layer: any, properties: Record<string, any>): void;
 }

package/layers/layer-factory.ios.js

@@ -1,120 +1,66 @@
-import { ExpressionParser } from '../expression/expression-parser';
-import { PropertyParser } from './parser/property-parser';
-export class LayerFactory {
-    static async createLayer(style, source) {
-        let nativeLayer;
-        switch (style.type) {
-            case 'line':
-                nativeLayer = MGLLineStyleLayer.alloc().initWithIdentifierSource(style.id, source);
-                break;
-            case 'circle':
-                nativeLayer = MGLCircleStyleLayer.alloc().initWithIdentifierSource(style.id, source);
-                break;
-            case 'fill':
-                nativeLayer = MGLFillStyleLayer.alloc().initWithIdentifierSource(style.id, source);
-                break;
-            case 'symbol':
-                nativeLayer = MGLSymbolStyleLayer.alloc().initWithIdentifierSource(style.id, source);
-                break;
-            case 'raster':
-                nativeLayer = MGLRasterStyleLayer.alloc().initWithIdentifierSource(style.id, source);
-                break;
-            default:
-                throw new Error(`Unknown layer type: ${style.type}`);
-        }
-        if (style.minzoom !== undefined) {
-            nativeLayer.minimumZoomLevel = style.minzoom;
-        }
-        if (style.maxzoom !== undefined) {
-            nativeLayer.maximumZoomLevel = style.maxzoom;
-        }
-        if (style['source-layer']) {
-            nativeLayer.sourceLayerIdentifier = style['source-layer'];
-        }
-        const layerProperties = this.parseProperties(style.type, Object.assign(style.paint || {}, style.layout || {})); // TODO: handle defaults
-        for (const propKey in layerProperties) {
-            if (Object.prototype.hasOwnProperty.call(layerProperties, propKey)) {
-                nativeLayer[propKey] = layerProperties[propKey];
-            }
-        }
-        const layer = new Layer(nativeLayer);
-        return layer;
-    }
-    static parseProperties(layerType, propertiesObject) {
-        return PropertyParser.parsePropertiesForLayer(propertiesObject);
-    }
-}
+// src/ui-mapbox/layer-factory.ios.ts
+// TypeScript shim that exports LayerFactory (TS API) while delegating to native NativeLayerFactory when available.
+// This preserves the TS export name 'LayerFactory' as requested.
+import { Trace } from '@nativescript/core';
+import { CLog, CLogTypes } from '../common';
 export class Layer {
-    constructor(instance) {
-        this.instance = instance;
-        this.id = instance.identifier;
-    }
-    type() {
-        if (this.instance instanceof MGLFillStyleLayer) {
-            return 'fill';
-        }
-        if (this.instance instanceof MGLLineStyleLayer) {
-            return 'line';
-        }
-        if (this.instance instanceof MGLSymbolStyleLayer) {
-            return 'symbol';
-        }
-        if (this.instance instanceof MGLCircleStyleLayer) {
-            return 'circle';
-        }
-        if (this.instance instanceof MGLHeatmapStyleLayer) {
-            return 'heatmap';
-        }
-        if (this.instance instanceof MGLFillExtrusionStyleLayer) {
-            return 'fill-extrusion';
-        }
-        if (this.instance instanceof MGLRasterStyleLayer) {
-            return 'raster';
-        }
-        if (this.instance instanceof MGLHillshadeStyleLayer) {
-            return 'hillshade';
-        }
-        if (this.instance instanceof MGLBackgroundStyleLayer) {
-            return 'background';
-        }
-        // there is no sky layer in the Mapbox iOS SDK
-        return null;
+    constructor(mapboxView, id) {
+        this.mapboxView = mapboxView;
+        this.id = id;
     }
     visibility() {
-        return this.instance.visible;
+        return true;
     }
     show() {
-        this.instance.visible = true;
+        NativeLayerFactory.setLayerVisibility(this.mapboxView, this.id, true);
     }
     hide() {
-        this.instance.visible = false;
+        NativeLayerFactory.setLayerVisibility(this.mapboxView, this.id, false);
     }
     getNativeInstance() {
-        return this.instance;
+        return null;
     }
     setFilter(filter) {
-        if (this.instance instanceof MGLVectorStyleLayer) {
-            // MGLVectorStyleLayer is the base type of many layer types. Predicates only supported on vector style layers.
-            // See https://docs.mapbox.com/ios/maps/api/6.3.0/Classes/MGLVectorStyleLayer.html
-            this.instance.predicate = ExpressionParser.parseJson(filter);
-        }
-        else {
-            throw new Error('Set filter only support for vector layer.');
-        }
+        // Not implemented here - recommend using addLayer with JSON via Mapbox.addLayer
     }
     getFilter() {
-        return ExpressionParser.toJson(this.instance.predicate);
+        return null;
     }
     setProperty(name, value) {
-        const properties = PropertyParser.parsePropertiesForLayer({ [name]: value });
-        for (const propKey in properties) {
-            if (Object.prototype.hasOwnProperty.call(properties, propKey)) {
-                this.instance[propKey] = properties[propKey];
-            }
-        }
+        NativeLayerFactory.setLayerProperty(this.mapboxView, this.id, name, value);
     }
     getProperty(name) {
-        return PropertyParser.propertyValueFromLayer(this.instance, name);
+        return NativeLayerFactory.getLayerProperty(this.mapboxView, this.id, name);
+    }
+    type() {
+        return NativeLayerFactory.getLayerType(this.mapboxView, this.id);
+    }
+}
+// Export a TS LayerFactory that matches the old TS API but delegates to NativeLayerFactory
+export class LayerFactory {
+    static async createLayer(mapboxView, style, belowLayerId) {
+        const styleJson = typeof style === 'string' ? style : JSON.stringify(style);
+        if (Trace.isEnabled()) {
+            CLog(CLogTypes.info, 'createLayer:', belowLayerId, JSON.stringify(style));
+        }
+        const id = style.id || 'layer_' + Date.now();
+        if (NativeLayerFactory.createLayer(mapboxView, id, styleJson, belowLayerId)) {
+            return new Layer(mapboxView, id);
+        }
+        else {
+            throw new Error('failed to create layer');
+        }
+    }
+    static applyLayerProperties(mapboxView, layer, properties) {
+        try {
+            // NativeLayerFactory.applyLayerProperties(layer.id, properties);
+            // if ((global as any).NativeLayerFactory && (global as any).NativeLayerFactory.setLayerProperty) {
+            for (const k of Object.keys(properties)) {
+                NativeLayerFactory.setLayerProperty(mapboxView, layer.id, k, properties[k]);
+            }
+            // }
+        }
+        catch (e) { }
     }
 }
 //# sourceMappingURL=layer-factory.ios.js.map

package/layers/parser/property-parser.d.ts

@@ -1,4 +1,4 @@
 export declare class PropertyParser {
-    static parsePropertiesForLayer(propertiesObject: any): any;
+    // static parsePropertiesForLayer(propertiesObject: any): any;
     static propertyValueFromLayer(layer, key: string): any;
 }

package/layers/parser/property-parser.ios.d.ts

@@ -1,4 +1,2 @@
 export declare class PropertyParser {
-    static parsePropertiesForLayer(propertiesObject: any): {};
-    static propertyValueFromLayer(layer: any, key: string): any;
 }

package/layers/parser/property-parser.ios.js

@@ -1,152 +1,3 @@
-import { Color } from '@nativescript/core';
-function toCamelCase(s) {
-    return s.replace(/([-_][a-z])/gi, ($1) => $1.toUpperCase().replace('-', '').replace('_', ''));
-}
-const styleExtras = {
-    // padding
-    iconTextFitPadding: {
-        iosType: 'edgeinsets'
-    },
-    // offsets
-    iconOffset: {
-        iosType: 'vector'
-    },
-    textOffset: {
-        iosType: 'vector'
-    },
-    lineOffset: {
-        iosType: 'vector'
-    },
-    // translates
-    fillTranslate: {
-        iosType: 'vector'
-    },
-    lineTranslate: {
-        iosType: 'vector'
-    },
-    iconTranslate: {
-        iosType: 'vector'
-    },
-    textTranslate: {
-        iosType: 'vector'
-    },
-    circleTranslate: {
-        iosType: 'vector'
-    },
-    fillExtrusionTranslate: {
-        iosType: 'vector'
-    }
-};
-const keysMap = {
-    'circle-pitch-scale': 'circleScaleAlignment',
-    'circle-translate': 'circleTranslation',
-    'circle-translate-anchor': 'circleTranslationAnchor',
-    'fill-antialias': 'fillAntialiased',
-    'fill-translate': 'fillTranslation',
-    'fill-translate-anchor': 'fillTranslationAnchor',
-    'icon-allow-overlap': 'iconAllowsOverlap',
-    'icon-keep-upright': 'keepsIconUpright',
-    'icon-ignore-placement': 'iconIgnoresPlacement',
-    'icon-image': 'iconImageName',
-    'icon-rotate': 'iconRotation',
-    'icon-rotate-alignment': 'iconRotationAlignment',
-    'icon-translate': 'iconTranslation',
-    'icon-translate-anchor': 'iconTranslationAnchor',
-    'icon-size': 'iconScale',
-    'line-translate': 'lineTranslation',
-    'line-translate-anchor': 'lineTranslationAnchor',
-    'line-dasharray': 'lineDashPattern',
-    'text-allow-overlap': 'textAllowsOverlap',
-    'text-field': 'text',
-    'text-font': 'textFontNames',
-    'text-justify': 'textJustification',
-    'text-ignore-placement': 'textIgnoresPlacement',
-    'text-keep-upright': 'keepsTextUpright',
-    'text-max-angle': 'maximumTextAngle',
-    'text-max-width': 'maximumTextWidth',
-    'text-rotate': 'textRotation',
-    'text-rotate-alignment': 'textRotationAlignment',
-    'text-size': 'textFontSize',
-    'text-translate': 'textTranslation',
-    'text-translate-anchor': 'textTranslationAnchor',
-    'raster-hue-rotate': 'rasterHueRotation',
-    'raster-resampling': 'rasterResamplingMode',
-    'raster-brightness-min': 'maximumRasterBrightness',
-    'raster-brightness-max': 'minimumRasterBrightness'
-};
-function transformValue(key, value, _styleType) {
-    if (_styleType === 'color') {
-        const color = value instanceof Color ? value : new Color(value);
-        return color.ios;
-    }
-    else if (_styleType === 'vector') {
-        const vector = CGVectorMake(value[0], value[1]);
-        return NSExpression.expressionWithMGLJSONObject(NSValue.valueWithCGVector(vector));
-    }
-    else if (_styleType === 'edgeinsets') {
-        const edgeInsets = new UIEdgeInsets({
-            top: value[0],
-            left: value[1],
-            bottom: value[2],
-            right: value[3]
-        });
-        return NSExpression.expressionWithMGLJSONObject(NSValue.valueWithUIEdgeInsets(edgeInsets));
-    }
-    else {
-        switch (key) {
-            case 'raster-resampling':
-                if (value === 'linear') {
-                    return 0 /* MGLRasterResamplingMode.Linear */;
-                }
-                else if (value === 'nearest') {
-                    return 1 /* MGLRasterResamplingMode.Nearest */;
-                }
-                else {
-                    return value;
-                }
-            default:
-                return value;
-        }
-    }
-}
 export class PropertyParser {
-    static parsePropertiesForLayer(propertiesObject) {
-        const nProperties = {};
-        if (propertiesObject) {
-            Object.keys(propertiesObject).forEach((k) => {
-                const actualKey = keysMap[k] || toCamelCase(k);
-                const value = propertiesObject[k];
-                const rValue = transformValue(k, value, styleExtras[k]?.iosType);
-                if (Array.isArray(value)) {
-                    nProperties[actualKey] = NSExpression.expressionWithMGLJSONObject(rValue);
-                }
-                else {
-                    nProperties[actualKey] = NSExpression.expressionForConstantValue(rValue);
-                }
-            });
-        }
-        return nProperties;
-    }
-    static propertyValueFromLayer(layer, key) {
-        const actualKey = keysMap[key] || toCamelCase(key);
-        const nValue = layer[actualKey];
-        if (!nValue) {
-            return null;
-        }
-        if (nValue.expressionType === 0 /* NSExpressionType.ConstantValueExpressionType */) {
-            if (nValue.constantValue instanceof UIColor) {
-                return Color.fromIosColor(nValue.constantValue);
-            }
-            else {
-                return nValue.constantValue;
-            }
-        }
-        else {
-            const expressionObj = nValue.mgl_jsonExpressionObject;
-            const data = NSJSONSerialization.dataWithJSONObjectOptionsError(expressionObj, 0);
-            const expression = NSString.alloc().initWithDataEncoding(data, NSUTF8StringEncoding);
-            return JSON.parse(expression);
-        }
-    }
 }
 //# sourceMappingURL=property-parser.ios.js.map

package/markers/Marker.android.d.ts

@@ -7,14 +7,12 @@ export declare class AndroidMarker {
     icon: android.graphics.Bitmap;
     title?: string;
     snippet?: string;
-    preventNextUpdateOffsetX?: boolean;
     pointAnnotation: com.mapbox.maps.plugin.annotation.generated.PointAnnotation;
     viewAnnotation: android.view.View;
     view: StackLayout;
     anchor: com.mapbox.maps.ViewAnnotationAnchorConfig;
     layerId: string;
     prepared: boolean;
-    private static readonly MARKER_PADDING_PX;
     constructor(opts: {
         position: com.mapbox.geojson.Point;
         icon: android.graphics.Bitmap;
@@ -26,10 +24,5 @@ export declare class AndroidMarker {
      */
     prepareAnnotationMarker(pointAnnotationManager: com.mapbox.maps.plugin.annotation.generated.PointAnnotationManager, layerId: string): void;
     update(pointAnnotationManager: com.mapbox.maps.plugin.annotation.generated.PointAnnotationManager): void;
-    /**
-     * Build a NativeScript view to use as info window.
-     * Then attach it to Mapbox via ViewAnnotationManager.
-     */
-    prepareViewAnnotation(mapView: com.mapbox.maps.MapView, onInfoWindowClick: any): void;
     destroy(): void;
 }

package/markers/Marker.android.js

@@ -1,4 +1,4 @@
-import { Application, Color, Label, StackLayout, Trace, Utils } from '@nativescript/core';
+import { Trace } from '@nativescript/core';
 import { CLog, CLogTypes } from '../common';
 /**
  * Hybrid Marker — uses native Mapbox annotation APIs, but NativeScript view for info window.
@@ -38,91 +38,17 @@ export class AndroidMarker {
         // 2. Update the annotation via the manager
         pointAnnotationManager.update(this.pointAnnotation);
         if (this.view) {
-            this.view.getViewById('title').text = this.title;
-            this.view.getViewById('snippet').text = this.snippet;
+            const title = this.view.getViewById('title');
+            title.text = this?.title || '';
+            const subtitle = this.view.getViewById('subtitle');
+            subtitle.text = this?.snippet;
+            subtitle.visibility = this?.snippet ? 'visible' : 'collapse';
         }
     }
-    /**
-     * Build a NativeScript view to use as info window.
-     * Then attach it to Mapbox via ViewAnnotationManager.
-     */
-    prepareViewAnnotation(mapView, onInfoWindowClick) {
-        // --- Step 1: Create a NativeScript view tree
-        const view = new StackLayout();
-        view.className = 'info-window';
-        view.padding = AndroidMarker.MARKER_PADDING_PX;
-        view.backgroundColor = '#FFFFFF';
-        view.width = 'auto'; // WRAP_CONTENT
-        view.height = 'auto'; // WRAP_CONTENT
-        view.borderRadius = 12;
-        view['shadowColor'] = '#000';
-        view['shadowOpacity'] = 0.25;
-        view['shadowRadius'] = 8;
-        if (this.title) {
-            const titleLabel = new Label();
-            titleLabel.id = 'title';
-            titleLabel.text = this.title;
-            titleLabel.className = 'info-window-title';
-            titleLabel.fontSize = 16;
-            titleLabel.fontWeight = 'bold';
-            view.addChild(titleLabel);
-        }
-        if (this.snippet) {
-            const snippetLabel = new Label();
-            snippetLabel.id = 'snippet';
-            snippetLabel.text = this.snippet;
-            snippetLabel.className = 'info-window-snippet';
-            snippetLabel.fontSize = 14;
-            snippetLabel.color = new Color('#555');
-            view.addChild(snippetLabel);
-        }
-        view._setupAsRootView(Utils.android.getApplicationContext());
-        view.parent = Application.getRootView();
-        view._isAddedToNativeVisualTree = true;
-        view.callLoaded();
-        const nativeView = view.nativeViewProtected;
-        view.on('tap', onInfoWindowClick);
-        const frameLayout = new android.widget.FrameLayout(view._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 anchor = new com.mapbox.maps.ViewAnnotationAnchorConfig.Builder()
-            .anchor(ViewAnnotationAnchor.BOTTOM)
-            .offsetY((this.pointAnnotation.getIconImageBitmap()?.getHeight() ?? 0) + AndroidMarker.MARKER_PADDING_PX)
-            .build();
-        this.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(this.pointAnnotation.getGeometry()))
-            .variableAnchors(java.util.Arrays.asList([anchor]))
-            .build();
-        // --- Step 4: Add the view to Mapbox’s ViewAnnotationManager
-        com.nativescript.mapbox.ViewAnnotationManager.addViewAnnotation(mapView, frameLayout, viewAnnotationOptions);
-        // --- Step 5: Store references
-        this.viewAnnotation = frameLayout;
-        this.view = view;
-        this.prepared = true;
-    }
     destroy() {
-        if (this.view) {
-            this.view._tearDownUI();
-            this.view = null;
-        }
+        this.view = null;
         this.viewAnnotation = null;
         this.icon = null;
     }
 }
-AndroidMarker.MARKER_PADDING_PX = 10;
 //# sourceMappingURL=Marker.android.js.map

package/markers/Marker.common.d.ts

@@ -0,0 +1,2 @@
+import { StackLayout } from '@nativescript/core';
+export declare function createInfoWindowView(title: any, snippet: any): StackLayout;

package/markers/Marker.common.js

@@ -0,0 +1,31 @@
+import { Color, Label, StackLayout } from '@nativescript/core';
+const MARKER_PADDING_PX = 10;
+export function createInfoWindowView(title, snippet) {
+    const view = new StackLayout();
+    view.className = 'mapbox-info-window';
+    view.padding = MARKER_PADDING_PX;
+    view.backgroundColor = 'white';
+    view.width = 'auto'; // WRAP_CONTENT
+    view.height = 'auto'; // WRAP_CONTENT
+    view.borderRadius = 12;
+    view['shadowColor'] = '#000';
+    view['shadowOpacity'] = 0.25;
+    view['shadowRadius'] = 8;
+    const titleLabel = new Label();
+    titleLabel.id = 'title';
+    titleLabel.text = title;
+    titleLabel.className = 'mapbox-info-window-title';
+    titleLabel.fontSize = 16;
+    titleLabel.fontWeight = 'bold';
+    view.addChild(titleLabel);
+    const subtitle = new Label();
+    subtitle.id = 'subtitle';
+    subtitle.text = snippet;
+    subtitle.className = 'mapbox-info-window-snippet';
+    subtitle.fontSize = 14;
+    // subtitle.visibility = snippet ? 'visible' : 'collapse';
+    subtitle.color = new Color('#555');
+    view.addChild(subtitle);
+    return view;
+}
+//# sourceMappingURL=Marker.common.js.map

package/markers/MarkerManager.android.d.ts

@@ -3,6 +3,7 @@ import { AndroidMarker } from './Marker.android';
  * MarkerManager (Native Android Mapbox SDK version)
  */
 export declare class MarkerManager {
+    private static readonly MARKER_PADDING_PX;
     private mapView;
     private map;
     private pointAnnotationManager;
@@ -11,6 +12,7 @@ export declare class MarkerManager {
     private static readonly ADDITIONAL_EDGE_PADDING_PX;
     private selectedMarker;
     private onInfoWindowTapped;
+    private _reusableCalloutView;
     private onMapClickListener;
     private onPointClickListener;
     onViewAnnotationUpdatedListener: com.mapbox.maps.viewannotation.OnViewAnnotationUpdatedListener;
@@ -19,6 +21,11 @@ export declare class MarkerManager {
     adjustViewAnnotationXOffset(marker: AndroidMarker): void;
     updateMarker(marker: AndroidMarker): void;
     addMarker(marker: AndroidMarker): AndroidMarker;
+    /**
+     * Build a NativeScript view to use as info window.
+     * Then attach it to Mapbox via ViewAnnotationManager.
+     */
+    prepareViewAnnotation(marker: AndroidMarker, onInfoWindowClick: any): void;
     removeMarker(marker: AndroidMarker): void;
     selectMarker(marker: AndroidMarker, deselectIfSelected?: boolean, update?: boolean): void;
     deselectMarker(marker: AndroidMarker): void;