react-native-google-maps-plus 1.1.0-dev.2 → 1.1.0-dev.4

package/README.md

@@ -22,13 +22,15 @@ React-native wrapper for android & IOS google maps sdk
 yarn add react-native-google-maps-plus react-native-nitro-modules
 ```
 
-Dependencies
+# Dependencies
 
-This package builds on native SVG rendering libraries:
+This package builds on native libraries for SVG rendering and Google Maps integration:
 
-iOS: [SVGKit](https://github.com/SVGKit/SVGKit)
-
-Android: [AndroidSVG](https://bigbadaboom.github.io/androidsvg/)
+- **iOS**: [SVGKit](https://github.com/SVGKit/SVGKit)
+- **Android**: [AndroidSVG](https://bigbadaboom.github.io/androidsvg/)
+- **iOS Maps SDK**: [Google Maps SDK for iOS](https://developers.google.com/maps/documentation/ios-sdk)
+- **Android Maps SDK**: [Google Maps SDK for Android](https://developers.google.com/maps/documentation/android-sdk)
+- **Maps Utility Libraries**: [Google Maps Utils for iOS](https://developers.google.com/maps/documentation/ios-sdk/utility) and [Google Maps Utils for Android](https://developers.google.com/maps/documentation/android-sdk/utility)
 
 These are automatically linked when you install the package, but you may need to clean/rebuild your native projects after first install.
 

package/RNGoogleMapsPlus.podspec

@@ -26,7 +26,8 @@ Pod::Spec.new do |s|
   s.dependency 'React-jsi'
   s.dependency 'React-callinvoker'
 
-  s.dependency 'GoogleMaps', '10.3.0'
+  s.dependency 'GoogleMaps', '10.4.0'
+  s.dependency 'Google-Maps-iOS-Utils', '6.1.3'
   s.dependency 'SVGKit', '3.0.0'
 
   load 'nitrogen/generated/ios/RNGoogleMapsPlus+autolinking.rb'

package/android/src/main/java/com/rngooglemapsplus/GoogleMapsViewImpl.kt

@@ -25,6 +25,8 @@ import com.google.android.gms.maps.model.Polygon
 import com.google.android.gms.maps.model.PolygonOptions
 import com.google.android.gms.maps.model.Polyline
 import com.google.android.gms.maps.model.PolylineOptions
+import com.google.android.gms.maps.model.TileOverlay
+import com.google.android.gms.maps.model.TileOverlayOptions
 import com.rngooglemapsplus.extensions.toGooglePriority
 import com.rngooglemapsplus.extensions.toLocationErrorCode
 
@@ -52,11 +54,13 @@ class GoogleMapsViewImpl(
   private val pendingPolylines = mutableListOf<Pair<String, PolylineOptions>>()
   private val pendingPolygons = mutableListOf<Pair<String, PolygonOptions>>()
   private val pendingCircles = mutableListOf<Pair<String, CircleOptions>>()
+  private val pendingHeatmaps = mutableListOf<Pair<String, TileOverlayOptions>>()
 
   private val markersById = mutableMapOf<String, Marker>()
   private val polylinesById = mutableMapOf<String, Polyline>()
   private val polygonsById = mutableMapOf<String, Polygon>()
   private val circlesById = mutableMapOf<String, Circle>()
+  private val heatmapsById = mutableMapOf<String, TileOverlay>()
 
   private var cameraMoveReason = -1
   private var lastSubmittedLocation: Location? = null
@@ -293,11 +297,9 @@ class GoogleMapsViewImpl(
       userInterfaceStyle?.let {
         googleMap?.mapColorScheme = it
       }
-      minZoomLevel?.let {
-        googleMap?.setMinZoomPreference(it.toFloat())
-      }
-      maxZoomLevel?.let {
-        googleMap?.setMaxZoomPreference(it.toFloat())
+      mapZoomConfig?.let {
+        googleMap?.setMinZoomPreference(it.min?.toFloat() ?: 2.0f)
+        googleMap?.setMaxZoomPreference(it.max?.toFloat() ?: 21.0f)
       }
     }
 
@@ -334,62 +336,47 @@ class GoogleMapsViewImpl(
       }
       pendingCircles.clear()
     }
+
+    if (pendingHeatmaps.isNotEmpty()) {
+      pendingHeatmaps.forEach { (id, opts) ->
+        internalAddHeatmap(id, opts)
+      }
+      pendingHeatmaps.clear()
+    }
   }
 
   var uiSettings: RNMapUiSettings? = null
     set(value) {
       field = value
       onUi {
-        value?.let { v ->
-          googleMap?.uiSettings?.apply {
-            v.allGesturesEnabled?.let { setAllGesturesEnabled(it) }
-            v.compassEnabled?.let { isCompassEnabled = it }
-            v.indoorLevelPickerEnabled?.let { isIndoorLevelPickerEnabled = it }
-            v.mapToolbarEnabled?.let { isMapToolbarEnabled = it }
-            v.myLocationButtonEnabled?.let {
-              googleMap?.setLocationSource(locationHandler)
-              isMyLocationButtonEnabled = it
-            }
-            v.rotateEnabled?.let { isRotateGesturesEnabled = it }
-            v.scrollEnabled?.let { isScrollGesturesEnabled = it }
-            v.scrollDuringRotateOrZoomEnabled?.let {
-              isScrollGesturesEnabledDuringRotateOrZoom = it
-            }
-            v.tiltEnabled?.let { isTiltGesturesEnabled = it }
-            v.zoomControlsEnabled?.let { isZoomControlsEnabled = it }
-            v.zoomGesturesEnabled?.let { isZoomGesturesEnabled = it }
-          }
+        googleMap?.uiSettings?.apply {
+          setAllGesturesEnabled(value?.allGesturesEnabled ?: true)
+          isCompassEnabled = value?.compassEnabled ?: false
+          isIndoorLevelPickerEnabled = value?.indoorLevelPickerEnabled ?: false
+          isMapToolbarEnabled = value?.mapToolbarEnabled ?: false
+
+          val myLocationEnabled = value?.myLocationButtonEnabled ?: false
+          googleMap?.setLocationSource(if (myLocationEnabled) locationHandler else null)
+          isMyLocationButtonEnabled = myLocationEnabled
+
+          isRotateGesturesEnabled = value?.rotateEnabled ?: true
+          isScrollGesturesEnabled = value?.scrollEnabled ?: true
+          isScrollGesturesEnabledDuringRotateOrZoom =
+            value?.scrollDuringRotateOrZoomEnabled ?: true
+          isTiltGesturesEnabled = value?.tiltEnabled ?: true
+          isZoomControlsEnabled = value?.zoomControlsEnabled ?: false
+          isZoomGesturesEnabled = value?.zoomGesturesEnabled ?: false
         }
-          ?: run {
-            googleMap?.uiSettings?.apply {
-              setAllGesturesEnabled(true)
-              isCompassEnabled = false
-              isIndoorLevelPickerEnabled = false
-              isMapToolbarEnabled = false
-              isMyLocationButtonEnabled = false
-              googleMap?.setLocationSource(null)
-              isRotateGesturesEnabled = true
-              isScrollGesturesEnabled = true
-              isScrollGesturesEnabledDuringRotateOrZoom = true
-              isTiltGesturesEnabled = true
-              isZoomControlsEnabled = false
-              isZoomGesturesEnabled = false
-            }
-          }
       }
     }
 
   @SuppressLint("MissingPermission")
   var myLocationEnabled: Boolean? = null
     set(value) {
+      field = value
       onUi {
         try {
-          value?.let {
-            googleMap?.isMyLocationEnabled = it
-          }
-            ?: run {
-              googleMap?.isMyLocationEnabled = false
-            }
+          googleMap?.isMyLocationEnabled = value ?: false
         } catch (se: SecurityException) {
           onLocationError?.invoke(RNLocationErrorCode.PERMISSION_DENIED)
         } catch (ex: Exception) {
@@ -403,12 +390,7 @@ class GoogleMapsViewImpl(
     set(value) {
       field = value
       onUi {
-        value?.let {
-          googleMap?.isBuildingsEnabled = it
-        }
-          ?: run {
-            googleMap?.isBuildingsEnabled = false
-          }
+        googleMap?.isBuildingsEnabled = value ?: false
       }
     }
 
@@ -416,11 +398,7 @@ class GoogleMapsViewImpl(
     set(value) {
       field = value
       onUi {
-        value?.let {
-          googleMap?.isTrafficEnabled = it
-        } ?: run {
-          googleMap?.isTrafficEnabled = false
-        }
+        googleMap?.isTrafficEnabled = value ?: false
       }
     }
 
@@ -428,12 +406,7 @@ class GoogleMapsViewImpl(
     set(value) {
       field = value
       onUi {
-        value?.let {
-          googleMap?.isIndoorEnabled = it
-        }
-          ?: run {
-            googleMap?.isIndoorEnabled = false
-          }
+        googleMap?.isIndoorEnabled = value ?: false
       }
     }
 
@@ -449,52 +422,29 @@ class GoogleMapsViewImpl(
     set(value) {
       field = value
       onUi {
-        value?.let {
-          googleMap?.mapColorScheme = it
-        } ?: run {
-          googleMap?.mapColorScheme = MapColorScheme.FOLLOW_SYSTEM
-        }
+        googleMap?.mapColorScheme = value ?: MapColorScheme.FOLLOW_SYSTEM
       }
     }
 
-  var minZoomLevel: Double? = null
+  var mapZoomConfig: RNMapZoomConfig? = null
     set(value) {
       field = value
       onUi {
-        value?.let {
-          googleMap?.setMinZoomPreference(it.toFloat())
-        } ?: run {
-          googleMap?.setMinZoomPreference(2.0f)
-        }
-      }
-    }
-
-  var maxZoomLevel: Double? = null
-    set(value) {
-      field = value
-      onUi {
-        value?.let {
-          googleMap?.setMaxZoomPreference(it.toFloat())
-        } ?: run {
-          googleMap?.setMaxZoomPreference(21.0f)
-        }
+        googleMap?.setMinZoomPreference(value?.min?.toFloat() ?: 2.0f)
+        googleMap?.setMaxZoomPreference(value?.max?.toFloat() ?: 21.0f)
       }
     }
 
   var mapPadding: RNMapPadding? = null
     set(value) {
       field = value
-      value?.let {
-        onUi {
-          googleMap?.setPadding(
-            it.left.dpToPx().toInt(),
-            it.top.dpToPx().toInt(),
-            it.right.dpToPx().toInt(),
-            it.bottom.dpToPx().toInt(),
-          )
-        }
-      } ?: run {
-        googleMap?.setPadding(0, 0, 0, 0)
+      onUi {
+        googleMap?.setPadding(
+          value?.left?.dpToPx()?.toInt() ?: 0,
+          value?.top?.dpToPx()?.toInt() ?: 0,
+          value?.right?.dpToPx()?.toInt() ?: 0,
+          value?.bottom?.dpToPx()?.toInt() ?: 0,
+        )
       }
     }
 
@@ -502,11 +452,7 @@ class GoogleMapsViewImpl(
     set(value) {
       field = value
       onUi {
-        value?.let {
-          googleMap?.mapType = it
-        } ?: run {
-          googleMap?.mapType = 1
-        }
+        googleMap?.mapType = value ?: 1
       }
     }
 
@@ -837,6 +783,48 @@ class GoogleMapsViewImpl(
     pendingCircles.clear()
   }
 
+  fun addHeatmap(
+    id: String,
+    opts: TileOverlayOptions,
+  ) {
+    if (googleMap == null) {
+      pendingHeatmaps.add(id to opts)
+      return
+    }
+
+    onUi {
+      heatmapsById.remove(id)?.remove()
+    }
+    internalAddHeatmap(id, opts)
+  }
+
+  private fun internalAddHeatmap(
+    id: String,
+    opts: TileOverlayOptions,
+  ) {
+    onUi {
+      val heatmap =
+        googleMap?.addTileOverlay(opts)
+      if (heatmap != null) {
+        heatmapsById[id] = heatmap
+      }
+    }
+  }
+
+  fun removeHeatmap(id: String) {
+    onUi {
+      heatmapsById.remove(id)?.remove()
+    }
+  }
+
+  fun clearHeatmaps() {
+    onUi {
+      heatmapsById.values.forEach { it.remove() }
+    }
+    circlesById.clear()
+    pendingHeatmaps.clear()
+  }
+
   fun destroyInternal() {
     onUi {
       markerBuilder.cancelAllJobs()
@@ -844,6 +832,7 @@ class GoogleMapsViewImpl(
       clearPolylines()
       clearPolygons()
       clearCircles()
+      clearHeatmaps()
       locationHandler.stop()
       googleMap?.apply {
         setOnCameraMoveStartedListener(null)

package/android/src/main/java/com/rngooglemapsplus/LocationHandler.kt

@@ -38,19 +38,19 @@ class LocationHandler(
 
   var priority: Int? = PRIORITY_DEFAULT
     set(value) {
-      field = value
+      field = value ?: PRIORITY_DEFAULT
       start()
     }
 
   var interval: Long? = INTERVAL_DEFAULT
     set(value) {
-      field = value
+      field = value ?: INTERVAL_DEFAULT
       buildLocationRequest()
     }
 
   var minUpdateInterval: Long? = MIN_UPDATE_INTERVAL
     set(value) {
-      field = value
+      field = value ?: MIN_UPDATE_INTERVAL
       buildLocationRequest()
     }
 

package/android/src/main/java/com/rngooglemapsplus/MapCircleBuilder.kt

@@ -1,19 +1,33 @@
 package com.rngooglemapsplus
 
+import android.graphics.Color
 import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.google.android.gms.maps.model.Circle
 import com.google.android.gms.maps.model.CircleOptions
 import com.google.android.gms.maps.model.LatLng
 import com.rngooglemapsplus.extensions.toColor
 
 class MapCircleBuilder {
-  fun buildCircleOptions(circle: RNCircle): CircleOptions =
+  fun build(circle: RNCircle): CircleOptions =
     CircleOptions().apply {
       center(LatLng(circle.center.latitude, circle.center.longitude))
-      circle.radius?.let { radius(it) }
+      radius(circle.radius)
       circle.strokeWidth?.let { strokeWidth(it.dpToPx()) }
       circle.strokeColor?.let { strokeColor(it.toColor()) }
       circle.fillColor?.let { fillColor(it.toColor()) }
       circle.pressable?.let { clickable(it) }
       circle.zIndex?.let { zIndex(it.toFloat()) }
     }
+
+  fun update(
+    circle: Circle,
+    next: RNCircle,
+  ) {
+    circle.center = LatLng(next.center.latitude, next.center.longitude)
+    circle.radius = next.radius
+    circle.strokeWidth = next.strokeWidth?.dpToPx() ?: 1f
+    circle.strokeColor = next.strokeColor?.toColor() ?: Color.BLACK
+    circle.fillColor = next.fillColor?.toColor() ?: Color.TRANSPARENT
+    circle.zIndex = next.zIndex?.toFloat() ?: 0f
+  }
 }

package/android/src/main/java/com/rngooglemapsplus/MapHeatmapBuilder.kt

@@ -0,0 +1,31 @@
+package com.rngooglemapsplus
+
+import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.google.android.gms.maps.model.TileOverlayOptions
+import com.google.maps.android.heatmaps.Gradient
+import com.google.maps.android.heatmaps.HeatmapTileProvider
+import com.rngooglemapsplus.extensions.toColor
+import com.rngooglemapsplus.extensions.toWeightedLatLngs
+
+class MapHeatmapBuilder {
+  fun build(heatmap: RNHeatmap): TileOverlayOptions {
+    val provider =
+      HeatmapTileProvider
+        .Builder()
+        .apply {
+          weightedData(heatmap.weightedData.toWeightedLatLngs())
+          heatmap.radius?.let { radius(it.dpToPx().toInt().coerceIn(10, 50)) }
+          heatmap.opacity?.let { opacity(it) }
+          heatmap.gradient?.let {
+            val colors = it.colors.map { c -> c.toColor() }.toIntArray()
+            val startPoints = it.startPoints.map { p -> p.toFloat() }.toFloatArray()
+            gradient(Gradient(colors, startPoints))
+          }
+        }.build()
+
+    return TileOverlayOptions().apply {
+      tileProvider(provider)
+      heatmap.zIndex?.let { zIndex(it.toFloat()) }
+    }
+  }
+}

package/android/src/main/java/com/rngooglemapsplus/MapMarkerBuilder.kt

@@ -9,7 +9,9 @@ import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.model.BitmapDescriptor
 import com.google.android.gms.maps.model.BitmapDescriptorFactory
 import com.google.android.gms.maps.model.LatLng
+import com.google.android.gms.maps.model.Marker
 import com.google.android.gms.maps.model.MarkerOptions
+import com.rngooglemapsplus.extensions.markerStyleEquals
 import com.rngooglemapsplus.extensions.styleHash
 import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.Dispatchers
@@ -44,6 +46,29 @@ class MapMarkerBuilder(
       m.zIndex?.let { zIndex(it.toFloat()) }
     }
 
+  fun update(
+    marker: Marker,
+    prev: RNMarker,
+    next: RNMarker,
+  ) {
+    marker.position =
+      LatLng(
+        next.coordinate.latitude,
+        next.coordinate.longitude,
+      )
+    marker.zIndex = next.zIndex?.toFloat() ?: 0f
+
+    if (!prev.markerStyleEquals(next)) {
+      buildIconAsync(marker.id, next) { icon ->
+        marker.setIcon(icon)
+      }
+    }
+    marker.setAnchor(
+      (next.anchor?.x ?: 0.5).toFloat(),
+      (next.anchor?.y ?: 0.5).toFloat(),
+    )
+  }
+
   fun buildIconAsync(
     id: String,
     m: RNMarker,

package/android/src/main/java/com/rngooglemapsplus/MapPolygonBuilder.kt

@@ -1,11 +1,14 @@
 package com.rngooglemapsplus
 
+import android.graphics.Color
 import com.facebook.react.uimanager.PixelUtil.dpToPx
+import com.google.android.gms.maps.model.LatLng
+import com.google.android.gms.maps.model.Polygon
 import com.google.android.gms.maps.model.PolygonOptions
 import com.rngooglemapsplus.extensions.toColor
 
 class MapPolygonBuilder {
-  fun buildPolygonOptions(poly: RNPolygon): PolygonOptions =
+  fun build(poly: RNPolygon): PolygonOptions =
     PolygonOptions().apply {
       poly.coordinates.forEach { pt ->
         add(
@@ -19,4 +22,18 @@ class MapPolygonBuilder {
       poly.pressable?.let { clickable(it) }
       poly.zIndex?.let { zIndex(it.toFloat()) }
     }
+
+  fun update(
+    gmsPoly: Polygon,
+    next: RNPolygon,
+  ) {
+    gmsPoly.points =
+      next.coordinates.map {
+        LatLng(it.latitude, it.longitude)
+      }
+    gmsPoly.fillColor = next.fillColor?.toColor() ?: Color.TRANSPARENT
+    gmsPoly.strokeColor = next.strokeColor?.toColor() ?: Color.BLACK
+    gmsPoly.strokeWidth = next.strokeWidth?.dpToPx() ?: 1f
+    gmsPoly.zIndex = next.zIndex?.toFloat() ?: 0f
+  }
 }

package/android/src/main/java/com/rngooglemapsplus/MapPolylineBuilder.kt.kt

@@ -1,40 +1,57 @@
 package com.rngooglemapsplus
 
+import android.graphics.Color
 import com.facebook.react.uimanager.PixelUtil.dpToPx
 import com.google.android.gms.maps.model.ButtCap
 import com.google.android.gms.maps.model.Cap
 import com.google.android.gms.maps.model.JointType
+import com.google.android.gms.maps.model.LatLng
+import com.google.android.gms.maps.model.Polyline
 import com.google.android.gms.maps.model.PolylineOptions
 import com.google.android.gms.maps.model.RoundCap
 import com.google.android.gms.maps.model.SquareCap
 import com.rngooglemapsplus.extensions.toColor
 
 class MapPolylineBuilder {
-  fun buildPolylineOptions(pl: RNPolyline): PolylineOptions =
+  fun build(pl: RNPolyline): PolylineOptions =
     PolylineOptions().apply {
       pl.coordinates.forEach { pt ->
-        add(
-          com.google.android.gms.maps.model
-            .LatLng(pt.latitude, pt.longitude),
-        )
+        add(LatLng(pt.latitude, pt.longitude))
       }
       pl.width?.let { width(it.dpToPx()) }
-      pl.lineCap?.let { startCap(mapLineCap(it)) }
-      pl.lineCap?.let { endCap(mapLineCap(it)) }
+      pl.lineCap?.let {
+        startCap(mapLineCap(it))
+        endCap(mapLineCap(it))
+      }
       pl.lineJoin?.let { jointType(mapLineJoin(it)) }
       pl.color?.let { color(it.toColor()) }
       pl.pressable?.let { clickable(it) }
       pl.zIndex?.let { zIndex(it.toFloat()) }
     }
 
-  fun mapLineCap(type: RNLineCapType?): Cap =
+  fun update(
+    polyline: Polyline,
+    next: RNPolyline,
+  ) {
+    polyline.points = next.coordinates.map { LatLng(it.latitude, it.longitude) }
+
+    polyline.width = next.width?.dpToPx() ?: 1f
+    val cap = mapLineCap(next.lineCap ?: RNLineCapType.BUTT)
+    polyline.startCap = cap
+    polyline.endCap = cap
+    polyline.jointType = mapLineJoin(next.lineJoin ?: RNLineJoinType.MITER)
+    polyline.color = next.color?.toColor() ?: Color.BLACK
+    polyline.zIndex = next.zIndex?.toFloat() ?: 0f
+  }
+
+  private fun mapLineCap(type: RNLineCapType?): Cap =
     when (type) {
       RNLineCapType.ROUND -> RoundCap()
       RNLineCapType.SQUARE -> SquareCap()
       else -> ButtCap()
     }
 
-  fun mapLineJoin(type: RNLineJoinType?): Int =
+  private fun mapLineJoin(type: RNLineJoinType?): Int =
     when (type) {
       RNLineJoinType.ROUND -> JointType.ROUND
       RNLineJoinType.BEVEL -> JointType.BEVEL