@lugg/maps 0.2.0-alpha.8 → 1.0.0-beta.0

package/README.md

@@ -2,6 +2,11 @@
 
 Universal maps for your React Native apps 📍
 
+<img alt="@lugg/maps" src="docs/preview.gif" width="720" />
+
+> [!IMPORTANT]
+> This library is currently under heavy development. APIs may change without notice.
+
 ## Installation
 
 ```sh
@@ -72,7 +77,7 @@ function App() {
 ## Usage
 
 ```tsx
-import { MapView, Marker, Polyline } from '@lugg/maps';
+import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
 
 <MapView
   style={{ flex: 1 }}
@@ -91,6 +96,17 @@ import { MapView, Marker, Polyline } from '@lugg/maps';
     ]}
     strokeWidth={3}
   />
+  <Polygon
+    coordinates={[
+      { latitude: 37.784, longitude: -122.428 },
+      { latitude: 37.784, longitude: -122.422 },
+      { latitude: 37.779, longitude: -122.422 },
+      { latitude: 37.779, longitude: -122.428 },
+    ]}
+    fillColor="rgba(66, 133, 244, 0.3)"
+    strokeColor="#4285F4"
+    strokeWidth={2}
+  />
 </MapView>
 ```
 
@@ -99,27 +115,12 @@ import { MapView, Marker, Polyline } from '@lugg/maps';
 - [MapView](docs/MAPVIEW.md) - Main map component
 - [Marker](docs/MARKER.md) - Map markers
 - [Polyline](docs/POLYLINE.md) - Draw lines on the map
+- [Polygon](docs/POLYGON.md) - Draw filled shapes on the map
+- [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map
 
 ## Types
 
-```ts
-interface Coordinate {
-  latitude: number;
-  longitude: number;
-}
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-interface EdgeInsets {
-  top: number;
-  left: number;
-  bottom: number;
-  right: number;
-}
-```
+See [Types](docs/TYPES.md) for common type definitions (`Coordinate`, `Point`, `EdgeInsets`).
 
 ## Contributing
 

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

@@ -0,0 +1,290 @@
+package com.luggmaps
+
+import android.annotation.SuppressLint
+import android.view.View
+import android.view.View.VISIBLE
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.util.RNLog
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.maps.model.LatLng
+import com.luggmaps.core.EdgeInsets
+import com.luggmaps.core.GoogleMapProvider
+import com.luggmaps.core.MapProvider
+import com.luggmaps.core.MapProviderDelegate
+
+interface LuggMapViewEventDelegate {
+  fun onCameraMove(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    gesture: Boolean
+  )
+  fun onCameraIdle(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    gesture: Boolean
+  )
+  fun onReady(view: LuggMapView)
+  fun onPress(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    x: Float,
+    y: Float
+  )
+  fun onLongPress(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    x: Float,
+    y: Float
+  )
+}
+
+@SuppressLint("ViewConstructor")
+class LuggMapView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  MapProviderDelegate {
+
+  var eventDelegate: LuggMapViewEventDelegate? = null
+  private var provider: MapProvider? = null
+  private var mapWrapperView: LuggMapWrapperView? = null
+
+  // Cached props (applied during initializeProvider)
+  private var mapId: String = GoogleMapProvider.DEMO_MAP_ID
+  private var initialLatitude: Double = 37.78
+  private var initialLongitude: Double = -122.43
+  private var initialZoom: Float = 14f
+  private var theme: String = "system"
+  private var zoomEnabled: Boolean = true
+  private var scrollEnabled: Boolean = true
+  private var rotateEnabled: Boolean = true
+  private var pitchEnabled: Boolean = true
+  private var userLocationEnabled: Boolean = false
+  private var userLocationButtonEnabled: Boolean = false
+  private var minZoom: Double? = null
+  private var maxZoom: Double? = null
+  private var edgeInsets: EdgeInsets = EdgeInsets()
+
+  // region View Lifecycle
+
+  override fun addView(child: View?, index: Int) {
+    super.addView(child, index)
+    when (child) {
+      is LuggMapWrapperView -> mapWrapperView = child
+      is LuggMarkerView -> provider?.addMarkerView(child)
+      is LuggPolylineView -> provider?.addPolylineView(child)
+      is LuggPolygonView -> provider?.addPolygonView(child)
+    }
+  }
+
+  override fun removeViewAt(index: Int) {
+    val view = getChildAt(index)
+    when (view) {
+      is LuggMarkerView -> provider?.removeMarkerView(view)
+      is LuggPolylineView -> provider?.removePolylineView(view)
+      is LuggPolygonView -> provider?.removePolygonView(view)
+    }
+    super.removeViewAt(index)
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    if (provider == null && mapWrapperView != null) {
+      initializeProvider()
+    }
+  }
+
+  override fun onWindowVisibilityChanged(visibility: Int) {
+    super.onWindowVisibilityChanged(visibility)
+    if (visibility == VISIBLE) {
+      provider?.resumeAnimations()
+    } else {
+      provider?.pauseAnimations()
+    }
+  }
+
+  fun onDropViewInstance() {
+    provider?.destroy()
+    provider = null
+    mapWrapperView = null
+  }
+
+  // endregion
+
+  // region Provider Initialization
+
+  private fun initializeProvider() {
+    if (provider != null || mapWrapperView == null) return
+
+    val google = GoogleMapProvider(context)
+    google.mapId = mapId
+    google.delegate = this
+    provider = google
+
+    applyProps()
+
+    google.initializeMap(mapWrapperView!!, initialLatitude, initialLongitude, initialZoom)
+
+    // Flush children mounted before provider was created
+    for (i in 0 until childCount) {
+      when (val child = getChildAt(i)) {
+        is LuggMarkerView -> google.addMarkerView(child)
+        is LuggPolylineView -> google.addPolylineView(child)
+        is LuggPolygonView -> google.addPolygonView(child)
+      }
+    }
+  }
+
+  // endregion
+
+  // region MapProviderDelegate
+
+  override fun mapProviderDidReady() {
+    eventDelegate?.onReady(this)
+  }
+
+  override fun mapProviderDidMoveCamera(latitude: Double, longitude: Double, zoom: Float, gesture: Boolean) {
+    eventDelegate?.onCameraMove(this, latitude, longitude, zoom, gesture)
+  }
+
+  override fun mapProviderDidIdleCamera(latitude: Double, longitude: Double, zoom: Float, gesture: Boolean) {
+    eventDelegate?.onCameraIdle(this, latitude, longitude, zoom, gesture)
+  }
+
+  override fun mapProviderDidPress(latitude: Double, longitude: Double, x: Float, y: Float) {
+    eventDelegate?.onPress(this, latitude, longitude, x, y)
+  }
+
+  override fun mapProviderDidLongPress(latitude: Double, longitude: Double, x: Float, y: Float) {
+    eventDelegate?.onLongPress(this, latitude, longitude, x, y)
+  }
+
+  // endregion
+
+  // region Property Setters
+
+  private fun applyProps() {
+    provider?.setZoomEnabled(zoomEnabled)
+    provider?.setScrollEnabled(scrollEnabled)
+    provider?.setRotateEnabled(rotateEnabled)
+    provider?.setPitchEnabled(pitchEnabled)
+    provider?.setUserLocationEnabled(userLocationEnabled)
+    provider?.setUserLocationButtonEnabled(userLocationButtonEnabled)
+    provider?.setTheme(theme)
+    minZoom?.let { provider?.setMinZoom(it) }
+    maxZoom?.let { provider?.setMaxZoom(it) }
+    provider?.setEdgeInsets(edgeInsets)
+  }
+
+  fun setProvider(value: String?) {
+    if (value != null && value != "google") {
+      RNLog.w(reactContext, "LuggMapView: Only Google Maps is supported on Android")
+    }
+  }
+
+  fun setMapId(value: String?) {
+    if (value.isNullOrEmpty()) return
+    mapId = value
+  }
+
+  fun setInitialCoordinate(latitude: Double, longitude: Double) {
+    initialLatitude = latitude
+    initialLongitude = longitude
+  }
+
+  fun setInitialZoom(zoom: Double) {
+    initialZoom = zoom.toFloat()
+  }
+
+  fun setZoomEnabled(enabled: Boolean) {
+    if (zoomEnabled == enabled) return
+    zoomEnabled = enabled
+    provider?.setZoomEnabled(enabled)
+  }
+
+  fun setScrollEnabled(enabled: Boolean) {
+    if (scrollEnabled == enabled) return
+    scrollEnabled = enabled
+    provider?.setScrollEnabled(enabled)
+  }
+
+  fun setRotateEnabled(enabled: Boolean) {
+    if (rotateEnabled == enabled) return
+    rotateEnabled = enabled
+    provider?.setRotateEnabled(enabled)
+  }
+
+  fun setPitchEnabled(enabled: Boolean) {
+    if (pitchEnabled == enabled) return
+    pitchEnabled = enabled
+    provider?.setPitchEnabled(enabled)
+  }
+
+  fun setUserLocationEnabled(enabled: Boolean) {
+    if (userLocationEnabled == enabled) return
+    userLocationEnabled = enabled
+    provider?.setUserLocationEnabled(enabled)
+  }
+
+  fun setUserLocationButtonEnabled(enabled: Boolean) {
+    if (userLocationButtonEnabled == enabled) return
+    userLocationButtonEnabled = enabled
+    provider?.setUserLocationButtonEnabled(enabled)
+  }
+
+  fun setMinZoom(zoom: Double) {
+    if (minZoom == zoom) return
+    minZoom = zoom
+    provider?.setMinZoom(zoom)
+  }
+
+  fun setMaxZoom(zoom: Double) {
+    if (maxZoom == zoom) return
+    maxZoom = zoom
+    provider?.setMaxZoom(zoom)
+  }
+
+  fun setTheme(value: String) {
+    if (theme == value) return
+    theme = value
+    provider?.setTheme(value)
+  }
+
+  fun setEdgeInsets(
+    top: Int,
+    left: Int,
+    bottom: Int,
+    right: Int,
+    duration: Int = 0
+  ) {
+    val newEdgeInsets = EdgeInsets(top, left, bottom, right)
+    if (edgeInsets == newEdgeInsets) return
+    edgeInsets = newEdgeInsets
+    provider?.setEdgeInsets(edgeInsets, duration)
+  }
+
+  // endregion
+
+  // region Commands
+
+  fun moveCamera(latitude: Double, longitude: Double, zoom: Double, duration: Int) {
+    provider?.moveCamera(latitude, longitude, zoom, duration)
+  }
+
+  fun fitCoordinates(
+    coordinates: List<LatLng>,
+    edgeInsetsTop: Int,
+    edgeInsetsLeft: Int,
+    edgeInsetsBottom: Int,
+    edgeInsetsRight: Int,
+    duration: Int
+  ) {
+    provider?.fitCoordinates(coordinates, edgeInsetsTop, edgeInsetsLeft, edgeInsetsBottom, edgeInsetsRight, duration)
+  }
+
+  // endregion
+}

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

@@ -8,40 +8,44 @@ import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.uimanager.ViewGroupManager
 import com.facebook.react.uimanager.ViewManagerDelegate
 import com.facebook.react.uimanager.annotations.ReactProp
-import com.facebook.react.viewmanagers.LuggGoogleMapViewManagerDelegate
-import com.facebook.react.viewmanagers.LuggGoogleMapViewManagerInterface
+import com.facebook.react.viewmanagers.LuggMapViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggMapViewManagerInterface
 import com.google.android.gms.maps.model.LatLng
 import com.luggmaps.events.CameraIdleEvent
 import com.luggmaps.events.CameraMoveEvent
+import com.luggmaps.events.LongPressEvent
+import com.luggmaps.events.PressEvent
 import com.luggmaps.events.ReadyEvent
 import com.luggmaps.extensions.dispatchEvent
 
-@ReactModule(name = LuggGoogleMapViewManager.NAME)
-class LuggGoogleMapViewManager :
-  ViewGroupManager<LuggGoogleMapView>(),
-  LuggGoogleMapViewManagerInterface<LuggGoogleMapView>,
-  LuggGoogleMapViewEventDelegate {
-  private val delegate: ViewManagerDelegate<LuggGoogleMapView> = LuggGoogleMapViewManagerDelegate(this)
+@ReactModule(name = LuggMapViewManager.NAME)
+class LuggMapViewManager :
+  ViewGroupManager<LuggMapView>(),
+  LuggMapViewManagerInterface<LuggMapView>,
+  LuggMapViewEventDelegate {
+  private val delegate: ViewManagerDelegate<LuggMapView> = LuggMapViewManagerDelegate(this)
 
-  override fun getDelegate(): ViewManagerDelegate<LuggGoogleMapView> = delegate
+  override fun getDelegate(): ViewManagerDelegate<LuggMapView> = delegate
 
   override fun getName(): String = NAME
 
-  override fun createViewInstance(context: ThemedReactContext): LuggGoogleMapView {
-    val view = LuggGoogleMapView(context)
+  override fun createViewInstance(context: ThemedReactContext): LuggMapView {
+    val view = LuggMapView(context)
     view.eventDelegate = this
     return view
   }
 
   override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
     mapOf(
+      "topMapPress" to mapOf("registrationName" to "onMapPress"),
+      "topMapLongPress" to mapOf("registrationName" to "onMapLongPress"),
       "topCameraMove" to mapOf("registrationName" to "onCameraMove"),
       "topCameraIdle" to mapOf("registrationName" to "onCameraIdle"),
       "topReady" to mapOf("registrationName" to "onReady")
     )
 
   override fun onCameraMove(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     latitude: Double,
     longitude: Double,
     zoom: Float,
@@ -51,7 +55,7 @@ class LuggGoogleMapViewManager :
   }
 
   override fun onCameraIdle(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     latitude: Double,
     longitude: Double,
     zoom: Float,
@@ -60,17 +64,42 @@ class LuggGoogleMapViewManager :
     view.dispatchEvent(CameraIdleEvent(view, latitude, longitude, zoom, gesture))
   }
 
-  override fun onReady(view: LuggGoogleMapView) {
+  override fun onReady(view: LuggMapView) {
     view.dispatchEvent(ReadyEvent(view))
   }
 
+  override fun onPress(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    x: Float,
+    y: Float
+  ) {
+    view.dispatchEvent(PressEvent(view, latitude, longitude, x, y))
+  }
+
+  override fun onLongPress(
+    view: LuggMapView,
+    latitude: Double,
+    longitude: Double,
+    x: Float,
+    y: Float
+  ) {
+    view.dispatchEvent(LongPressEvent(view, latitude, longitude, x, y))
+  }
+
+  @ReactProp(name = "provider")
+  override fun setProvider(view: LuggMapView, value: String?) {
+    view.setProvider(value)
+  }
+
   @ReactProp(name = "mapId")
-  override fun setMapId(view: LuggGoogleMapView, value: String?) {
+  override fun setMapId(view: LuggMapView, value: String?) {
     view.setMapId(value)
   }
 
   @ReactProp(name = "initialCoordinate")
-  override fun setInitialCoordinate(view: LuggGoogleMapView, value: ReadableMap?) {
+  override fun setInitialCoordinate(view: LuggMapView, 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
@@ -79,63 +108,73 @@ class LuggGoogleMapViewManager :
   }
 
   @ReactProp(name = "initialZoom", defaultDouble = 10.0)
-  override fun setInitialZoom(view: LuggGoogleMapView, value: Double) {
+  override fun setInitialZoom(view: LuggMapView, value: Double) {
     view.setInitialZoom(value)
   }
 
   @ReactProp(name = "zoomEnabled", defaultBoolean = true)
-  override fun setZoomEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setZoomEnabled(view: LuggMapView, value: Boolean) {
     view.setZoomEnabled(value)
   }
 
   @ReactProp(name = "scrollEnabled", defaultBoolean = true)
-  override fun setScrollEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setScrollEnabled(view: LuggMapView, value: Boolean) {
     view.setScrollEnabled(value)
   }
 
   @ReactProp(name = "rotateEnabled", defaultBoolean = true)
-  override fun setRotateEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setRotateEnabled(view: LuggMapView, value: Boolean) {
     view.setRotateEnabled(value)
   }
 
   @ReactProp(name = "pitchEnabled", defaultBoolean = true)
-  override fun setPitchEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setPitchEnabled(view: LuggMapView, value: Boolean) {
     view.setPitchEnabled(value)
   }
 
   @ReactProp(name = "userLocationEnabled", defaultBoolean = false)
-  override fun setUserLocationEnabled(view: LuggGoogleMapView, value: Boolean) {
+  override fun setUserLocationEnabled(view: LuggMapView, value: Boolean) {
     view.setUserLocationEnabled(value)
   }
 
+  @ReactProp(name = "userLocationButtonEnabled", defaultBoolean = false)
+  override fun setUserLocationButtonEnabled(view: LuggMapView, value: Boolean) {
+    view.setUserLocationButtonEnabled(value)
+  }
+
   @ReactProp(name = "minZoom")
-  override fun setMinZoom(view: LuggGoogleMapView, value: Double) {
+  override fun setMinZoom(view: LuggMapView, value: Double) {
     view.setMinZoom(value)
   }
 
   @ReactProp(name = "maxZoom")
-  override fun setMaxZoom(view: LuggGoogleMapView, value: Double) {
+  override fun setMaxZoom(view: LuggMapView, value: Double) {
     view.setMaxZoom(value)
   }
 
-  @ReactProp(name = "padding")
-  override fun setPadding(view: LuggGoogleMapView, value: ReadableMap?) {
+  @ReactProp(name = "theme")
+  override fun setTheme(view: LuggMapView, value: String?) {
+    view.setTheme(value ?: "system")
+  }
+
+  @ReactProp(name = "edgeInsets")
+  override fun setEdgeInsets(view: LuggMapView, 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
       val bottom = if (it.hasKey("bottom")) it.getDouble("bottom").toFloat().dpToPx().toInt() else 0
       val right = if (it.hasKey("right")) it.getDouble("right").toFloat().dpToPx().toInt() else 0
-      view.setMapPadding(top, left, bottom, right)
+      view.setEdgeInsets(top, left, bottom, right)
     }
   }
 
-  override fun onDropViewInstance(view: LuggGoogleMapView) {
+  override fun onDropViewInstance(view: LuggMapView) {
     super.onDropViewInstance(view)
     view.onDropViewInstance()
   }
 
   override fun moveCamera(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     latitude: Double,
     longitude: Double,
     zoom: Double,
@@ -144,13 +183,30 @@ class LuggGoogleMapViewManager :
     view.moveCamera(latitude, longitude, zoom, duration.toInt())
   }
 
+  override fun setEdgeInsets(
+    view: LuggMapView,
+    top: Double,
+    left: Double,
+    bottom: Double,
+    right: Double,
+    duration: Double
+  ) {
+    view.setEdgeInsets(
+      top.toFloat().dpToPx().toInt(),
+      left.toFloat().dpToPx().toInt(),
+      bottom.toFloat().dpToPx().toInt(),
+      right.toFloat().dpToPx().toInt(),
+      duration.toInt()
+    )
+  }
+
   override fun fitCoordinates(
-    view: LuggGoogleMapView,
+    view: LuggMapView,
     coordinates: ReadableArray?,
-    paddingTop: Double,
-    paddingLeft: Double,
-    paddingBottom: Double,
-    paddingRight: Double,
+    edgeInsetsTop: Double,
+    edgeInsetsLeft: Double,
+    edgeInsetsBottom: Double,
+    edgeInsetsRight: Double,
     duration: Double
   ) {
     val coords = mutableListOf<LatLng>()
@@ -162,10 +218,17 @@ class LuggGoogleMapViewManager :
         coords.add(LatLng(lat, lng))
       }
     }
-    view.fitCoordinates(coords, paddingTop.toInt(), paddingLeft.toInt(), paddingBottom.toInt(), paddingRight.toInt(), duration.toInt())
+    view.fitCoordinates(
+      coords,
+      edgeInsetsTop.toInt(),
+      edgeInsetsLeft.toInt(),
+      edgeInsetsBottom.toInt(),
+      edgeInsetsRight.toInt(),
+      duration.toInt()
+    )
   }
 
   companion object {
-    const val NAME = "LuggGoogleMapView"
+    const val NAME = "LuggMapView"
   }
 }

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

@@ -1,12 +1,20 @@
 package com.luggmaps
 
 import android.annotation.SuppressLint
+import android.view.MotionEvent
 import com.facebook.react.uimanager.ThemedReactContext
 import com.facebook.react.views.view.ReactViewGroup
 
 @SuppressLint("ViewConstructor")
 class LuggMapWrapperView(context: ThemedReactContext) : ReactViewGroup(context) {
 
+  var touchEventHandler: ((MotionEvent) -> Unit)? = null
+
+  override fun dispatchTouchEvent(event: MotionEvent): Boolean {
+    touchEventHandler?.invoke(event)
+    return super.dispatchTouchEvent(event)
+  }
+
   override fun requestLayout() {
     super.requestLayout()
     getChildAt(0)?.let {
@@ -26,14 +34,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)
     }
   }
 }