@lugg/maps 0.2.0-alpha.0 → 0.2.0-alpha.10

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/{LuggMapsGoogleMapView.kt → 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
@@ -20,37 +19,44 @@ import com.google.android.gms.maps.model.LatLng
 import com.google.android.gms.maps.model.PolylineOptions
 import com.luggmaps.core.PolylineAnimator
 
-interface LuggMapsGoogleMapViewEventDelegate {
+interface LuggGoogleMapViewEventDelegate {
   fun onCameraMove(
-    view: LuggMapsGoogleMapView,
+    view: LuggGoogleMapView,
     latitude: Double,
     longitude: Double,
     zoom: Float,
-    dragging: Boolean
+    gesture: Boolean
   )
-  fun onCameraIdle(view: LuggMapsGoogleMapView, latitude: Double, longitude: Double, zoom: Float)
+  fun onCameraIdle(
+    view: LuggGoogleMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    gesture: Boolean
+  )
+  fun onReady(view: LuggGoogleMapView)
 }
 
 @SuppressLint("ViewConstructor")
-class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
+class LuggGoogleMapView(private val reactContext: ThemedReactContext) :
   ReactViewGroup(reactContext),
   OnMapReadyCallback,
-  LuggMapsMarkerViewDelegate,
-  LuggMapsPolylineViewDelegate,
+  LuggMarkerViewDelegate,
+  LuggPolylineViewDelegate,
   GoogleMap.OnCameraMoveStartedListener,
   GoogleMap.OnCameraMoveListener,
   GoogleMap.OnCameraIdleListener {
 
-  var eventDelegate: LuggMapsGoogleMapViewEventDelegate? = null
+  var eventDelegate: LuggGoogleMapViewEventDelegate? = null
   private var mapView: MapView? = null
-  private var mapWrapperView: LuggMapsWrapperView? = null
+  private var mapWrapperView: LuggMapWrapperView? = null
   private var googleMap: GoogleMap? = null
   private var isMapReady = false
   private var isDragging = false
   private var mapId: String = DEMO_MAP_ID
-  private val pendingMarkerViews = mutableListOf<LuggMapsMarkerView>()
-  private val pendingPolylineViews = mutableListOf<LuggMapsPolylineView>()
-  private val polylineAnimators = mutableMapOf<LuggMapsPolylineView, PolylineAnimator>()
+  private val pendingMarkerViews = mutableListOf<LuggMarkerView>()
+  private val pendingPolylineViews = mutableListOf<LuggPolylineView>()
+  private val polylineAnimators = mutableMapOf<LuggPolylineView, PolylineAnimator>()
 
   // Initial camera settings
   private var initialLatitude: Double = 37.78
@@ -62,6 +68,11 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
   private var scrollEnabled: Boolean = true
   private var rotateEnabled: Boolean = true
   private var pitchEnabled: Boolean = true
+  private var userLocationEnabled: Boolean = false
+
+  // Zoom limits
+  private var minZoom: Float? = null
+  private var maxZoom: Float? = null
 
   // Padding
   private var paddingTop: Int = 0
@@ -74,14 +85,14 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
   override fun addView(child: View?, index: Int) {
     super.addView(child, index)
     when (child) {
-      is LuggMapsWrapperView -> mapWrapperView = child
+      is LuggMapWrapperView -> mapWrapperView = child
 
-      is LuggMapsMarkerView -> {
+      is LuggMarkerView -> {
         child.delegate = this
         syncMarkerView(child)
       }
 
-      is LuggMapsPolylineView -> {
+      is LuggPolylineView -> {
         child.delegate = this
         syncPolylineView(child)
       }
@@ -90,11 +101,10 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
 
   override fun removeViewAt(index: Int) {
     val view = getChildAt(index)
-    if (view is LuggMapsMarkerView) {
-      Log.d(TAG, "removing markerView: ${view.name}")
+    if (view is LuggMarkerView) {
       view.marker?.remove()
       view.marker = null
-    } else if (view is LuggMapsPolylineView) {
+    } else if (view is LuggPolylineView) {
       polylineAnimators[view]?.destroy()
       polylineAnimators.remove(view)
       view.polyline?.remove()
@@ -111,7 +121,6 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
   }
 
   fun onDropViewInstance() {
-    Log.d(TAG, "dropping mapView instance")
     pendingMarkerViews.clear()
     pendingPolylineViews.clear()
     polylineAnimators.values.forEach { it.destroy() }
@@ -156,9 +165,13 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     map.setOnCameraIdleListener(this)
 
     applyUiSettings()
+    applyZoomLimits()
     applyPadding()
+    applyUserLocation()
     processPendingMarkers()
     processPendingPolylines()
+
+    eventDelegate?.onReady(this)
   }
 
   override fun onCameraMoveStarted(reason: Int) {
@@ -174,8 +187,8 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
   override fun onCameraIdle() {
     val map = googleMap ?: return
     val position = map.cameraPosition
+    eventDelegate?.onCameraIdle(this, position.target.latitude, position.target.longitude, position.zoom, isDragging)
     isDragging = false
-    eventDelegate?.onCameraIdle(this, position.target.latitude, position.target.longitude, position.zoom)
   }
 
   private fun applyUiSettings() {
@@ -187,15 +200,33 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     }
   }
 
+  private fun applyZoomLimits() {
+    googleMap?.apply {
+      minZoom?.let { setMinZoomPreference(it) }
+      maxZoom?.let { setMaxZoomPreference(it) }
+    }
+  }
+
   private fun applyPadding() {
     googleMap?.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom)
   }
 
+  @SuppressLint("MissingPermission")
+  private fun applyUserLocation() {
+    val hasPermission =
+      context.checkSelfPermission(
+        android.Manifest.permission.ACCESS_FINE_LOCATION
+      ) == android.content.pm.PackageManager.PERMISSION_GRANTED ||
+        context.checkSelfPermission(android.Manifest.permission.ACCESS_COARSE_LOCATION) ==
+        android.content.pm.PackageManager.PERMISSION_GRANTED
+    googleMap?.isMyLocationEnabled = userLocationEnabled && hasPermission
+  }
+
   // endregion
 
   // region PolylineViewDelegate
 
-  override fun polylineViewDidUpdate(polylineView: LuggMapsPolylineView) {
+  override fun polylineViewDidUpdate(polylineView: LuggPolylineView) {
     syncPolylineView(polylineView)
   }
 
@@ -203,7 +234,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
 
   // region MarkerViewDelegate
 
-  override fun markerViewDidLayout(markerView: LuggMapsMarkerView) {
+  override fun markerViewDidLayout(markerView: LuggMarkerView) {
     if (googleMap == null) {
       if (!pendingMarkerViews.contains(markerView)) {
         pendingMarkerViews.add(markerView)
@@ -220,7 +251,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     }
   }
 
-  override fun markerViewDidUpdate(markerView: LuggMapsMarkerView) {
+  override fun markerViewDidUpdate(markerView: LuggMarkerView) {
     syncMarkerView(markerView)
   }
 
@@ -228,7 +259,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
 
   // region Marker Management
 
-  private fun syncMarkerView(markerView: LuggMapsMarkerView) {
+  private fun syncMarkerView(markerView: LuggMarkerView) {
     if (googleMap == null) {
       if (!pendingMarkerViews.contains(markerView)) {
         pendingMarkerViews.add(markerView)
@@ -248,6 +279,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
       title = markerView.title
       snippet = markerView.description
       setAnchor(markerView.anchorX, markerView.anchorY)
+      zIndex = markerView.zIndex
       if (!markerView.hasCustomView) {
         iconView = null
       }
@@ -257,14 +289,13 @@ class LuggMapsGoogleMapView(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()
   }
 
-  private fun addMarkerViewToMap(markerView: LuggMapsMarkerView) {
+  private fun addMarkerViewToMap(markerView: LuggMarkerView) {
     val map = googleMap ?: run {
-      RNLog.w(reactContext, "LuggMaps: addMarkerViewToMap called without a map")
+      RNLog.w(reactContext, "Lugg: addMarkerViewToMap called without a map")
       return
     }
 
@@ -277,15 +308,14 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
       .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
 
     markerView.marker = marker
   }
@@ -294,7 +324,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
 
   // region Polyline Management
 
-  private fun syncPolylineView(polylineView: LuggMapsPolylineView) {
+  private fun syncPolylineView(polylineView: LuggPolylineView) {
     if (googleMap == null) {
       if (!pendingPolylineViews.contains(polylineView)) {
         pendingPolylineViews.add(polylineView)
@@ -308,6 +338,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     }
 
     polylineView.polyline?.width = polylineView.strokeWidth.dpToPx()
+    polylineView.polyline?.zIndex = polylineView.zIndex
 
     polylineAnimators[polylineView]?.apply {
       coordinates = polylineView.coordinates
@@ -325,11 +356,12 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     pendingPolylineViews.clear()
   }
 
-  private fun addPolylineViewToMap(polylineView: LuggMapsPolylineView) {
+  private fun addPolylineViewToMap(polylineView: LuggPolylineView) {
     val map = googleMap ?: return
 
     val options = PolylineOptions()
       .width(polylineView.strokeWidth.dpToPx())
+      .zIndex(polylineView.zIndex)
 
     val polyline = map.addPolyline(options)
     polylineView.polyline = polyline
@@ -354,7 +386,7 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     if (value.isNullOrEmpty()) return
 
     if (mapView != null) {
-      RNLog.w(reactContext, "LuggMaps: mapId cannot be changed after map is initialized")
+      RNLog.w(reactContext, "Lugg: mapId cannot be changed after map is initialized")
       return
     }
 
@@ -390,6 +422,25 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     googleMap?.uiSettings?.isTiltGesturesEnabled = enabled
   }
 
+  fun setUserLocationEnabled(enabled: Boolean) {
+    userLocationEnabled = enabled
+    applyUserLocation()
+  }
+
+  fun setMinZoom(zoom: Double) {
+    minZoom = if (zoom > 0) zoom.toFloat() else null
+    googleMap?.let { map ->
+      minZoom?.let { map.setMinZoomPreference(it) } ?: map.resetMinMaxZoomPreference()
+    }
+  }
+
+  fun setMaxZoom(zoom: Double) {
+    maxZoom = if (zoom > 0) zoom.toFloat() else null
+    googleMap?.let { map ->
+      maxZoom?.let { map.setMaxZoomPreference(it) } ?: map.resetMinMaxZoomPreference()
+    }
+  }
+
   fun setMapPadding(top: Int, left: Int, bottom: Int, right: Int) {
     paddingTop = top
     paddingLeft = left
@@ -413,7 +464,14 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     }
   }
 
-  fun fitCoordinates(coordinates: List<LatLng>, padding: Int, duration: Int) {
+  fun fitCoordinates(
+    coordinates: List<LatLng>,
+    paddingTop: Int,
+    paddingLeft: Int,
+    paddingBottom: Int,
+    paddingRight: Int,
+    duration: Int
+  ) {
     val map = googleMap ?: return
     if (coordinates.isEmpty()) return
 
@@ -421,18 +479,35 @@ class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
     coordinates.forEach { boundsBuilder.include(it) }
     val bounds = boundsBuilder.build()
 
-    val cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, padding.toFloat().dpToPx().toInt())
+    val top = paddingTop.toFloat().dpToPx().toInt()
+    val left = paddingLeft.toFloat().dpToPx().toInt()
+    val bottom = paddingBottom.toFloat().dpToPx().toInt()
+    val right = paddingRight.toFloat().dpToPx().toInt()
+
+    // Set padding before camera update, then restore after
+    map.setPadding(
+      this.paddingLeft + left,
+      this.paddingTop + top,
+      this.paddingRight + right,
+      this.paddingBottom + bottom
+    )
+
+    val cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, 0)
+
     when {
       duration < 0 -> map.animateCamera(cameraUpdate)
       duration > 0 -> map.animateCamera(cameraUpdate, duration, null)
       else -> map.moveCamera(cameraUpdate)
     }
+
+    // Restore base padding
+    map.setPadding(this.paddingLeft, this.paddingTop, this.paddingRight, this.paddingBottom)
   }
 
   // endregion
 
   companion object {
-    private const val TAG = "LuggMaps"
+    private const val TAG = "Lugg"
     const val DEMO_MAP_ID = "DEMO_MAP_ID"
   }
 }

package/android/src/main/java/com/luggmaps/{LuggMapsGoogleMapViewManager.kt → LuggGoogleMapViewManager.kt}

@@ -5,29 +5,30 @@ import com.facebook.react.bridge.ReadableMap
 import com.facebook.react.module.annotations.ReactModule
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.facebook.react.uimanager.ThemedReactContext
-import com.facebook.react.uimanager.UIManagerHelper
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.viewmanagers.LuggMapsGoogleMapViewManagerDelegate
-import com.facebook.react.viewmanagers.LuggMapsGoogleMapViewManagerInterface
+import com.facebook.react.viewmanagers.LuggGoogleMapViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggGoogleMapViewManagerInterface
 import com.google.android.gms.maps.model.LatLng
 import com.luggmaps.events.CameraIdleEvent
 import com.luggmaps.events.CameraMoveEvent
+import com.luggmaps.events.ReadyEvent
+import com.luggmaps.extensions.dispatchEvent
 
-@ReactModule(name = LuggMapsGoogleMapViewManager.NAME)
-class LuggMapsGoogleMapViewManager :
-  ViewGroupManager<LuggMapsGoogleMapView>(),
-  LuggMapsGoogleMapViewManagerInterface<LuggMapsGoogleMapView>,
-  LuggMapsGoogleMapViewEventDelegate {
-  private val delegate: ViewManagerDelegate<LuggMapsGoogleMapView> = LuggMapsGoogleMapViewManagerDelegate(this)
+@ReactModule(name = LuggGoogleMapViewManager.NAME)
+class LuggGoogleMapViewManager :
+  ViewGroupManager<LuggGoogleMapView>(),
+  LuggGoogleMapViewManagerInterface<LuggGoogleMapView>,
+  LuggGoogleMapViewEventDelegate {
+  private val delegate: ViewManagerDelegate<LuggGoogleMapView> = LuggGoogleMapViewManagerDelegate(this)
 
-  override fun getDelegate(): ViewManagerDelegate<LuggMapsGoogleMapView> = delegate
+  override fun getDelegate(): ViewManagerDelegate<LuggGoogleMapView> = delegate
 
   override fun getName(): String = NAME
 
-  override fun createViewInstance(context: ThemedReactContext): LuggMapsGoogleMapView {
-    val view = LuggMapsGoogleMapView(context)
+  override fun createViewInstance(context: ThemedReactContext): LuggGoogleMapView {
+    val view = LuggGoogleMapView(context)
     view.eventDelegate = this
     return view
   }
@@ -35,38 +36,41 @@ class LuggMapsGoogleMapViewManager :
   override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
     mapOf(
       "topCameraMove" to mapOf("registrationName" to "onCameraMove"),
-      "topCameraIdle" to mapOf("registrationName" to "onCameraIdle")
+      "topCameraIdle" to mapOf("registrationName" to "onCameraIdle"),
+      "topReady" to mapOf("registrationName" to "onReady")
     )
 
   override fun onCameraMove(
-    view: LuggMapsGoogleMapView,
+    view: LuggGoogleMapView,
     latitude: Double,
     longitude: Double,
     zoom: Float,
-    dragging: Boolean
+    gesture: Boolean
   ) {
-    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(
-      view.context as ThemedReactContext,
-      view.id
-    )
-    eventDispatcher?.dispatchEvent(CameraMoveEvent(UIManagerHelper.getSurfaceId(view), view.id, latitude, longitude, zoom, dragging))
+    view.dispatchEvent(CameraMoveEvent(view, latitude, longitude, zoom, gesture))
   }
 
-  override fun onCameraIdle(view: LuggMapsGoogleMapView, latitude: Double, longitude: Double, zoom: Float) {
-    val eventDispatcher = UIManagerHelper.getEventDispatcherForReactTag(
-      view.context as ThemedReactContext,
-      view.id
-    )
-    eventDispatcher?.dispatchEvent(CameraIdleEvent(UIManagerHelper.getSurfaceId(view), view.id, latitude, longitude, zoom))
+  override fun onCameraIdle(
+    view: LuggGoogleMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    gesture: Boolean
+  ) {
+    view.dispatchEvent(CameraIdleEvent(view, latitude, longitude, zoom, gesture))
+  }
+
+  override fun onReady(view: LuggGoogleMapView) {
+    view.dispatchEvent(ReadyEvent(view))
   }
 
   @ReactProp(name = "mapId")
-  override fun setMapId(view: LuggMapsGoogleMapView, value: String?) {
+  override fun setMapId(view: LuggGoogleMapView, value: String?) {
     view.setMapId(value)
   }
 
   @ReactProp(name = "initialCoordinate")
-  override fun setInitialCoordinate(view: LuggMapsGoogleMapView, value: ReadableMap?) {
+  override fun setInitialCoordinate(view: LuggGoogleMapView, value: ReadableMap?) {
     value?.let {
       val latitude = if (it.hasKey("latitude")) it.getDouble("latitude") else 0.0
       val longitude = if (it.hasKey("longitude")) it.getDouble("longitude") else 0.0
@@ -75,32 +79,47 @@ class LuggMapsGoogleMapViewManager :
   }
 
   @ReactProp(name = "initialZoom", defaultDouble = 10.0)
-  override fun setInitialZoom(view: LuggMapsGoogleMapView, value: Double) {
+  override fun setInitialZoom(view: LuggGoogleMapView, value: Double) {
     view.setInitialZoom(value)
   }
 
   @ReactProp(name = "zoomEnabled", defaultBoolean = true)
-  override fun setZoomEnabled(view: LuggMapsGoogleMapView, value: Boolean) {
+  override fun setZoomEnabled(view: LuggGoogleMapView, value: Boolean) {
     view.setZoomEnabled(value)
   }
 
   @ReactProp(name = "scrollEnabled", defaultBoolean = true)
-  override fun setScrollEnabled(view: LuggMapsGoogleMapView, value: Boolean) {
+  override fun setScrollEnabled(view: LuggGoogleMapView, value: Boolean) {
     view.setScrollEnabled(value)
   }
 
   @ReactProp(name = "rotateEnabled", defaultBoolean = true)
-  override fun setRotateEnabled(view: LuggMapsGoogleMapView, value: Boolean) {
+  override fun setRotateEnabled(view: LuggGoogleMapView, value: Boolean) {
     view.setRotateEnabled(value)
   }
 
   @ReactProp(name = "pitchEnabled", defaultBoolean = true)
-  override fun setPitchEnabled(view: LuggMapsGoogleMapView, value: Boolean) {
+  override fun setPitchEnabled(view: LuggGoogleMapView, value: Boolean) {
     view.setPitchEnabled(value)
   }
 
+  @ReactProp(name = "userLocationEnabled", defaultBoolean = false)
+  override fun setUserLocationEnabled(view: LuggGoogleMapView, value: Boolean) {
+    view.setUserLocationEnabled(value)
+  }
+
+  @ReactProp(name = "minZoom")
+  override fun setMinZoom(view: LuggGoogleMapView, value: Double) {
+    view.setMinZoom(value)
+  }
+
+  @ReactProp(name = "maxZoom")
+  override fun setMaxZoom(view: LuggGoogleMapView, value: Double) {
+    view.setMaxZoom(value)
+  }
+
   @ReactProp(name = "padding")
-  override fun setPadding(view: LuggMapsGoogleMapView, value: ReadableMap?) {
+  override fun setPadding(view: LuggGoogleMapView, value: ReadableMap?) {
     value?.let {
       val top = if (it.hasKey("top")) it.getDouble("top").toFloat().dpToPx().toInt() else 0
       val left = if (it.hasKey("left")) it.getDouble("left").toFloat().dpToPx().toInt() else 0
@@ -110,13 +129,13 @@ class LuggMapsGoogleMapViewManager :
     }
   }
 
-  override fun onDropViewInstance(view: LuggMapsGoogleMapView) {
+  override fun onDropViewInstance(view: LuggGoogleMapView) {
     super.onDropViewInstance(view)
     view.onDropViewInstance()
   }
 
   override fun moveCamera(
-    view: LuggMapsGoogleMapView,
+    view: LuggGoogleMapView,
     latitude: Double,
     longitude: Double,
     zoom: Double,
@@ -125,7 +144,15 @@ class LuggMapsGoogleMapViewManager :
     view.moveCamera(latitude, longitude, zoom, duration.toInt())
   }
 
-  override fun fitCoordinates(view: LuggMapsGoogleMapView, coordinates: ReadableArray?, padding: Double, duration: Double) {
+  override fun fitCoordinates(
+    view: LuggGoogleMapView,
+    coordinates: ReadableArray?,
+    paddingTop: Double,
+    paddingLeft: Double,
+    paddingBottom: Double,
+    paddingRight: Double,
+    duration: Double
+  ) {
     val coords = mutableListOf<LatLng>()
     coordinates?.let {
       for (i in 0 until it.size()) {
@@ -135,10 +162,10 @@ class LuggMapsGoogleMapViewManager :
         coords.add(LatLng(lat, lng))
       }
     }
-    view.fitCoordinates(coords, padding.toInt(), duration.toInt())
+    view.fitCoordinates(coords, paddingTop.toInt(), paddingLeft.toInt(), paddingBottom.toInt(), paddingRight.toInt(), duration.toInt())
   }
 
   companion object {
-    const val NAME = "LuggMapsGoogleMapView"
+    const val NAME = "LuggGoogleMapView"
   }
 }

package/android/src/main/java/com/luggmaps/{LuggMapsWrapperView.kt → LuggMapWrapperView.kt}

@@ -5,7 +5,7 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 
 @SuppressLint("ViewConstructor")
-class LuggMapsWrapperView(context: ThemedReactContext) : ReactViewGroup(context) {
+class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context) {
 
   override fun requestLayout() {
     super.requestLayout()

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

@@ -0,0 +1,25 @@
+package com.luggmaps
+
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewGroupManager
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggMapWrapperViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggMapWrapperViewManagerInterface
+
+@ReactModule(name = LuggMapWrapperViewManager.NAME)
+class LuggMapWrapperViewManager :
+  ViewGroupManager<LuggMapWrapperView>(),
+  LuggMapWrapperViewManagerInterface<LuggMapWrapperView> {
+  private val delegate: ViewManagerDelegate<LuggMapWrapperView> = LuggMapWrapperViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggMapWrapperView> = delegate
+
+  override fun getName(): String = NAME
+
+  override fun createViewInstance(context: ThemedReactContext): LuggMapWrapperView = LuggMapWrapperView(context)
+
+  companion object {
+    const val NAME = "LuggMapWrapperView"
+  }
+}

package/android/src/main/java/com/luggmaps/{LuggMapsMarkerView.kt → LuggMarkerView.kt}

@@ -1,18 +1,17 @@
 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
 import com.google.android.gms.maps.model.AdvancedMarker
 
-interface LuggMapsMarkerViewDelegate {
-  fun markerViewDidUpdate(markerView: LuggMapsMarkerView)
-  fun markerViewDidLayout(markerView: LuggMapsMarkerView)
+interface LuggMarkerViewDelegate {
+  fun markerViewDidUpdate(markerView: LuggMarkerView)
+  fun markerViewDidLayout(markerView: LuggMarkerView)
 }
 
-class LuggMapsMarkerView(context: Context) : ReactViewGroup(context) {
+class LuggMarkerView(context: Context) : ReactViewGroup(context) {
   var name: String? = null
     private set
 
@@ -26,7 +25,7 @@ class LuggMapsMarkerView(context: Context) : ReactViewGroup(context) {
   var description: String? = null
     private set
 
-  var delegate: LuggMapsMarkerViewDelegate? = null
+  var delegate: LuggMarkerViewDelegate? = null
   var marker: AdvancedMarker? = null
 
   var anchorX: Float = 0.5f
@@ -34,6 +33,9 @@ class LuggMapsMarkerView(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 LuggMapsMarkerView(context: Context) : ReactViewGroup(context) {
     anchorY = y.toFloat()
   }
 
+  fun setZIndex(zIndex: Float) {
+    this.zIndex = zIndex
+  }
+
   fun setName(name: String?) {
     this.name = name
   }
@@ -129,6 +135,6 @@ class LuggMapsMarkerView(context: Context) : ReactViewGroup(context) {
   }
 
   companion object {
-    private const val TAG = "LuggMaps"
+    private const val TAG = "Lugg"
   }
 }