@lugg/maps 0.2.0-alpha.4 → 0.2.0-alpha.6

package/android/src/main/java/com/luggmaps/LuggGoogleMapView.kt

@@ -1,7 +1,6 @@
 package com.luggmaps
 
 import android.annotation.SuppressLint
-import android.util.Log
 import android.view.View
 import android.view.ViewGroup
 import com.facebook.react.uimanager.PixelUtil.dpToPx
@@ -103,7 +102,6 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   override fun removeViewAt(index: Int) {
     val view = getChildAt(index)
     if (view is LuggMarkerView) {
-      Log.d(TAG, "removing markerView: ${view.name}")
       view.marker?.remove()
       view.marker = null
     } else if (view is LuggPolylineView) {
@@ -123,7 +121,6 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   }
 
   fun onDropViewInstance() {
-    Log.d(TAG, "dropping mapView instance")
     pendingMarkerViews.clear()
     pendingPolylineViews.clear()
     polylineAnimators.values.forEach { it.destroy() }
@@ -282,6 +279,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       title = markerView.title
       snippet = markerView.description
       setAnchor(markerView.anchorX, markerView.anchorY)
+      zIndex = markerView.zIndex
       if (!markerView.hasCustomView) {
         iconView = null
       }
@@ -291,7 +289,6 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   private fun processPendingMarkers() {
     if (googleMap == null) return
 
-    Log.d(TAG, "processing pending markers ${pendingMarkerViews.size}")
     pendingMarkerViews.forEach { addMarkerViewToMap(it) }
     pendingMarkerViews.clear()
   }
@@ -312,13 +309,13 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       .title(markerView.title)
       .snippet(markerView.description)
 
-    Log.d(TAG, "adding marker: ${markerView.name} customview: ${markerView.hasCustomView}")
     if (markerView.hasCustomView) {
       options.iconView(iconView)
     }
 
     val marker = map.addMarker(options) as AdvancedMarker
     marker.setAnchor(markerView.anchorX, markerView.anchorY)
+    marker.zIndex = markerView.zIndex
 
     markerView.marker = marker
   }

package/android/src/main/java/com/luggmaps/LuggMarkerView.kt

@@ -1,7 +1,6 @@
 package com.luggmaps
 
 import android.content.Context
-import android.util.Log
 import android.view.View
 import androidx.core.view.isNotEmpty
 import com.facebook.react.views.view.ReactViewGroup
@@ -34,6 +33,9 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   var anchorY: Float = 1.0f
     private set
 
+  var zIndex: Float = 0f
+    private set
+
   var didLayout: Boolean = false
     private set
 
@@ -114,6 +116,10 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     anchorY = y.toFloat()
   }
 
+  fun setZIndex(zIndex: Float) {
+    this.zIndex = zIndex
+  }
+
   fun setName(name: String?) {
     this.name = name
   }

package/android/src/main/java/com/luggmaps/LuggMarkerViewManager.kt

@@ -63,6 +63,12 @@ class LuggMarkerViewManager :
     }
   }
 
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggMarkerView, zIndex: Float) {
+    super.setZIndex(view, zIndex)
+    view.setZIndex(zIndex)
+  }
+
   companion object {
     const val NAME = "LuggMarkerView"
   }

package/android/src/main/java/com/luggmaps/core/PolylineAnimator.kt

@@ -14,6 +14,12 @@ import kotlin.math.min
 class PolylineAnimator {
   var polyline: Polyline? = null
   var coordinates: List<LatLng> = emptyList()
+    set(value) {
+      field = value
+      if (animated && animator != null) {
+        computeCumulativeDistances()
+      }
+    }
   var strokeColors: List<Int> = listOf(Color.BLACK)
   var strokeWidth: Float = 1f
 

package/ios/LuggAppleMapView.mm

@@ -316,6 +316,9 @@ using namespace luggmaps::events;
   // Build new polyline from coordinates
   NSArray<CLLocation *> *coordinates = polylineView.coordinates;
   if (coordinates.count == 0) {
+    if (renderer) {
+      renderer.animated = NO;
+    }
     if (oldPolyline) {
       [_mapView removeOverlay:oldPolyline];
       polylineView.polyline = nil;
@@ -337,6 +340,8 @@ using namespace luggmaps::events;
 
   // If we have an existing renderer, update it in place
   if (renderer && oldPolyline) {
+    [_mapView removeOverlay:oldPolyline];
+    [_mapView addOverlay:newPolyline];
     [renderer updatePolyline:newPolyline];
     renderer.lineWidth = polylineView.strokeWidth;
     renderer.strokeColor = polylineView.strokeColors.firstObject;
@@ -388,6 +393,12 @@ using namespace luggmaps::events;
   annotation.title = markerView.title;
   annotation.subtitle = markerView.markerDescription;
 
+  MKAnnotationView *annotationView = annotation.annotationView;
+  if (annotationView) {
+    annotationView.layer.zPosition = markerView.zIndex;
+    annotationView.zPriority = markerView.zIndex;
+  }
+
   [self updateAnnotationViewFrame:annotation];
 }
 
@@ -442,6 +453,8 @@ using namespace luggmaps::events;
                                    reuseIdentifier:nil];
   annotationView.canShowCallout = YES;
   annotationView.displayPriority = MKFeatureDisplayPriorityRequired;
+  annotationView.layer.zPosition = markerView.zIndex;
+  annotationView.zPriority = markerView.zIndex;
 
   UIView *iconView = markerView.iconView;
   [iconView removeFromSuperview];

package/ios/LuggGoogleMapView.mm

@@ -242,14 +242,15 @@ static NSString *const kDemoMapId = @"DEMO_MAP_ID";
   marker.position = markerView.coordinate;
   marker.title = markerView.title;
   marker.snippet = markerView.markerDescription;
-  marker.groundAnchor = markerView.anchor;
-
+  marker.zIndex = (int)markerView.zIndex;
   if (markerView.hasCustomView) {
     UIView *iconView = markerView.iconView;
     [iconView removeFromSuperview];
     marker.iconView = iconView;
+    marker.groundAnchor = markerView.anchor;
   } else {
     marker.iconView = nil;
+    marker.groundAnchor = CGPointMake(0.5, 1);
   }
 }
 
@@ -280,9 +281,10 @@ static NSString *const kDemoMapId = @"DEMO_MAP_ID";
 
   if (markerView.hasCustomView) {
     marker.iconView = iconView;
+    marker.groundAnchor = markerView.anchor;
   }
 
-  marker.groundAnchor = markerView.anchor;
+  marker.zIndex = (int)markerView.zIndex;
   marker.map = _mapView;
 
   markerView.marker = marker;

package/ios/LuggMarkerView.h

@@ -14,10 +14,12 @@ NS_ASSUME_NONNULL_BEGIN
 
 @interface LuggMarkerView : RCTViewComponentView
 
+@property(nonatomic, readonly, nullable) NSString *name;
 @property(nonatomic, readonly) CLLocationCoordinate2D coordinate;
 @property(nonatomic, readonly, nullable) NSString *title;
 @property(nonatomic, readonly, nullable) NSString *markerDescription;
 @property(nonatomic, readonly) CGPoint anchor;
+@property(nonatomic, readonly) NSInteger zIndex;
 @property(nonatomic, readonly) BOOL hasCustomView;
 @property(nonatomic, readonly) BOOL didLayout;
 @property(nonatomic, readonly) UIView *iconView;

package/ios/LuggMarkerView.mm

@@ -13,10 +13,12 @@ using namespace facebook::react;
 @end
 
 @implementation LuggMarkerView {
+  NSString *_name;
   CLLocationCoordinate2D _coordinate;
   NSString *_title;
   NSString *_markerDescription;
   CGPoint _anchor;
+  NSInteger _zIndex;
   BOOL _didLayout;
   UIView *_iconView;
 }
@@ -34,6 +36,7 @@ using namespace facebook::react;
 
     _coordinate = CLLocationCoordinate2DMake(0, 0);
     _anchor = CGPointMake(0.5, 1.0);
+    _zIndex = 0;
     _didLayout = NO;
 
     _iconView = [[UIView alloc] init];
@@ -52,12 +55,14 @@ using namespace facebook::react;
   const auto &newViewProps =
       *std::static_pointer_cast<LuggMarkerViewProps const>(props);
 
+  _name = [NSString stringWithUTF8String:newViewProps.name.c_str()];
   _coordinate = CLLocationCoordinate2DMake(newViewProps.coordinate.latitude,
                                            newViewProps.coordinate.longitude);
   _title = [NSString stringWithUTF8String:newViewProps.title.c_str()];
   _markerDescription =
       [NSString stringWithUTF8String:newViewProps.description.c_str()];
   _anchor = CGPointMake(newViewProps.anchor.x, newViewProps.anchor.y);
+  _zIndex = newViewProps.zIndex.value_or(0);
 }
 
 - (void)finalizeUpdates:(RNComponentViewUpdateMask)updateMask {
@@ -109,6 +114,10 @@ using namespace facebook::react;
   }
 }
 
+- (NSString *)name {
+  return _name;
+}
+
 - (CLLocationCoordinate2D)coordinate {
   return _coordinate;
 }
@@ -125,6 +134,10 @@ using namespace facebook::react;
   return _anchor;
 }
 
+- (NSInteger)zIndex {
+  return _zIndex;
+}
+
 - (BOOL)hasCustomView {
   return _iconView.subviews.count > 0;
 }

package/ios/core/GMSPolylineAnimator.m

@@ -12,6 +12,13 @@
   [self stopAnimation];
 }
 
+- (void)setCoordinates:(NSArray<CLLocation *> *)coordinates {
+  [super setCoordinates:coordinates];
+  if (_animated && _displayLink) {
+    [self computeCumulativeDistances];
+  }
+}
+
 - (void)setAnimated:(BOOL)animated {
   if (_animated == animated) {
     return;

package/ios/core/MKPolylineAnimator.m

@@ -93,6 +93,9 @@
   _polyline = polyline;
   [self invalidatePath];
   [self createPath];
+  if (_animated) {
+    [self computeCumulativeDistances];
+  }
   [self setNeedsDisplay];
 }
 

package/lib/module/components/Marker.js

@@ -12,10 +12,13 @@ export class Marker extends React.Component {
       title,
       description,
       anchor,
+      zIndex,
       children
     } = this.props;
     return /*#__PURE__*/_jsx(LuggMarkerViewNativeComponent, {
-      style: styles.marker,
+      style: [{
+        zIndex
+      }, styles.marker],
       name: name,
       coordinate: coordinate,
       title: title,

package/lib/module/components/Marker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","StyleSheet","LuggMarkerViewNativeComponent","jsx","_jsx","Marker","Component","render","name","coordinate","title","description","anchor","children","props","style","styles","marker","create","position","pointerEvents"],"sourceRoot":"../../../src","sources":["components/Marker.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,6BAA6B,MAAM,yCAAyC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AA8BpF,OAAO,MAAMC,MAAM,SAASL,KAAK,CAACM,SAAS,CAAc;EACvDC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,IAAI;MAAEC,UAAU;MAAEC,KAAK;MAAEC,WAAW;MAAEC,MAAM;MAAEC;IAAS,CAAC,GAC9D,IAAI,CAACC,KAAK;IAEZ,oBACEV,IAAA,CAACF,6BAA6B;MAC5Ba,KAAK,EAAEC,MAAM,CAACC,MAAO;MACrBT,IAAI,EAAEA,IAAK;MACXC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MACbC,WAAW,EAAEA,WAAY;MACzBC,MAAM,EAAEA,MAAO;MAAAC,QAAA,EAEdA;IAAQ,CACoB,CAAC;EAEpC;AACF;AAEA,MAAMG,MAAM,GAAGf,UAAU,CAACiB,MAAM,CAAC;EAC/BD,MAAM,EAAE;IACNE,QAAQ,EAAE,UAAU;IACpBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}
+{"version":3,"names":["React","StyleSheet","LuggMarkerViewNativeComponent","jsx","_jsx","Marker","Component","render","name","coordinate","title","description","anchor","zIndex","children","props","style","styles","marker","create","position","pointerEvents"],"sourceRoot":"../../../src","sources":["components/Marker.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,cAAc;AACzC,OAAOC,6BAA6B,MAAM,yCAAyC;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAkCpF,OAAO,MAAMC,MAAM,SAASL,KAAK,CAACM,SAAS,CAAc;EACvDC,MAAMA,CAAA,EAAG;IACP,MAAM;MAAEC,IAAI;MAAEC,UAAU;MAAEC,KAAK;MAAEC,WAAW;MAAEC,MAAM;MAAEC,MAAM;MAAEC;IAAS,CAAC,GACtE,IAAI,CAACC,KAAK;IAEZ,oBACEX,IAAA,CAACF,6BAA6B;MAC5Bc,KAAK,EAAE,CAAC;QAAEH;MAAO,CAAC,EAAEI,MAAM,CAACC,MAAM,CAAE;MACnCV,IAAI,EAAEA,IAAK;MACXC,UAAU,EAAEA,UAAW;MACvBC,KAAK,EAAEA,KAAM;MACbC,WAAW,EAAEA,WAAY;MACzBC,MAAM,EAAEA,MAAO;MAAAE,QAAA,EAEdA;IAAQ,CACoB,CAAC;EAEpC;AACF;AAEA,MAAMG,MAAM,GAAGhB,UAAU,CAACkB,MAAM,CAAC;EAC/BD,MAAM,EAAE;IACNE,QAAQ,EAAE,UAAU;IACpBC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC","ignoreList":[]}

package/lib/typescript/src/components/Marker.d.ts

@@ -22,6 +22,10 @@ export interface MarkerProps {
      * Anchor point for custom marker views
      */
     anchor?: Point;
+    /**
+     * Z-index for marker ordering. Higher values render on top.
+     */
+    zIndex?: number;
     /**
      * Custom marker view
      */

package/lib/typescript/src/components/Marker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CAiBP"}
+{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,KAAK,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAElD,MAAM,WAAW,WAAW;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IACvB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;IACf;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,qBAAa,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IACtD,MAAM;CAiBP"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lugg/maps",
-  "version": "0.2.0-alpha.4",
+  "version": "0.2.0-alpha.6",
   "description": "Universal maps for React Native.",
   "main": "./lib/module/index.js",
   "types": "./lib/typescript/src/index.d.ts",

package/src/components/Marker.tsx

@@ -25,6 +25,10 @@ export interface MarkerProps {
    * Anchor point for custom marker views
    */
   anchor?: Point;
+  /**
+   * Z-index for marker ordering. Higher values render on top.
+   */
+  zIndex?: number;
   /**
    * Custom marker view
    */
@@ -33,12 +37,12 @@ export interface MarkerProps {
 
 export class Marker extends React.Component<MarkerProps> {
   render() {
-    const { name, coordinate, title, description, anchor, children } =
+    const { name, coordinate, title, description, anchor, zIndex, children } =
       this.props;
 
     return (
       <LuggMarkerViewNativeComponent
-        style={styles.marker}
+        style={[{ zIndex }, styles.marker]}
         name={name}
         coordinate={coordinate}
         title={title}