feat: add url tile overlay

pinpong · pinpong · commit f4badbcaba99 · 2025-10-24T19:46:28.000+07:00
diff --git a/android/src/main/java/com/rngooglemapsplus/GoogleMapsViewImpl.kt b/android/src/main/java/com/rngooglemapsplus/GoogleMapsViewImpl.kt
@@ -77,13 +77,15 @@ class GoogleMapsViewImpl(
   private val pendingCircles = mutableListOf<Pair<String, CircleOptions>>()
   private val pendingHeatmaps = mutableListOf<Pair<String, TileOverlayOptions>>()
   private val pendingKmlLayers = mutableListOf<Pair<String, String>>()
+  private val pendingUrlTilesOverlays = 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 val kmlLayersById = mutableMapOf<String, KmlLayer>()
+  private val urlTileOverlaysById = mutableMapOf<String, TileOverlay>()
 
   private var cameraMoveReason = -1
   private var lastSubmittedCameraPosition: CameraPosition? = null
@@ -249,6 +251,13 @@ class GoogleMapsViewImpl(
       }
       pendingKmlLayers.clear()
     }
+
+    if (pendingUrlTilesOverlays.isNotEmpty()) {
+      pendingUrlTilesOverlays.forEach { (id, string) ->
+        internalAddUrlTileOverlay(id, string)
+      }
+      pendingUrlTilesOverlays.clear()
+    }
   }
 
   val currentCamera: CameraPosition?
@@ -856,6 +865,48 @@ class GoogleMapsViewImpl(
     pendingKmlLayers.clear()
   }
 
+  fun addUrlTileOverlay(
+    id: String,
+    opts: TileOverlayOptions,
+  ) {
+    if (googleMap == null) {
+      pendingUrlTilesOverlays.add(id to opts)
+      return
+    }
+
+    onUi {
+      urlTileOverlaysById.remove(id)?.remove()
+    }
+    internalAddUrlTileOverlay(id, opts)
+  }
+
+  private fun internalAddUrlTileOverlay(
+    id: String,
+    opts: TileOverlayOptions,
+  ) {
+    onUi {
+      val urlTile =
+        googleMap?.addTileOverlay(opts)
+      if (urlTile != null) {
+        urlTileOverlaysById[id] = urlTile
+      }
+    }
+  }
+
+  fun removeUrlTileOverlay(id: String) {
+    onUi {
+      urlTileOverlaysById.remove(id)?.remove()
+    }
+  }
+
+  fun clearUrlTileOverlays() {
+    onUi {
+      urlTileOverlaysById.values.forEach { it.remove() }
+    }
+    urlTileOverlaysById.clear()
+    pendingUrlTilesOverlays.clear()
+  }
+
   fun destroyInternal() {
     if (destroyed) return
     destroyed = true
@@ -868,6 +919,7 @@ class GoogleMapsViewImpl(
       clearCircles()
       clearHeatmaps()
       clearKmlLayer()
+      clearUrlTileOverlays()
       googleMap?.apply {
         setOnCameraMoveStartedListener(null)
         setOnCameraMoveListener(null)
diff --git a/android/src/main/java/com/rngooglemapsplus/MapUrlTileOverlayBuilder.kt b/android/src/main/java/com/rngooglemapsplus/MapUrlTileOverlayBuilder.kt
@@ -0,0 +1,40 @@
+package com.rngooglemapsplus
+
+import com.google.android.gms.maps.model.TileOverlayOptions
+import com.google.android.gms.maps.model.UrlTileProvider
+import java.net.URL
+
+class MapUrlTileOverlayBuilder {
+  fun build(t: RNUrlTileOverlay): TileOverlayOptions {
+    val provider =
+      object : UrlTileProvider(
+        t.tileSize.toInt(),
+        t.tileSize.toInt(),
+      ) {
+        override fun getTileUrl(
+          x: Int,
+          y: Int,
+          zoom: Int,
+        ): URL? {
+          val url =
+            t.url
+              .replace("{x}", x.toString())
+              .replace("{y}", y.toString())
+              .replace("{z}", zoom.toString())
+
+          return try {
+            URL(url)
+          } catch (e: Exception) {
+            null
+          }
+        }
+      }
+
+    val opts = TileOverlayOptions().tileProvider(provider)
+
+    t.fadeIn?.let { opts.fadeIn(it) }
+    t.zIndex?.let { opts.zIndex(it.toFloat()) }
+    t.opacity?.let { opts.transparency(1f - it.toFloat()) }
+    return opts
+  }
+}
diff --git a/android/src/main/java/com/rngooglemapsplus/RNGoogleMapsPlusView.kt b/android/src/main/java/com/rngooglemapsplus/RNGoogleMapsPlusView.kt
@@ -14,6 +14,7 @@ import com.rngooglemapsplus.extensions.polylineEquals
 import com.rngooglemapsplus.extensions.toCameraPosition
 import com.rngooglemapsplus.extensions.toCompressFormat
 import com.rngooglemapsplus.extensions.toFileExtension
+import com.rngooglemapsplus.extensions.toGoogleMapType
 import com.rngooglemapsplus.extensions.toLatLngBounds
 import com.rngooglemapsplus.extensions.toMapColorScheme
 import com.rngooglemapsplus.extensions.toSize
@@ -33,6 +34,7 @@ class RNGoogleMapsPlusView(
   private val polygonBuilder = MapPolygonBuilder()
   private val circleBuilder = MapCircleBuilder()
   private val heatmapBuilder = MapHeatmapBuilder()
+  private val urlTileOverlayBuilder = MapUrlTileOverlayBuilder()
 
   override val view =
     GoogleMapsViewImpl(context, locationHandler, playServiceHandler, markerBuilder)
@@ -128,9 +130,7 @@ class RNGoogleMapsPlusView(
     set(value) {
       if (field == value) return
       field = value
-      value?.let {
-        view.mapType = it.value
-      }
+      view.mapType = value?.toGoogleMapType()
     }
 
   override var markers: Array<RNMarker>? = null
@@ -263,6 +263,20 @@ class RNGoogleMapsPlusView(
         view.addKmlLayer(id, next.kmlString)
       }
     }
+  override var urlTileOverlays: Array<RNUrlTileOverlay>? = null
+    set(value) {
+      if (field.contentEquals(value)) return
+      val prevById = field?.associateBy { it.id } ?: emptyMap()
+      val nextById = value?.associateBy { it.id } ?: emptyMap()
+      field = value
+      (prevById.keys - nextById.keys).forEach { id ->
+        view.removeUrlTileOverlay(id)
+      }
+
+      nextById.forEach { (id, next) ->
+        view.addUrlTileOverlay(id, urlTileOverlayBuilder.build(next))
+      }
+    }
 
   override var locationConfig: RNLocationConfig? = null
     set(value) {
diff --git a/android/src/main/java/com/rngooglemapsplus/extensions/RNMapTypeExtension.kt b/android/src/main/java/com/rngooglemapsplus/extensions/RNMapTypeExtension.kt
@@ -0,0 +1,13 @@
+package com.rngooglemapsplus.extensions
+
+import com.google.android.gms.maps.GoogleMap
+import com.rngooglemapsplus.RNMapType
+
+fun RNMapType.toGoogleMapType(): Int =
+  when (this) {
+    RNMapType.NONE -> GoogleMap.MAP_TYPE_NONE
+    RNMapType.NORMAL -> GoogleMap.MAP_TYPE_NORMAL
+    RNMapType.HYBRID -> GoogleMap.MAP_TYPE_HYBRID
+    RNMapType.SATELLITE -> GoogleMap.MAP_TYPE_SATELLITE
+    RNMapType.TERRAIN -> GoogleMap.MAP_TYPE_TERRAIN
+  }
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -26,6 +26,7 @@ import type { RootStackParamList } from './types/navigation';
 import SnapshotTestScreen from './screens/SnaptshotTestScreen';
 import ClusteringScreen from './screens/ClsuteringScreen';
 import SvgMarkersScreen from './screens/SvgMarkersScreen';
+import UrlTileOverlay from './screens/UrlTileOverlay';
 
 const Stack = createStackNavigator<RootStackParamList>();
 
@@ -94,6 +95,11 @@ export default function App() {
             component={KmlLayerScreen}
             options={{ title: 'KML Layer' }}
           />
+          <Stack.Screen
+            name="UrlTileOverlay"
+            component={UrlTileOverlay}
+            options={{ title: 'Url Tile Overlay' }}
+          />
           <Stack.Screen
             name="Location"
             component={LocationScreen}
diff --git a/example/src/components/maptConfigDialog/validator.ts b/example/src/components/maptConfigDialog/validator.ts
@@ -235,6 +235,15 @@ export const RNKMLayerValidator = object({
   kmlString: string(),
 });
 
+export const RNUrlTileOverlayValidator = object({
+  id: string(),
+  zIndex: optional(number()),
+  url: string(),
+  tileSize: number(),
+  opacity: optional(number()),
+  fadeIn: optional(boolean()),
+});
+
 export const RNIndoorLevelValidator = object({
   index: number(),
   name: optional(string()),
@@ -342,6 +351,3 @@ if (
     { type: 'literal', schema: 'default' },
   ];
 }
-
-export type RNBasicMapConfigType =
-  typeof RNBasicMapConfigValidator extends Struct<infer O, any> ? O : never;
diff --git a/example/src/screens/HomeScreen.tsx b/example/src/screens/HomeScreen.tsx
@@ -13,6 +13,7 @@ const screens = [
   { name: 'Circles', title: 'Circles' },
   { name: 'Heatmap', title: 'Heatmap' },
   { name: 'KmlLayer', title: 'KML Layer' },
+  { name: 'UrlTileOverlay', title: 'Url Tile Overlay' },
   { name: 'Location', title: 'Location & Permissions' },
   { name: 'CustomStyle', title: 'Custom Map Style' },
   { name: 'IndoorLevelMap', title: 'Indoor Level Map' },
diff --git a/example/src/screens/UrlTileOverlay.tsx b/example/src/screens/UrlTileOverlay.tsx
@@ -0,0 +1,42 @@
+import React, { useRef, useState } from 'react';
+import MapWrapper from '../components/MapWrapper';
+import type {
+  GoogleMapsViewRef,
+  RNUrlTileOverlay,
+} from 'react-native-google-maps-plus';
+import MapConfigDialog from '../components/maptConfigDialog/MapConfigDialog';
+import { useNavigation } from '@react-navigation/native';
+import { RNUrlTileOverlayValidator } from '../components/maptConfigDialog/validator';
+import { useHeaderButton } from '../hooks/useHeaderButton';
+import { makeUrlTileOverlay } from '../utils/mapGenerators';
+
+export default function UrlTileOverlay() {
+  const mapRef = useRef<GoogleMapsViewRef | null>(null);
+  const navigation = useNavigation();
+  const [urlTileOverlay, setUrlTileOverlay] = useState<
+    RNUrlTileOverlay | undefined
+  >(undefined);
+  const [dialogVisible, setDialogVisible] = useState(true);
+
+  useHeaderButton(navigation, urlTileOverlay ? 'Edit' : 'Add', () =>
+    setDialogVisible(true)
+  );
+
+  return (
+    <>
+      <MapWrapper
+        mapType={'none'}
+        mapRef={mapRef}
+        urlTileOverlays={urlTileOverlay ? [urlTileOverlay] : []}
+      />
+      <MapConfigDialog<RNUrlTileOverlay>
+        visible={dialogVisible}
+        title="Edit KML layer"
+        initialData={makeUrlTileOverlay(1)}
+        validator={RNUrlTileOverlayValidator}
+        onClose={() => setDialogVisible(false)}
+        onSave={(c) => setUrlTileOverlay(c)}
+      />
+    </>
+  );
+}
diff --git a/example/src/types/navigation.ts b/example/src/types/navigation.ts
@@ -9,6 +9,7 @@ export type RootStackParamList = {
   Circles: undefined;
   Heatmap: undefined;
   KmlLayer: undefined;
+  UrlTileOverlay: undefined;
   Location: undefined;
   CustomStyle: undefined;
   IndoorLevelMap: undefined;
diff --git a/example/src/utils/mapGenerators.ts b/example/src/utils/mapGenerators.ts
@@ -4,6 +4,7 @@ import type {
   RNMarker,
   RNPolygon,
   RNPolyline,
+  RNUrlTileOverlay,
 } from 'react-native-google-maps-plus';
 
 export function randomColor() {
@@ -170,6 +171,17 @@ export const makeHeatmap = (id: number): RNHeatmap => ({
   opacity: 1,
 });
 
+export function makeUrlTileOverlay(id: number): RNUrlTileOverlay {
+  return {
+    id: id.toString(),
+    zIndex: id,
+    fadeIn: false,
+    opacity: 1,
+    tileSize: 256,
+    url: '',
+  };
+}
+
 export function makeMarker(id: number): RNMarker {
   return {
     id: id.toString(),
diff --git a/ios/GoogleMapViewImpl.swift b/ios/GoogleMapViewImpl.swift
@@ -19,13 +19,15 @@ GMSIndoorDisplayDelegate {
   private var pendingCircles: [(id: String, circle: GMSCircle)] = []
   private var pendingHeatmaps: [(id: String, heatmap: GMUHeatmapTileLayer)] = []
   private var pendingKmlLayers: [(id: String, kmlString: String)] = []
+  private var pendingUrlTileOverlays: [(id: String, urlTileOverlay: GMSURLTileLayer)] = []
 
   private var markersById: [String: GMSMarker] = [:]
   private var polylinesById: [String: GMSPolyline] = [:]
   private var polygonsById: [String: GMSPolygon] = [:]
   private var circlesById: [String: GMSCircle] = [:]
   private var heatmapsById: [String: GMUHeatmapTileLayer] = [:]
   private var kmlLayerById: [String: GMUGeometryRenderer] = [:]
+  private var urlTileOverlays: [String: GMSURLTileLayer] = [:]
 
   private var cameraMoveReasonIsGesture: Bool = false
   private var lastSubmittedCameraPosition: GMSCameraPosition?
@@ -135,6 +137,12 @@ GMSIndoorDisplayDelegate {
       }
       pendingKmlLayers.removeAll()
     }
+    if !pendingUrlTileOverlays.isEmpty {
+      pendingUrlTileOverlays.forEach {
+        addUrlTileOverlayInternal(id: $0.id, urlTileOverlay: $0.urlTileOverlay)
+      }
+      pendingUrlTileOverlays.removeAll()
+    }
   }
 
   @MainActor
@@ -612,6 +620,36 @@ GMSIndoorDisplayDelegate {
     pendingKmlLayers.removeAll()
   }
 
+  @MainActor
+  func addUrlTileOverlay(id: String, urlTileOverlay: GMSURLTileLayer) {
+    if mapView == nil {
+      pendingUrlTileOverlays.append((id, urlTileOverlay))
+      return
+    }
+    urlTileOverlays.removeValue(forKey: id).map { $0.map = nil }
+    addUrlTileOverlayInternal(id: id, urlTileOverlay: urlTileOverlay)
+  }
+
+  @MainActor
+  private func addUrlTileOverlayInternal(
+    id: String,
+    urlTileOverlay: GMSURLTileLayer
+  ) {
+    urlTileOverlay.map = mapView
+  }
+
+  @MainActor
+  func removeUrlTileOverlay(id: String) {
+    urlTileOverlays.removeValue(forKey: id).map { $0.map = nil }
+  }
+
+  @MainActor
+  func clearUrlTileOverlay() {
+    urlTileOverlays.values.forEach { $0.map = nil }
+    urlTileOverlays.removeAll()
+    pendingUrlTileOverlays.removeAll()
+  }
+
   func deinitInternal() {
     guard !deInitialized else { return }
     deInitialized = true
@@ -624,6 +662,7 @@ GMSIndoorDisplayDelegate {
       self.clearCircles()
       self.clearHeatmaps()
       self.clearKmlLayers()
+      self.clearUrlTileOverlay()
       self.mapView?.clear()
       self.mapView?.indoorDisplay.delegate = nil
       self.mapView?.delegate = nil
diff --git a/ios/MapUrlTileOverlayBuilder.swift b/ios/MapUrlTileOverlayBuilder.swift
diff --git a/ios/RNGoogleMapsPlusView.swift b/ios/RNGoogleMapsPlusView.swift
diff --git a/ios/extensions/RNMapType+Extension.swift b/ios/extensions/RNMapType+Extension.swift
diff --git a/src/RNGoogleMapsPlusView.nitro.ts b/src/RNGoogleMapsPlusView.nitro.ts
diff --git a/src/types.ts b/src/types.ts
