@lugg/maps 0.2.0-alpha.2 → 0.2.0-alpha.20

package/README.md

@@ -1,9 +1,6 @@
 # @lugg/maps
 
-React Native Fabric maps library for iOS and Android.
-
-- Google Maps (iOS & Android)
-- Apple Maps (iOS only)
+Universal maps for your React Native apps 📍
 
 ## Installation
 
@@ -56,6 +53,22 @@ Add your Google Maps API key to `AndroidManifest.xml`:
 </application>
 ```
 
+### Web
+
+Wrap your app with `MapProvider` and pass your Google Maps API key:
+
+```tsx
+import { MapProvider } from '@lugg/maps';
+
+function App() {
+  return (
+    <MapProvider apiKey="YOUR_WEB_API_KEY">
+      {/* Your app */}
+    </MapProvider>
+  );
+}
+```
+
 ## Usage
 
 ```tsx

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
@@ -55,8 +54,8 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   private var isMapReady = false
   private var isDragging = false
   private var mapId: String = DEMO_MAP_ID
-  private val pendingMarkerViews = mutableListOf<LuggMarkerView>()
-  private val pendingPolylineViews = mutableListOf<LuggPolylineView>()
+  private val pendingMarkerViews = mutableSetOf<LuggMarkerView>()
+  private val pendingPolylineViews = mutableSetOf<LuggPolylineView>()
   private val polylineAnimators = mutableMapOf<LuggPolylineView, PolylineAnimator>()
 
   // Initial camera settings
@@ -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() }
@@ -149,10 +146,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       view.onCreate(null)
       view.onResume()
       view.getMapAsync(this)
-      mapWrapperView?.addView(
-        view,
-        LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
-      )
+      mapWrapperView?.addView(view)
     }
   }
 
@@ -179,6 +173,9 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
 
   override fun onCameraMoveStarted(reason: Int) {
     isDragging = reason == GoogleMap.OnCameraMoveStartedListener.REASON_GESTURE
+    if (isDragging) {
+      polylineAnimators.values.forEach { it.pause() }
+    }
   }
 
   override fun onCameraMove() {
@@ -191,6 +188,9 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     val map = googleMap ?: return
     val position = map.cameraPosition
     eventDelegate?.onCameraIdle(this, position.target.latitude, position.target.longitude, position.zoom, isDragging)
+    if (isDragging) {
+      polylineAnimators.values.forEach { it.resume() }
+    }
     isDragging = false
   }
 
@@ -239,16 +239,12 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
 
   override fun markerViewDidLayout(markerView: LuggMarkerView) {
     if (googleMap == null) {
-      if (!pendingMarkerViews.contains(markerView)) {
-        pendingMarkerViews.add(markerView)
-      }
+      pendingMarkerViews.add(markerView)
       return
     }
 
     if (markerView.hasCustomView) {
-      // Recreate marker with custom view
-      markerView.marker?.remove()
-      addMarkerViewToMap(markerView)
+      markerView.updateIcon { addMarkerViewToMap(markerView) }
     } else {
       syncMarkerView(markerView)
     }
@@ -264,9 +260,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
 
   private fun syncMarkerView(markerView: LuggMarkerView) {
     if (googleMap == null) {
-      if (!pendingMarkerViews.contains(markerView)) {
-        pendingMarkerViews.add(markerView)
-      }
+      pendingMarkerViews.add(markerView)
       return
     }
 
@@ -282,46 +276,43 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       title = markerView.title
       snippet = markerView.description
       setAnchor(markerView.anchorX, markerView.anchorY)
-      if (!markerView.hasCustomView) {
-        iconView = null
-      }
+      zIndex = markerView.zIndex
+      rotation = markerView.rotate
+    }
+
+    if (markerView.hasCustomView && markerView.scaleChanged) {
+      markerView.applyScaleToMarker()
+      markerView.clearScaleChanged()
     }
   }
 
   private fun processPendingMarkers() {
     if (googleMap == null) return
 
-    Log.d(TAG, "processing pending markers ${pendingMarkerViews.size}")
     pendingMarkerViews.forEach { addMarkerViewToMap(it) }
     pendingMarkerViews.clear()
   }
 
   private fun addMarkerViewToMap(markerView: LuggMarkerView) {
     val map = googleMap ?: run {
-      RNLog.w(reactContext, "Lugg: addMarkerViewToMap called without a map")
+      RNLog.w(reactContext, "LuggMaps: addMarkerViewToMap called without a map")
       return
     }
 
     val position = LatLng(markerView.latitude, markerView.longitude)
-    val iconView = markerView.iconView
-
-    (iconView.parent as? ViewGroup)?.removeView(iconView)
 
     val options = AdvancedMarkerOptions()
       .position(position)
       .title(markerView.title)
       .snippet(markerView.description)
-      .collisionBehavior(CollisionBehavior.REQUIRED)
-
-    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
+    marker.rotation = markerView.rotate
 
     markerView.marker = marker
+    markerView.applyIconToMarker()
   }
 
   // endregion
@@ -330,9 +321,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
 
   private fun syncPolylineView(polylineView: LuggPolylineView) {
     if (googleMap == null) {
-      if (!pendingPolylineViews.contains(polylineView)) {
-        pendingPolylineViews.add(polylineView)
-      }
+      pendingPolylineViews.add(polylineView)
       return
     }
 
@@ -342,11 +331,13 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     }
 
     polylineView.polyline?.width = polylineView.strokeWidth.dpToPx()
+    polylineView.polyline?.zIndex = polylineView.zIndex
 
     polylineAnimators[polylineView]?.apply {
       coordinates = polylineView.coordinates
       strokeColors = polylineView.strokeColors
       strokeWidth = polylineView.strokeWidth.dpToPx()
+      animatedOptions = polylineView.animatedOptions
       animated = polylineView.animated
       update()
     }
@@ -364,6 +355,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
 
     val options = PolylineOptions()
       .width(polylineView.strokeWidth.dpToPx())
+      .zIndex(polylineView.zIndex)
 
     val polyline = map.addPolyline(options)
     polylineView.polyline = polyline
@@ -373,6 +365,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
       coordinates = polylineView.coordinates
       strokeColors = polylineView.strokeColors
       strokeWidth = polylineView.strokeWidth.dpToPx()
+      animatedOptions = polylineView.animatedOptions
       animated = polylineView.animated
       update()
     }
@@ -388,7 +381,7 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
     if (value.isNullOrEmpty()) return
 
     if (mapView != null) {
-      RNLog.w(reactContext, "Lugg: mapId cannot be changed after map is initialized")
+      RNLog.w(reactContext, "LuggMaps: mapId cannot be changed after map is initialized")
       return
     }
 
@@ -458,7 +451,8 @@ class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   fun moveCamera(latitude: Double, longitude: Double, zoom: Double, duration: Int) {
     val map = googleMap ?: return
     val position = LatLng(latitude, longitude)
-    val cameraUpdate = CameraUpdateFactory.newLatLngZoom(position, zoom.toFloat())
+    val targetZoom = if (zoom > 0) zoom.toFloat() else map.cameraPosition.zoom
+    val cameraUpdate = CameraUpdateFactory.newLatLngZoom(position, targetZoom)
     when {
       duration < 0 -> map.animateCamera(cameraUpdate)
       duration > 0 -> map.animateCamera(cameraUpdate, duration, null)

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

@@ -1,6 +1,7 @@
 package com.luggmaps
 
 import android.annotation.SuppressLint
+import android.util.Log
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 
@@ -26,14 +27,14 @@ class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context)
     bottom: Int
   ) {
     super.onLayout(changed, left, top, right, bottom)
-    val width = right - left
-    val height = bottom - top
+    val w = right - left
+    val h = bottom - top
     getChildAt(0)?.let {
       it.measure(
-        MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
-        MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY)
+        MeasureSpec.makeMeasureSpec(w, MeasureSpec.EXACTLY),
+        MeasureSpec.makeMeasureSpec(h, MeasureSpec.EXACTLY)
       )
-      it.layout(0, 0, width, height)
+      it.layout(0, 0, w, h)
     }
   }
 }

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

@@ -1,11 +1,16 @@
 package com.luggmaps
 
 import android.content.Context
-import android.util.Log
+import android.graphics.Bitmap
+import android.graphics.Canvas
 import android.view.View
+import android.view.ViewGroup
+import androidx.core.graphics.createBitmap
 import androidx.core.view.isNotEmpty
 import com.facebook.react.views.view.ReactViewGroup
 import com.google.android.gms.maps.model.AdvancedMarker
+import com.google.android.gms.maps.model.BitmapDescriptor
+import com.google.android.gms.maps.model.BitmapDescriptorFactory
 
 interface LuggMarkerViewDelegate {
   fun markerViewDidUpdate(markerView: LuggMarkerView)
@@ -13,6 +18,8 @@ interface LuggMarkerViewDelegate {
 }
 
 class LuggMarkerView(context: Context) : ReactViewGroup(context) {
+  private var scaleUpdateRunnable: Runnable? = null
+
   var name: String? = null
     private set
 
@@ -34,23 +41,118 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   var anchorY: Float = 1.0f
     private set
 
+  var zIndex: Float = 0f
+    private set
+
+  var rotate: Float = 0f
+    private set
+
+  var scale: Float = 1f
+    private set
+
+  var scaleChanged: Boolean = false
+    private set
+
+  var rasterize: Boolean = true
+    private set
+
   var didLayout: Boolean = false
     private set
 
   val hasCustomView: Boolean
     get() = iconView.isNotEmpty()
 
-  val iconView: ReactViewGroup = object : ReactViewGroup(context) {
-    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
-      var maxWidth = 0
-      var maxHeight = 0
-      for (i in 0 until childCount) {
-        val child = getChildAt(i)
-        if (child.width > maxWidth) maxWidth = child.width
-        if (child.height > maxHeight) maxHeight = child.height
+  val iconView: ReactViewGroup = ReactViewGroup(context)
+
+  private fun measureIconViewBounds(): Pair<Int, Int> {
+    var maxWidth = 0
+    var maxHeight = 0
+    for (i in 0 until iconView.childCount) {
+      val child = iconView.getChildAt(i)
+      val childRight = child.left + child.width
+      val childBottom = child.top + child.height
+      if (childRight > maxWidth) maxWidth = childRight
+      if (childBottom > maxHeight) maxHeight = childBottom
+    }
+    return Pair(maxWidth, maxHeight)
+  }
+
+  private fun createIconBitmap(): BitmapDescriptor? {
+    val (width, height) = measureIconViewBounds()
+    if (width <= 0 || height <= 0) return null
+
+    val scaledWidth = (width * scale).toInt()
+    val scaledHeight = (height * scale).toInt()
+
+    val bitmap = createBitmap(scaledWidth, scaledHeight)
+    val canvas = Canvas(bitmap)
+    canvas.scale(scale, scale)
+    iconView.draw(canvas)
+    return BitmapDescriptorFactory.fromBitmap(bitmap)
+  }
+
+  private fun createIconViewWrapper(): View {
+    val (width, height) = measureIconViewBounds()
+    val scaledWidth = (width * scale).toInt()
+    val scaledHeight = (height * scale).toInt()
+
+    (iconView.parent as? ViewGroup)?.removeView(iconView)
+    iconView.scaleX = scale
+    iconView.scaleY = scale
+    iconView.pivotX = 0f
+    iconView.pivotY = 0f
+
+    return object : ReactViewGroup(context) {
+      init {
+        addView(iconView)
+      }
+
+      override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        setMeasuredDimension(scaledWidth, scaledHeight)
+      }
+    }
+  }
+
+  fun applyIconToMarker() {
+    val m = marker ?: return
+    if (!hasCustomView) return
+
+    if (rasterize) {
+      createIconBitmap()?.let { m.setIcon(it) }
+    } else {
+      m.iconView = createIconViewWrapper()
+    }
+  }
+
+  fun applyScaleToMarker() {
+    val m = marker ?: return
+    if (!hasCustomView) return
+
+    scaleUpdateRunnable?.let { removeCallbacks(it) }
+    scaleUpdateRunnable = Runnable {
+      if (rasterize) {
+        createIconBitmap()?.let { m.setIcon(it) }
+      } else {
+        m.iconView = createIconViewWrapper()
       }
+    }
+    post(scaleUpdateRunnable)
+  }
 
-      setMeasuredDimension(maxWidth, maxHeight)
+  fun updateIcon(onAddMarker: () -> Unit) {
+    if (!hasCustomView) return
+    if (rasterize) {
+      post {
+        if (marker == null) {
+          onAddMarker()
+        } else {
+          applyIconToMarker()
+        }
+      }
+    } else {
+      marker?.remove()
+      marker = null
+      post { onAddMarker() }
     }
   }
 
@@ -90,6 +192,7 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     bottom: Int
   ) {
     super.onLayout(changed, left, top, right, bottom)
+
     if (changed && !didLayout) {
       didLayout = true
       delegate?.markerViewDidLayout(this)
@@ -114,6 +217,27 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
     anchorY = y.toFloat()
   }
 
+  fun setZIndex(zIndex: Float) {
+    this.zIndex = zIndex
+  }
+
+  fun setRotate(rotate: Float) {
+    this.rotate = rotate
+  }
+
+  fun setScale(scale: Float) {
+    scaleChanged = this.scale != scale
+    this.scale = scale
+  }
+
+  fun clearScaleChanged() {
+    scaleChanged = false
+  }
+
+  fun setRasterize(rasterize: Boolean) {
+    this.rasterize = rasterize
+  }
+
   fun setName(name: String?) {
     this.name = name
   }
@@ -123,12 +247,10 @@ class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   }
 
   fun onDropViewInstance() {
+    scaleUpdateRunnable?.let { removeCallbacks(it) }
+    scaleUpdateRunnable = null
     didLayout = false
     delegate = null
     iconView.removeAllViews()
   }
-
-  companion object {
-    private const val TAG = "Lugg"
-  }
 }

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

@@ -63,6 +63,27 @@ class LuggMarkerViewManager :
     }
   }
 
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggMarkerView, zIndex: Float) {
+    super.setZIndex(view, zIndex)
+    view.setZIndex(zIndex)
+  }
+
+  @ReactProp(name = "rotate", defaultDouble = 0.0)
+  override fun setRotate(view: LuggMarkerView, value: Double) {
+    view.setRotate(value.toFloat())
+  }
+
+  @ReactProp(name = "scale", defaultDouble = 1.0)
+  override fun setScale(view: LuggMarkerView, value: Double) {
+    view.setScale(value.toFloat())
+  }
+
+  @ReactProp(name = "rasterize", defaultBoolean = true)
+  override fun setRasterize(view: LuggMarkerView, value: Boolean) {
+    view.setRasterize(value)
+  }
+
   companion object {
     const val NAME = "LuggMarkerView"
   }

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

@@ -12,6 +12,8 @@ interface LuggPolylineViewDelegate {
   fun polylineViewDidUpdate(polylineView: LuggPolylineView)
 }
 
+data class AnimatedOptions(val duration: Long = 2150L, val easing: String = "linear", val trailLength: Float = 1f, val delay: Long = 0L)
+
 class LuggPolylineView(context: Context) : ReactViewGroup(context) {
   var coordinates: List<LatLng> = emptyList()
     private set
@@ -25,6 +27,12 @@ class LuggPolylineView(context: Context) : ReactViewGroup(context) {
   var animated: Boolean = false
     private set
 
+  var animatedOptions: AnimatedOptions = AnimatedOptions()
+    private set
+
+  var zIndex: Float = 0f
+    private set
+
   var cachedSpans: List<StyleSpan>? = null
     private set
 
@@ -55,6 +63,14 @@ class LuggPolylineView(context: Context) : ReactViewGroup(context) {
     animated = value
   }
 
+  fun setAnimatedOptions(options: AnimatedOptions) {
+    animatedOptions = options
+  }
+
+  fun setZIndex(value: Float) {
+    zIndex = value
+  }
+
   fun getOrCreateSpans(): List<StyleSpan> {
     cachedSpans?.let { return it }
 

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

@@ -1,6 +1,7 @@
 package com.luggmaps
 
 import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
@@ -65,6 +66,27 @@ class LuggPolylineViewManager :
     view.setAnimated(value)
   }
 
+  @ReactProp(name = "animatedOptions")
+  override fun setAnimatedOptions(view: LuggPolylineView, value: ReadableMap?) {
+    val options = if (value != null) {
+      AnimatedOptions(
+        duration = if (value.hasKey("duration")) value.getDouble("duration").toLong() else 2150L,
+        easing = if (value.hasKey("easing")) value.getString("easing") ?: "linear" else "linear",
+        trailLength = if (value.hasKey("trailLength")) value.getDouble("trailLength").toFloat() else 1f,
+        delay = if (value.hasKey("delay")) value.getDouble("delay").toLong() else 0L
+      )
+    } else {
+      AnimatedOptions()
+    }
+    view.setAnimatedOptions(options)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggPolylineView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
   companion object {
     const val NAME = "LuggPolylineView"
   }