react-native-cn-maps 0.1.0

package/CnMaps.podspec

@@ -0,0 +1,21 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "CnMaps"
+  s.version      = package["version"]
+  s.summary      = package["description"]
+  s.homepage     = package["homepage"]
+  s.license      = package["license"]
+  s.authors      = package["author"]
+
+  s.platforms    = { :ios => min_ios_version_supported }
+  s.source       = { :git => "https://github.com/popsiclelmlm/react-native-cn-maps.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  install_modules_dependencies(s)
+  s.dependency "AMap3DMap"
+end

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 popsiclelmlm
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,89 @@
+# react-native-cn-maps
+
+React Native Map components for China providers, with a `react-native-maps`-compatible API shape and a Fabric-only native implementation.
+
+## Installation
+
+```sh
+npm install react-native-cn-maps
+```
+
+This package currently targets React Native New Architecture/Fabric only. The first provider is AMap/Gaode (`provider="amap"`) on Android and iOS.
+
+## Native Setup
+
+### Android
+
+Add your AMap Android key in the host app manifest:
+
+```xml
+<application>
+  <meta-data
+    android:name="com.amap.api.v2.apikey"
+    android:value="YOUR_AMAP_ANDROID_KEY" />
+</application>
+```
+
+The Android SDK version can be overridden from the host Gradle project:
+
+```gradle
+ext.amapSdkVersion = "latest.integration"
+```
+
+### iOS
+
+Set the AMap iOS key before the React Native surface starts:
+
+```swift
+import AMapFoundationKit
+
+AMapServices.shared().apiKey = "YOUR_AMAP_IOS_KEY"
+```
+
+The podspec depends on `AMap3DMap`, which pulls in `AMapFoundation`.
+
+## Usage
+
+```tsx
+import MapView, { Marker } from 'react-native-cn-maps';
+
+<MapView
+  provider="amap"
+  coordinateSystem="gcj02"
+  initialRegion={{
+    latitude: 31.2304,
+    longitude: 121.4737,
+    latitudeDelta: 0.05,
+    longitudeDelta: 0.05,
+  }}
+>
+  <Marker
+    coordinate={{ latitude: 31.2304, longitude: 121.4737 }}
+    title="Shanghai"
+  />
+</MapView>;
+```
+
+## MVP Scope
+
+- `MapView`
+- `Marker`
+- `initialRegion`
+- controlled `region`
+- `onRegionChange`
+- `onRegionChangeComplete`
+- marker `onPress`
+- `animateToRegion`
+- `coordinateSystem="gcj02" | "wgs84"`
+
+`Polyline`, `Polygon`, `Circle`, custom marker views, callouts, and extra providers are intentionally left for later milestones.
+
+## Contributing
+
+- [Development workflow](CONTRIBUTING.md#development-workflow)
+- [Sending a pull request](CONTRIBUTING.md#sending-a-pull-request)
+- [Code of conduct](CODE_OF_CONDUCT.md)
+
+## License
+
+MIT

package/android/build.gradle

@@ -0,0 +1,68 @@
+buildscript {
+  ext.CnMaps = [
+    kotlinVersion: "2.0.21",
+    minSdkVersion: 24,
+    compileSdkVersion: 36,
+    targetSdkVersion: 36
+  ]
+
+  ext.getExtOrDefault = { prop ->
+    if (rootProject.ext.has(prop)) {
+      return rootProject.ext.get(prop)
+    }
+
+    return CnMaps[prop]
+  }
+
+  repositories {
+    google()
+    mavenCentral()
+  }
+
+  dependencies {
+    classpath "com.android.tools.build:gradle:8.7.2"
+    // noinspection DifferentKotlinGradleVersion
+    classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${getExtOrDefault('kotlinVersion')}"
+  }
+}
+
+
+apply plugin: "com.android.library"
+apply plugin: "kotlin-android"
+
+apply plugin: "com.facebook.react"
+
+android {
+  namespace "com.cnmaps"
+
+  compileSdkVersion getExtOrDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrDefault("minSdkVersion")
+    targetSdkVersion getExtOrDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lint {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+}
+
+dependencies {
+  implementation "com.facebook.react:react-android"
+  implementation "com.amap.api:3dmap-location-search:${rootProject.ext.has('amapSdkVersion') ? rootProject.ext.get('amapSdkVersion') : 'latest.integration'}"
+}

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+  <uses-permission android:name="android.permission.INTERNET" />
+  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
+  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
+  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
+  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
+</manifest>

package/android/src/main/java/com/cnmaps/MapView.kt

@@ -0,0 +1,368 @@
+package com.cnmaps
+
+import android.graphics.Color
+import android.view.MotionEvent
+import android.widget.FrameLayout
+import com.amap.api.maps.AMap
+import com.amap.api.maps.CameraUpdate
+import com.amap.api.maps.CameraUpdateFactory
+import com.amap.api.maps.MapView as AMapView
+import com.amap.api.maps.model.BitmapDescriptorFactory
+import com.amap.api.maps.model.CameraPosition
+import com.amap.api.maps.model.LatLng
+import com.amap.api.maps.model.LatLngBounds
+import com.amap.api.maps.model.Marker
+import com.amap.api.maps.model.MarkerOptions
+import com.facebook.react.bridge.Arguments
+import com.facebook.react.bridge.LifecycleEventListener
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.bridge.WritableMap
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.UIManagerHelper
+import com.facebook.react.uimanager.events.Event
+import kotlin.math.abs
+import kotlin.math.ln
+import kotlin.math.max
+import kotlin.math.min
+
+data class MapRegion(
+  val latitude: Double,
+  val longitude: Double,
+  val latitudeDelta: Double,
+  val longitudeDelta: Double
+)
+
+class MapView(private val reactContext: ThemedReactContext) :
+  FrameLayout(reactContext),
+  LifecycleEventListener {
+  private val mapView = AMapView(reactContext)
+  private val aMap: AMap
+  private val markerByIdentifier = LinkedHashMap<String, Marker>()
+  private var pendingInitialRegion: MapRegion? = null
+  private var didApplyInitialRegion = false
+  private var didDestroy = false
+  private var isGesture = false
+
+  init {
+    addView(mapView, LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT))
+    mapView.onCreate(null)
+    aMap = mapView.map
+    reactContext.addLifecycleEventListener(this)
+    configureMap()
+  }
+
+  fun setInitialRegion(region: MapRegion?) {
+    if (region == null || didApplyInitialRegion) {
+      return
+    }
+
+    pendingInitialRegion = region
+    applyPendingInitialRegion()
+  }
+
+  fun setRegion(region: MapRegion?) {
+    if (region != null) {
+      moveToRegion(region, animated = false)
+    }
+  }
+
+  fun animateToRegion(region: MapRegion, duration: Int) {
+    moveToRegion(region, animated = true, duration = duration)
+  }
+
+  fun setMarkers(markers: ReadableArray?) {
+    markerByIdentifier.values.forEach { it.remove() }
+    markerByIdentifier.clear()
+
+    if (markers == null) {
+      return
+    }
+
+    for (index in 0 until markers.size()) {
+      val markerMap = markers.getMap(index) ?: continue
+      val identifier = markerMap.getOptionalString("identifier") ?: index.toString()
+      val latitude = markerMap.getOptionalDouble("latitude") ?: continue
+      val longitude = markerMap.getOptionalDouble("longitude") ?: continue
+
+      val options = MarkerOptions()
+        .position(LatLng(latitude, longitude))
+        .draggable(markerMap.getOptionalBoolean("draggable") ?: false)
+
+      markerMap.getOptionalString("title")?.let { options.title(it) }
+      markerMap.getOptionalString("description")?.let { options.snippet(it) }
+      markerMap.getOptionalString("pinColor")?.let { pinColor ->
+        markerHue(pinColor)?.let { hue ->
+          options.icon(BitmapDescriptorFactory.defaultMarker(hue))
+        }
+      }
+
+      val marker = aMap.addMarker(options)
+      marker.`object` = identifier
+      markerByIdentifier[identifier] = marker
+    }
+  }
+
+  fun setShowsUserLocation(value: Boolean) {
+    aMap.isMyLocationEnabled = value
+  }
+
+  fun setZoomEnabled(value: Boolean) {
+    aMap.uiSettings.isZoomGesturesEnabled = value
+  }
+
+  fun setScrollEnabled(value: Boolean) {
+    aMap.uiSettings.isScrollGesturesEnabled = value
+  }
+
+  fun setRotateEnabled(value: Boolean) {
+    aMap.uiSettings.isRotateGesturesEnabled = value
+  }
+
+  fun setPitchEnabled(value: Boolean) {
+    aMap.uiSettings.isTiltGesturesEnabled = value
+  }
+
+  fun destroy() {
+    if (didDestroy) {
+      return
+    }
+
+    didDestroy = true
+    reactContext.removeLifecycleEventListener(this)
+    markerByIdentifier.values.forEach { it.remove() }
+    markerByIdentifier.clear()
+    mapView.onDestroy()
+  }
+
+  override fun onHostResume() {
+    if (!didDestroy) {
+      mapView.onResume()
+    }
+  }
+
+  override fun onHostPause() {
+    if (!didDestroy) {
+      mapView.onPause()
+    }
+  }
+
+  override fun onHostDestroy() {
+    destroy()
+  }
+
+  override fun onSizeChanged(width: Int, height: Int, oldWidth: Int, oldHeight: Int) {
+    super.onSizeChanged(width, height, oldWidth, oldHeight)
+    applyPendingInitialRegion()
+  }
+
+  private fun configureMap() {
+    aMap.uiSettings.isZoomControlsEnabled = false
+
+    aMap.setOnMapTouchListener { event ->
+      if (
+        event?.actionMasked == MotionEvent.ACTION_DOWN ||
+        event?.actionMasked == MotionEvent.ACTION_MOVE
+      ) {
+        isGesture = true
+      }
+    }
+
+    aMap.setOnCameraChangeListener(
+      object : AMap.OnCameraChangeListener {
+        override fun onCameraChange(position: CameraPosition?) {
+          sendRegionEvent("topRegionChange", isGesture)
+        }
+
+        override fun onCameraChangeFinish(position: CameraPosition?) {
+          sendRegionEvent("topRegionChangeComplete", isGesture)
+          isGesture = false
+        }
+      }
+    )
+
+    aMap.setOnMarkerClickListener { marker ->
+      val identifier = marker.`object` as? String ?: return@setOnMarkerClickListener false
+      sendMarkerPressEvent(identifier, marker.position)
+      false
+    }
+  }
+
+  private fun applyPendingInitialRegion() {
+    val region = pendingInitialRegion ?: return
+
+    if (width <= 0 || height <= 0) {
+      return
+    }
+
+    didApplyInitialRegion = true
+    pendingInitialRegion = null
+    moveToRegion(region, animated = false)
+  }
+
+  private fun moveToRegion(region: MapRegion, animated: Boolean, duration: Int = 0) {
+    val applyCamera = Runnable {
+      val boundsUpdate = CameraUpdateFactory.newLatLngBounds(region.toBounds(), 0)
+      runCatching {
+        applyCameraUpdate(boundsUpdate, animated, duration)
+      }.onFailure {
+        val fallbackUpdate = CameraUpdateFactory.newLatLngZoom(
+          LatLng(region.latitude, region.longitude),
+          region.toApproximateZoom()
+        )
+        applyCameraUpdate(fallbackUpdate, animated, duration)
+      }
+    }
+
+    if (width <= 0 || height <= 0) {
+      post(applyCamera)
+    } else {
+      applyCamera.run()
+    }
+  }
+
+  private fun applyCameraUpdate(update: CameraUpdate, animated: Boolean, duration: Int) {
+    if (animated) {
+      aMap.animateCamera(update, duration.toLong(), null)
+    } else {
+      aMap.moveCamera(update)
+    }
+  }
+
+  private fun sendRegionEvent(eventName: String, gesture: Boolean) {
+    if (id == NO_ID) {
+      return
+    }
+
+    currentRegion()?.let { region ->
+      UIManagerHelper.getEventDispatcher(reactContext)
+        ?.dispatchEvent(RegionEvent(UIManagerHelper.getSurfaceId(this), id, eventName, region, gesture))
+    }
+  }
+
+  private fun sendMarkerPressEvent(identifier: String, coordinate: LatLng) {
+    if (id == NO_ID) {
+      return
+    }
+
+    UIManagerHelper.getEventDispatcher(reactContext)
+      ?.dispatchEvent(
+        MarkerPressEvent(
+          UIManagerHelper.getSurfaceId(this),
+          id,
+          identifier,
+          coordinate.latitude,
+          coordinate.longitude
+        )
+      )
+  }
+
+  private fun currentRegion(): MapRegion? {
+    val bounds = runCatching {
+      aMap.projection.visibleRegion.latLngBounds
+    }.getOrNull() ?: return null
+    val target = aMap.cameraPosition.target ?: return null
+    val latitudeDelta = abs(bounds.northeast.latitude - bounds.southwest.latitude)
+    val longitudeDelta = abs(bounds.northeast.longitude - bounds.southwest.longitude)
+
+    return MapRegion(
+      latitude = target.latitude,
+      longitude = target.longitude,
+      latitudeDelta = latitudeDelta,
+      longitudeDelta = longitudeDelta
+    )
+  }
+
+  private fun MapRegion.toBounds(): LatLngBounds {
+    val halfLat = max(latitudeDelta, MIN_DELTA) / 2.0
+    val halfLon = max(longitudeDelta, MIN_DELTA) / 2.0
+    val southwest = LatLng(
+      max(-90.0, latitude - halfLat),
+      max(-180.0, longitude - halfLon)
+    )
+    val northeast = LatLng(
+      min(90.0, latitude + halfLat),
+      min(180.0, longitude + halfLon)
+    )
+
+    return LatLngBounds(southwest, northeast)
+  }
+
+  private fun MapRegion.toApproximateZoom(): Float {
+    val delta = max(max(latitudeDelta, longitudeDelta), MIN_DELTA)
+    val zoom = ln(360.0 / delta) / ln(2.0)
+    return zoom.toFloat().coerceIn(3f, 20f)
+  }
+
+  private fun markerHue(color: String): Float? {
+    return runCatching {
+      val hsv = FloatArray(3)
+      Color.colorToHSV(Color.parseColor(color), hsv)
+      hsv[0]
+    }.getOrNull()
+  }
+
+  private fun ReadableMap.getOptionalString(key: String): String? {
+    return if (hasKey(key) && !isNull(key)) getString(key) else null
+  }
+
+  private fun ReadableMap.getOptionalDouble(key: String): Double? {
+    return if (hasKey(key) && !isNull(key)) getDouble(key) else null
+  }
+
+  private fun ReadableMap.getOptionalBoolean(key: String): Boolean? {
+    return if (hasKey(key) && !isNull(key)) getBoolean(key) else null
+  }
+
+  private class RegionEvent(
+    surfaceId: Int,
+    viewId: Int,
+    private val rnEventName: String,
+    private val region: MapRegion,
+    private val isGesture: Boolean
+  ) : Event<RegionEvent>(surfaceId, viewId) {
+    override fun getEventName(): String = rnEventName
+
+    override fun getEventData(): WritableMap =
+      Arguments.createMap().apply {
+        putMap(
+          "region",
+          Arguments.createMap().apply {
+            putDouble("latitude", region.latitude)
+            putDouble("longitude", region.longitude)
+            putDouble("latitudeDelta", region.latitudeDelta)
+            putDouble("longitudeDelta", region.longitudeDelta)
+          }
+        )
+        putBoolean("isGesture", isGesture)
+      }
+  }
+
+  private class MarkerPressEvent(
+    surfaceId: Int,
+    viewId: Int,
+    private val identifier: String,
+    private val latitude: Double,
+    private val longitude: Double
+  ) : Event<MarkerPressEvent>(surfaceId, viewId) {
+    override fun getEventName(): String = "topMarkerPress"
+
+    override fun canCoalesce(): Boolean = false
+
+    override fun getEventData(): WritableMap =
+      Arguments.createMap().apply {
+        putString("identifier", identifier)
+        putMap(
+          "coordinate",
+          Arguments.createMap().apply {
+            putDouble("latitude", latitude)
+            putDouble("longitude", longitude)
+          }
+        )
+      }
+  }
+
+  private companion object {
+    private const val MIN_DELTA = 0.000001
+  }
+}

package/android/src/main/java/com/cnmaps/MapViewManager.kt

@@ -0,0 +1,112 @@
+package com.cnmaps
+
+import com.facebook.react.bridge.ReadableArray
+import com.facebook.react.bridge.ReadableMap
+import com.facebook.react.module.annotations.ReactModule
+import com.facebook.react.uimanager.SimpleViewManager
+import com.facebook.react.uimanager.ThemedReactContext
+import com.facebook.react.uimanager.ViewManagerDelegate
+import com.facebook.react.uimanager.annotations.ReactProp
+import com.facebook.react.viewmanagers.RNMapsMapViewManagerDelegate
+import com.facebook.react.viewmanagers.RNMapsMapViewManagerInterface
+
+@ReactModule(name = MapViewManager.REACT_CLASS)
+class MapViewManager : SimpleViewManager<MapView>(),
+  RNMapsMapViewManagerInterface<MapView> {
+  private val delegate: ViewManagerDelegate<MapView> = RNMapsMapViewManagerDelegate(this)
+
+  override fun getDelegate(): ViewManagerDelegate<MapView> = delegate
+
+  override fun getName(): String = REACT_CLASS
+
+  public override fun createViewInstance(context: ThemedReactContext): MapView {
+    return MapView(context)
+  }
+
+  override fun onDropViewInstance(view: MapView) {
+    view.destroy()
+    super.onDropViewInstance(view)
+  }
+
+  @ReactProp(name = "provider")
+  override fun setProvider(view: MapView, value: String?) {
+    // Fabric schema reserves future providers; the current native implementation is AMap only.
+  }
+
+  @ReactProp(name = "coordinateSystem")
+  override fun setCoordinateSystem(view: MapView, value: String?) {
+    // JS normalizes coordinates before they cross the native boundary.
+  }
+
+  @ReactProp(name = "initialRegion")
+  override fun setInitialRegion(view: MapView, value: ReadableMap?) {
+    view.setInitialRegion(value?.toMapRegion())
+  }
+
+  @ReactProp(name = "region")
+  override fun setRegion(view: MapView, value: ReadableMap?) {
+    view.setRegion(value?.toMapRegion())
+  }
+
+  @ReactProp(name = "markers")
+  override fun setMarkers(view: MapView, value: ReadableArray?) {
+    view.setMarkers(value)
+  }
+
+  @ReactProp(name = "showsUserLocation")
+  override fun setShowsUserLocation(view: MapView, value: Boolean) {
+    view.setShowsUserLocation(value)
+  }
+
+  @ReactProp(name = "zoomEnabled")
+  override fun setZoomEnabled(view: MapView, value: Boolean) {
+    view.setZoomEnabled(value)
+  }
+
+  @ReactProp(name = "scrollEnabled")
+  override fun setScrollEnabled(view: MapView, value: Boolean) {
+    view.setScrollEnabled(value)
+  }
+
+  @ReactProp(name = "rotateEnabled")
+  override fun setRotateEnabled(view: MapView, value: Boolean) {
+    view.setRotateEnabled(value)
+  }
+
+  @ReactProp(name = "pitchEnabled")
+  override fun setPitchEnabled(view: MapView, value: Boolean) {
+    view.setPitchEnabled(value)
+  }
+
+  override fun animateToRegion(
+    view: MapView,
+    latitude: Double,
+    longitude: Double,
+    latitudeDelta: Double,
+    longitudeDelta: Double,
+    duration: Int
+  ) {
+    view.animateToRegion(
+      MapRegion(
+        latitude = latitude,
+        longitude = longitude,
+        latitudeDelta = latitudeDelta,
+        longitudeDelta = longitudeDelta
+      ),
+      duration
+    )
+  }
+
+  private fun ReadableMap.toMapRegion(): MapRegion {
+    return MapRegion(
+      latitude = getDouble("latitude"),
+      longitude = getDouble("longitude"),
+      latitudeDelta = getDouble("latitudeDelta"),
+      longitudeDelta = getDouble("longitudeDelta")
+    )
+  }
+
+  companion object {
+    const val REACT_CLASS = "RNMapsMapView"
+  }
+}

package/android/src/main/java/com/cnmaps/MapsPackage.kt

@@ -0,0 +1,17 @@
+package com.cnmaps
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import com.facebook.react.uimanager.ViewManager
+
+class MapsPackage : BaseReactPackage() {
+  override fun createViewManagers(reactContext: ReactApplicationContext): List<ViewManager<*, *>> {
+    return listOf(MapViewManager())
+  }
+
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? = null
+
+  override fun getReactModuleInfoProvider() = ReactModuleInfoProvider { emptyMap() }
+}