@lugg/maps 1.0.0-beta.3 → 1.0.0-beta.4

package/README.md

@@ -116,7 +116,10 @@ import { MapView, Marker, Polyline, Polygon } from '@lugg/maps';
 - [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
+- [Circle](docs/CIRCLE.md) - Draw circular overlays on the map
 - [GeoJson](docs/GEOJSON.md) - Render GeoJSON data on the map
+- [GroundOverlay](docs/GROUND_OVERLAY.md) - Display images on the map
+- [TileOverlay](docs/TILE_OVERLAY.md) - Display custom tile layers on the map
 
 ## Types
 

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

@@ -0,0 +1,85 @@
+package com.luggmaps
+
+import android.content.Context
+import android.graphics.Color
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.maps.model.Circle
+import com.google.android.gms.maps.model.LatLng
+import com.luggmaps.events.CirclePressEvent
+import com.luggmaps.extensions.dispatchEvent
+
+interface LuggCircleViewDelegate {
+  fun circleViewDidUpdate(circleView: LuggCircleView)
+}
+
+class LuggCircleView(context: Context) : ReactViewGroup(context) {
+  var center: LatLng = LatLng(0.0, 0.0)
+    private set
+
+  var radius: Double = 0.0
+    private set
+
+  var strokeColor: Int = Color.BLACK
+    private set
+
+  var fillColor: Int = Color.argb(77, 0, 0, 0)
+    private set
+
+  var strokeWidth: Float = 1f
+    private set
+
+  var zIndex: Float = 0f
+    private set
+
+  var tappable: Boolean = false
+    private set
+
+  var delegate: LuggCircleViewDelegate? = null
+  var circle: Circle? = null
+
+  init {
+    visibility = GONE
+  }
+
+  fun setCenter(value: LatLng) {
+    center = value
+  }
+
+  fun setRadius(value: Double) {
+    radius = value
+  }
+
+  fun setStrokeColor(color: Int) {
+    strokeColor = color
+  }
+
+  fun setFillColor(color: Int) {
+    fillColor = color
+  }
+
+  fun setStrokeWidth(width: Float) {
+    strokeWidth = width
+  }
+
+  fun setZIndex(value: Float) {
+    zIndex = value
+  }
+
+  fun setTappable(value: Boolean) {
+    tappable = value
+  }
+
+  fun emitPressEvent() {
+    dispatchEvent(CirclePressEvent(this))
+  }
+
+  fun onAfterUpdateTransaction() {
+    delegate?.circleViewDidUpdate(this)
+  }
+
+  fun onDropViewInstance() {
+    delegate = null
+    circle?.remove()
+    circle = null
+  }
+}

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

@@ -0,0 +1,79 @@
+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.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.LuggCircleViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggCircleViewManagerInterface
+import com.google.android.gms.maps.model.LatLng
+
+@ReactModule(name = LuggCircleViewManager.NAME)
+class LuggCircleViewManager :
+  ViewGroupManager<LuggCircleView>(),
+  LuggCircleViewManagerInterface<LuggCircleView> {
+  private val delegate: ViewManagerDelegate<LuggCircleView> = LuggCircleViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggCircleView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggCircleView = LuggCircleView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+    mapOf("topCirclePress" to mapOf("registrationName" to "onCirclePress"))
+
+  override fun onDropViewInstance(view: LuggCircleView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun onAfterUpdateTransaction(view: LuggCircleView) {
+    super.onAfterUpdateTransaction(view)
+    view.onAfterUpdateTransaction()
+  }
+
+  @ReactProp(name = "center")
+  override fun setCenter(view: LuggCircleView, value: ReadableMap?) {
+    value?.let { map ->
+      val lat = map.getDouble("latitude")
+      val lng = map.getDouble("longitude")
+      view.setCenter(LatLng(lat, lng))
+    }
+  }
+
+  @ReactProp(name = "radius", defaultDouble = 0.0)
+  override fun setRadius(view: LuggCircleView, value: Double) {
+    view.setRadius(value)
+  }
+
+  @ReactProp(name = "strokeColor", customType = "Color")
+  override fun setStrokeColor(view: LuggCircleView, value: Int?) {
+    view.setStrokeColor(value ?: android.graphics.Color.BLACK)
+  }
+
+  @ReactProp(name = "fillColor", customType = "Color")
+  override fun setFillColor(view: LuggCircleView, value: Int?) {
+    view.setFillColor(value ?: android.graphics.Color.argb(77, 0, 0, 0))
+  }
+
+  @ReactProp(name = "strokeWidth", defaultDouble = 1.0)
+  override fun setStrokeWidth(view: LuggCircleView, value: Double) {
+    view.setStrokeWidth(value.toFloat())
+  }
+
+  @ReactProp(name = "tappable")
+  override fun setTappable(view: LuggCircleView, value: Boolean) {
+    view.setTappable(value)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggCircleView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
+  companion object {
+    const val NAME = "LuggCircleView"
+  }
+}

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

@@ -0,0 +1,81 @@
+package com.luggmaps
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.maps.model.GroundOverlay
+import com.google.android.gms.maps.model.LatLng
+import com.luggmaps.events.GroundOverlayPressEvent
+import com.luggmaps.extensions.dispatchEvent
+
+interface LuggGroundOverlayViewDelegate {
+  fun groundOverlayViewDidUpdate(groundOverlayView: LuggGroundOverlayView)
+}
+
+class LuggGroundOverlayView(context: Context) : ReactViewGroup(context) {
+  var imageUri: String = ""
+    private set
+
+  var northeast: LatLng = LatLng(0.0, 0.0)
+    private set
+
+  var southwest: LatLng = LatLng(0.0, 0.0)
+    private set
+
+  var overlayOpacity: Float = 1f
+    private set
+
+  var bearing: Float = 0f
+    private set
+
+  var zIndex: Float = 0f
+    private set
+
+  var tappable: Boolean = false
+    private set
+
+  var delegate: LuggGroundOverlayViewDelegate? = null
+  var groundOverlay: GroundOverlay? = null
+
+  init {
+    visibility = GONE
+  }
+
+  fun setImageUri(value: String) {
+    imageUri = value
+  }
+
+  fun setBounds(ne: LatLng, sw: LatLng) {
+    northeast = ne
+    southwest = sw
+  }
+
+  fun setOverlayOpacity(value: Float) {
+    overlayOpacity = value
+  }
+
+  fun setBearing(value: Float) {
+    bearing = value
+  }
+
+  fun setZIndex(value: Float) {
+    zIndex = value
+  }
+
+  fun setTappable(value: Boolean) {
+    tappable = value
+  }
+
+  fun emitPressEvent() {
+    dispatchEvent(GroundOverlayPressEvent(this))
+  }
+
+  fun onAfterUpdateTransaction() {
+    delegate?.groundOverlayViewDidUpdate(this)
+  }
+
+  fun onDropViewInstance() {
+    delegate = null
+    groundOverlay?.remove()
+    groundOverlay = null
+  }
+}

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

@@ -0,0 +1,82 @@
+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.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.LuggGroundOverlayViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggGroundOverlayViewManagerInterface
+import com.google.android.gms.maps.model.LatLng
+
+@ReactModule(name = LuggGroundOverlayViewManager.NAME)
+class LuggGroundOverlayViewManager :
+  ViewGroupManager<LuggGroundOverlayView>(),
+  LuggGroundOverlayViewManagerInterface<LuggGroundOverlayView> {
+  private val delegate: ViewManagerDelegate<LuggGroundOverlayView> = LuggGroundOverlayViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggGroundOverlayView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggGroundOverlayView = LuggGroundOverlayView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+    mapOf("topGroundOverlayPress" to mapOf("registrationName" to "onGroundOverlayPress"))
+
+  override fun onDropViewInstance(view: LuggGroundOverlayView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun onAfterUpdateTransaction(view: LuggGroundOverlayView) {
+    super.onAfterUpdateTransaction(view)
+    view.onAfterUpdateTransaction()
+  }
+
+  @ReactProp(name = "image")
+  override fun setImage(view: LuggGroundOverlayView, value: String?) {
+    view.setImageUri(value ?: "")
+  }
+
+  @ReactProp(name = "bounds")
+  override fun setBounds(view: LuggGroundOverlayView, value: ReadableMap?) {
+    value?.let { map ->
+      val ne = map.getMap("northeast")
+      val sw = map.getMap("southwest")
+      val northeast = LatLng(
+        ne?.getDouble("latitude") ?: 0.0,
+        ne?.getDouble("longitude") ?: 0.0
+      )
+      val southwest = LatLng(
+        sw?.getDouble("latitude") ?: 0.0,
+        sw?.getDouble("longitude") ?: 0.0
+      )
+      view.setBounds(northeast, southwest)
+    }
+  }
+
+  @ReactProp(name = "opacity", defaultDouble = 1.0)
+  override fun setOpacity(view: LuggGroundOverlayView, value: Double) {
+    view.setOverlayOpacity(value.toFloat())
+  }
+
+  @ReactProp(name = "bearing", defaultDouble = 0.0)
+  override fun setBearing(view: LuggGroundOverlayView, value: Double) {
+    view.setBearing(value.toFloat())
+  }
+
+  @ReactProp(name = "tappable")
+  override fun setTappable(view: LuggGroundOverlayView, value: Boolean) {
+    view.setTappable(value)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggGroundOverlayView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
+  companion object {
+    const val NAME = "LuggGroundOverlayView"
+  }
+}

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

@@ -78,6 +78,9 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
       is LuggMarkerView -> provider?.addMarkerView(child)
       is LuggPolylineView -> provider?.addPolylineView(child)
       is LuggPolygonView -> provider?.addPolygonView(child)
+      is LuggCircleView -> provider?.addCircleView(child)
+      is LuggGroundOverlayView -> provider?.addGroundOverlayView(child)
+      is LuggTileOverlayView -> provider?.addTileOverlayView(child)
     }
   }
 
@@ -87,6 +90,9 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
       is LuggMarkerView -> provider?.removeMarkerView(view)
       is LuggPolylineView -> provider?.removePolylineView(view)
       is LuggPolygonView -> provider?.removePolygonView(view)
+      is LuggCircleView -> provider?.removeCircleView(view)
+      is LuggGroundOverlayView -> provider?.removeGroundOverlayView(view)
+      is LuggTileOverlayView -> provider?.removeTileOverlayView(view)
     }
     super.removeViewAt(index)
   }
@@ -135,6 +141,9 @@ class LuggMapView(private val reactContext: ThemedReactContext) :
         is LuggMarkerView -> google.addMarkerView(child)
         is LuggPolylineView -> google.addPolylineView(child)
         is LuggPolygonView -> google.addPolygonView(child)
+        is LuggCircleView -> google.addCircleView(child)
+        is LuggGroundOverlayView -> google.addGroundOverlayView(child)
+        is LuggTileOverlayView -> google.addTileOverlayView(child)
       }
     }
   }

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

@@ -12,6 +12,9 @@ class LuggPackage : ReactPackage {
       LuggCalloutViewManager(),
       LuggMapWrapperViewManager(),
       LuggPolylineViewManager(),
-      LuggPolygonViewManager()
+      LuggPolygonViewManager(),
+      LuggCircleViewManager(),
+      LuggGroundOverlayViewManager(),
+      LuggTileOverlayViewManager()
     )
 }

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

@@ -0,0 +1,92 @@
+package com.luggmaps
+
+import android.content.Context
+import com.facebook.react.views.view.ReactViewGroup
+import com.google.android.gms.maps.model.TileOverlay
+import com.luggmaps.events.TileOverlayPressEvent
+import com.luggmaps.extensions.dispatchEvent
+
+interface LuggTileOverlayViewDelegate {
+  fun tileOverlayViewDidUpdate(tileOverlayView: LuggTileOverlayView)
+}
+
+class LuggTileOverlayView(context: Context) : ReactViewGroup(context) {
+  var urlTemplate: String = ""
+    private set
+
+  var tileSize: Int = 256
+    private set
+
+  var overlayOpacity: Float = 1f
+    private set
+
+  var hasBounds: Boolean = false
+    private set
+  var boundsSwLat: Double = 0.0
+    private set
+  var boundsSwLng: Double = 0.0
+    private set
+  var boundsNeLat: Double = 0.0
+    private set
+  var boundsNeLng: Double = 0.0
+    private set
+
+  var zIndex: Float = 0f
+    private set
+
+  var tappable: Boolean = false
+    private set
+
+  var delegate: LuggTileOverlayViewDelegate? = null
+  var tileOverlay: TileOverlay? = null
+
+  init {
+    visibility = GONE
+  }
+
+  fun setUrlTemplate(value: String) {
+    urlTemplate = value
+  }
+
+  fun setTileSize(value: Int) {
+    tileSize = value
+  }
+
+  fun setOverlayOpacity(value: Float) {
+    overlayOpacity = value
+  }
+
+  fun setZIndex(value: Float) {
+    zIndex = value
+  }
+
+  fun setBounds(swLat: Double, swLng: Double, neLat: Double, neLng: Double) {
+    hasBounds = true
+    boundsSwLat = swLat
+    boundsSwLng = swLng
+    boundsNeLat = neLat
+    boundsNeLng = neLng
+  }
+
+  fun clearBounds() {
+    hasBounds = false
+  }
+
+  fun setTappable(value: Boolean) {
+    tappable = value
+  }
+
+  fun emitPressEvent() {
+    dispatchEvent(TileOverlayPressEvent(this))
+  }
+
+  fun onAfterUpdateTransaction() {
+    delegate?.tileOverlayViewDidUpdate(this)
+  }
+
+  fun onDropViewInstance() {
+    delegate = null
+    tileOverlay?.remove()
+    tileOverlay = null
+  }
+}

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

@@ -0,0 +1,80 @@
+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.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.LuggTileOverlayViewManagerDelegate
+import com.facebook.react.viewmanagers.LuggTileOverlayViewManagerInterface
+
+@ReactModule(name = LuggTileOverlayViewManager.NAME)
+class LuggTileOverlayViewManager :
+  ViewGroupManager<LuggTileOverlayView>(),
+  LuggTileOverlayViewManagerInterface<LuggTileOverlayView> {
+  private val delegate: ViewManagerDelegate<LuggTileOverlayView> = LuggTileOverlayViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<LuggTileOverlayView> = delegate
+  override fun getName(): String = NAME
+  override fun createViewInstance(context: ThemedReactContext): LuggTileOverlayView = LuggTileOverlayView(context)
+
+  override fun getExportedCustomDirectEventTypeConstants(): Map<String, Any> =
+    mapOf("topTileOverlayPress" to mapOf("registrationName" to "onTileOverlayPress"))
+
+  override fun onDropViewInstance(view: LuggTileOverlayView) {
+    super.onDropViewInstance(view)
+    view.onDropViewInstance()
+  }
+
+  override fun onAfterUpdateTransaction(view: LuggTileOverlayView) {
+    super.onAfterUpdateTransaction(view)
+    view.onAfterUpdateTransaction()
+  }
+
+  @ReactProp(name = "urlTemplate")
+  override fun setUrlTemplate(view: LuggTileOverlayView, value: String?) {
+    view.setUrlTemplate(value ?: "")
+  }
+
+  @ReactProp(name = "tileSize", defaultInt = 256)
+  override fun setTileSize(view: LuggTileOverlayView, value: Int) {
+    view.setTileSize(value)
+  }
+
+  @ReactProp(name = "opacity", defaultDouble = 1.0)
+  override fun setOpacity(view: LuggTileOverlayView, value: Double) {
+    view.setOverlayOpacity(value.toFloat())
+  }
+
+  @ReactProp(name = "bounds")
+  override fun setBounds(view: LuggTileOverlayView, value: ReadableMap?) {
+    if (value == null) {
+      view.clearBounds()
+      return
+    }
+    val ne = value.getMap("northeast")
+    val sw = value.getMap("southwest")
+    view.setBounds(
+      sw?.getDouble("latitude") ?: 0.0,
+      sw?.getDouble("longitude") ?: 0.0,
+      ne?.getDouble("latitude") ?: 0.0,
+      ne?.getDouble("longitude") ?: 0.0
+    )
+  }
+
+  @ReactProp(name = "tappable")
+  override fun setTappable(view: LuggTileOverlayView, value: Boolean) {
+    view.setTappable(value)
+  }
+
+  @ReactProp(name = "zIndex", defaultFloat = 0f)
+  override fun setZIndex(view: LuggTileOverlayView, value: Float) {
+    super.setZIndex(view, value)
+    view.setZIndex(value)
+  }
+
+  companion object {
+    const val NAME = "LuggTileOverlayView"
+  }
+}