@lugg/maps 0.2.0-alpha.9 → 1.0.0-beta.1

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,35 +96,31 @@ 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>
 ```
 
 ## Components
 
 - [MapView](docs/MAPVIEW.md) - Main map component
-- [Marker](docs/MARKER.md) - Map markers
+- [Marker](docs/MARKER.md) - Map markers with callout support
 - [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/build.gradle

@@ -74,5 +74,5 @@ def kotlin_version = getExtOrDefault("kotlinVersion")
 dependencies {
   implementation "com.facebook.react:react-android"
   implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
-  implementation "com.google.android.gms:play-services-maps:19.2.0"
+  implementation "com.google.android.gms:play-services-maps:20.0.0"
 }

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

@@ -0,0 +1,74 @@
+package com.luggmaps
+
+import android.content.Context
+import android.graphics.Bitmap
+import android.graphics.Canvas
+import android.view.View
+import androidx.core.graphics.createBitmap
+import androidx.core.view.isNotEmpty
+import com.facebook.react.views.view.ReactViewGroup
+
+class LuggCalloutView(context: Context) : ReactViewGroup(context) {
+  val contentView: ReactViewGroup = ReactViewGroup(context)
+  var bubbled: Boolean = true
+  var anchorX: Float = 0.5f
+    set(value) {
+      field = value
+      onUpdate?.invoke()
+    }
+  var anchorY: Float = 1.0f
+    set(value) {
+      field = value
+      onUpdate?.invoke()
+    }
+  var onUpdate: (() -> Unit)? = null
+
+  val hasCustomContent: Boolean
+    get() = contentView.isNotEmpty()
+
+  init {
+    visibility = GONE
+  }
+
+  override fun addView(child: View, index: Int) {
+    contentView.addView(child, index)
+    child.addOnLayoutChangeListener { _, _, _, _, _, _, _, _, _ ->
+      onUpdate?.invoke()
+    }
+  }
+
+  override fun removeView(child: View) {
+    contentView.removeView(child)
+  }
+
+  override fun removeViewAt(index: Int) {
+    contentView.removeViewAt(index)
+  }
+
+  override fun getChildCount(): Int = contentView.childCount
+
+  override fun getChildAt(index: Int): View? = contentView.getChildAt(index)
+
+  fun createContentBitmap(): Bitmap? {
+    var maxWidth = 0
+    var maxHeight = 0
+    for (i in 0 until contentView.childCount) {
+      val child = contentView.getChildAt(i)
+      val childRight = child.left + child.width
+      val childBottom = child.top + child.height
+      if (childRight > maxWidth) maxWidth = childRight
+      if (childBottom > maxHeight) maxHeight = childBottom
+    }
+
+    if (maxWidth <= 0 || maxHeight <= 0) return null
+
+    val bitmap = createBitmap(maxWidth, maxHeight)
+    val canvas = Canvas(bitmap)
+    contentView.draw(canvas)
+    return bitmap
+  }
+
+  fun onDropViewInstance() {
+    contentView.removeAllViews()
+  }
+}

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

@@ -0,0 +1,38 @@
+package com.luggmaps
+
+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
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggCalloutViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggCalloutViewManagerInterface
+
+@ReactModule(name = LuggCalloutViewManager.NAME)
+class LuggCalloutViewManager :
+  ViewGroupManager<LuggCalloutView>(),
+  LuggCalloutViewManagerInterface<LuggCalloutView> {
+  private val delegate: ViewManagerDelegate<LuggCalloutView> = LuggCalloutViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggCalloutView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggCalloutView = LuggCalloutView(context)
+
+  override fun setBubbled(view: LuggCalloutView, value: Boolean) {
+    view.bubbled = value
+  }
+
+  override fun setAnchor(view: LuggCalloutView, value: ReadableMap?) {
+    view.anchorX = value?.getDouble("x")?.toFloat() ?: 0.5f
+    view.anchorY = value?.getDouble("y")?.toFloat() ?: 1.0f
+  }
+
+  override fun onDropViewInstance(view: LuggCalloutView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  companion object {
+    const val NAME = "LuggCalloutView"
+  }
+}

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
+}