@lugg/maps 0.2.0-alpha.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 lodev09
+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/LuggMaps.podspec

@@ -0,0 +1,23 @@
+require "json"
+
+package = JSON.parse(File.read(File.join(__dir__, "package.json")))
+
+Pod::Spec.new do |s|
+  s.name         = "LuggMaps"
+  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/lugg/maps.git", :tag => "#{s.version}" }
+
+  s.source_files = "ios/**/*.{h,m,mm,swift,cpp}"
+  s.private_header_files = "ios/**/*.h"
+
+  s.dependency "GoogleMaps"
+  s.frameworks = "MapKit"
+
+  install_modules_dependencies(s)
+end

package/README.md

@@ -0,0 +1,119 @@
+# @lugg/maps
+
+React Native Fabric maps library for iOS and Android.
+
+- Google Maps (iOS & Android)
+- Apple Maps (iOS only)
+
+## Installation
+
+```sh
+npm install @lugg/maps
+```
+
+### Expo
+
+Add the plugin to your `app.json`:
+
+```json
+{
+  "expo": {
+    "plugins": [
+      [
+        "@lugg/maps",
+        {
+          "iosGoogleMapsApiKey": "YOUR_IOS_API_KEY",
+          "androidGoogleMapsApiKey": "YOUR_ANDROID_API_KEY"
+        }
+      ]
+    ]
+  }
+}
+```
+
+### Bare React Native
+
+#### iOS
+
+Add your Google Maps API key to `AppDelegate.swift`:
+
+```swift
+import GoogleMaps
+
+// In application(_:didFinishLaunchingWithOptions:)
+GMSServices.provideAPIKey("YOUR_API_KEY")
+```
+
+#### Android
+
+Add your Google Maps API key to `AndroidManifest.xml`:
+
+```xml
+<application>
+  <meta-data
+    android:name="com.google.android.geo.API_KEY"
+    android:value="YOUR_API_KEY" />
+</application>
+```
+
+## Usage
+
+```tsx
+import { MapView, Marker, Polyline } from '@lugg/maps';
+
+<MapView
+  style={{ flex: 1 }}
+  provider="google"
+  initialCoordinate={{ latitude: 37.7749, longitude: -122.4194 }}
+  initialZoom={12}
+>
+  <Marker
+    coordinate={{ latitude: 37.7749, longitude: -122.4194 }}
+    title="San Francisco"
+  />
+  <Polyline
+    coordinates={[
+      { latitude: 37.7749, longitude: -122.4194 },
+      { latitude: 37.8049, longitude: -122.4094 },
+    ]}
+    strokeWidth={3}
+  />
+</MapView>
+```
+
+## Components
+
+- [MapView](docs/MAPVIEW.md) - Main map component
+- [Marker](docs/MARKER.md) - Map markers
+- [Polyline](docs/POLYLINE.md) - Draw lines 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;
+}
+```
+
+## 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,78 @@
+buildscript {
+  ext.getExtOrDefault = {name ->
+    return rootProject.ext.has(name) ? rootProject.ext.get(name) : project.properties['LuggMaps_' + name]
+  }
+
+  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"
+
+def getExtOrIntegerDefault(name) {
+  return rootProject.ext.has(name) ? rootProject.ext.get(name) : (project.properties["LuggMaps_" + name]).toInteger()
+}
+
+android {
+  namespace "com.luggmaps"
+
+  compileSdkVersion getExtOrIntegerDefault("compileSdkVersion")
+
+  defaultConfig {
+    minSdkVersion getExtOrIntegerDefault("minSdkVersion")
+    targetSdkVersion getExtOrIntegerDefault("targetSdkVersion")
+  }
+
+  buildFeatures {
+    buildConfig true
+  }
+
+  buildTypes {
+    release {
+      minifyEnabled false
+    }
+  }
+
+  lintOptions {
+    disable "GradleCompatible"
+  }
+
+  compileOptions {
+    sourceCompatibility JavaVersion.VERSION_1_8
+    targetCompatibility JavaVersion.VERSION_1_8
+  }
+
+  sourceSets {
+    main {
+      java.srcDirs += [
+        "generated/java",
+        "generated/jni"
+      ]
+    }
+  }
+}
+
+repositories {
+  mavenCentral()
+  google()
+}
+
+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"
+}

package/android/gradle.properties

@@ -0,0 +1,5 @@
+LuggMaps_kotlinVersion=2.0.21
+LuggMaps_minSdkVersion=24
+LuggMaps_targetSdkVersion=34
+LuggMaps_compileSdkVersion=35
+LuggMaps_ndkVersion=27.1.12297006

package/android/src/main/AndroidManifest.xml

@@ -0,0 +1,2 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
+</manifest>

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

@@ -0,0 +1,438 @@
+package com.luggmaps
+
+import android.annotation.SuppressLint
+import android.util.Log
+import android.view.View
+import android.view.ViewGroup
+import com.facebook.react.uimanager.PixelUtil.dpToPx
+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.CameraUpdateFactory
+import com.google.android.gms.maps.GoogleMap
+import com.google.android.gms.maps.GoogleMapOptions
+import com.google.android.gms.maps.MapView
+import com.google.android.gms.maps.OnMapReadyCallback
+import com.google.android.gms.maps.model.AdvancedMarker
+import com.google.android.gms.maps.model.AdvancedMarkerOptions
+import com.google.android.gms.maps.model.AdvancedMarkerOptions.CollisionBehavior
+import com.google.android.gms.maps.model.LatLng
+import com.google.android.gms.maps.model.PolylineOptions
+import com.luggmaps.core.PolylineAnimator
+
+interface LuggMapsGoogleMapViewEventDelegate {
+  fun onCameraMove(
+    view: LuggMapsGoogleMapView,
+    latitude: Double,
+    longitude: Double,
+    zoom: Float,
+    dragging: Boolean
+  )
+  fun onCameraIdle(view: LuggMapsGoogleMapView, latitude: Double, longitude: Double, zoom: Float)
+}
+
+@SuppressLint("ViewConstructor")
+class LuggMapsGoogleMapView(private val reactContext: ThemedReactContext) :
+  ReactViewGroup(reactContext),
+  OnMapReadyCallback,
+  LuggMapsMarkerViewDelegate,
+  LuggMapsPolylineViewDelegate,
+  GoogleMap.OnCameraMoveStartedListener,
+  GoogleMap.OnCameraMoveListener,
+  GoogleMap.OnCameraIdleListener {
+
+  var eventDelegate: LuggMapsGoogleMapViewEventDelegate? = null
+  private var mapView: MapView? = null
+  private var mapWrapperView: LuggMapsWrapperView? = null
+  private var googleMap: GoogleMap? = null
+  private var isMapReady = false
+  private var isDragging = false
+  private var mapId: String = DEMO_MAP_ID
+  private val pendingMarkerViews = mutableListOf<LuggMapsMarkerView>()
+  private val pendingPolylineViews = mutableListOf<LuggMapsPolylineView>()
+  private val polylineAnimators = mutableMapOf<LuggMapsPolylineView, PolylineAnimator>()
+
+  // Initial camera settings
+  private var initialLatitude: Double = 37.78
+  private var initialLongitude: Double = -122.43
+  private var initialZoom: Float = 14f
+
+  // UI settings
+  private var zoomEnabled: Boolean = true
+  private var scrollEnabled: Boolean = true
+  private var rotateEnabled: Boolean = true
+  private var pitchEnabled: Boolean = true
+
+  // Padding
+  private var paddingTop: Int = 0
+  private var paddingLeft: Int = 0
+  private var paddingBottom: Int = 0
+  private var paddingRight: Int = 0
+
+  // region View Lifecycle
+
+  override fun addView(child: View?, index: Int) {
+    super.addView(child, index)
+    when (child) {
+      is LuggMapsWrapperView -> mapWrapperView = child
+
+      is LuggMapsMarkerView -> {
+        child.delegate = this
+        syncMarkerView(child)
+      }
+
+      is LuggMapsPolylineView -> {
+        child.delegate = this
+        syncPolylineView(child)
+      }
+    }
+  }
+
+  override fun removeViewAt(index: Int) {
+    val view = getChildAt(index)
+    if (view is LuggMapsMarkerView) {
+      Log.d(TAG, "removing markerView: ${view.name}")
+      view.marker?.remove()
+      view.marker = null
+    } else if (view is LuggMapsPolylineView) {
+      polylineAnimators[view]?.destroy()
+      polylineAnimators.remove(view)
+      view.polyline?.remove()
+      view.polyline = null
+    }
+    super.removeViewAt(index)
+  }
+
+  override fun onAttachedToWindow() {
+    super.onAttachedToWindow()
+    if (mapView == null && mapWrapperView != null) {
+      initializeMap()
+    }
+  }
+
+  fun onDropViewInstance() {
+    Log.d(TAG, "dropping mapView instance")
+    pendingMarkerViews.clear()
+    pendingPolylineViews.clear()
+    polylineAnimators.values.forEach { it.destroy() }
+    polylineAnimators.clear()
+    googleMap?.clear()
+    googleMap = null
+    isMapReady = false
+    mapView?.onPause()
+    mapView?.onDestroy()
+    mapView = null
+    mapWrapperView = null
+  }
+
+  // endregion
+
+  // region Map Initialization
+
+  private fun initializeMap() {
+    if (mapView != null || mapWrapperView == null) return
+
+    val options = GoogleMapOptions().mapId(mapId)
+    mapView = MapView(context, options).also { view ->
+      view.onCreate(null)
+      view.onResume()
+      view.getMapAsync(this)
+      mapWrapperView?.addView(
+        view,
+        LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT)
+      )
+    }
+  }
+
+  override fun onMapReady(map: GoogleMap) {
+    googleMap = map
+    isMapReady = true
+
+    val position = LatLng(initialLatitude, initialLongitude)
+    map.moveCamera(CameraUpdateFactory.newLatLngZoom(position, initialZoom))
+
+    map.setOnCameraMoveStartedListener(this)
+    map.setOnCameraMoveListener(this)
+    map.setOnCameraIdleListener(this)
+
+    applyUiSettings()
+    applyPadding()
+    processPendingMarkers()
+    processPendingPolylines()
+  }
+
+  override fun onCameraMoveStarted(reason: Int) {
+    isDragging = reason == GoogleMap.OnCameraMoveStartedListener.REASON_GESTURE
+  }
+
+  override fun onCameraMove() {
+    val map = googleMap ?: return
+    val position = map.cameraPosition
+    eventDelegate?.onCameraMove(this, position.target.latitude, position.target.longitude, position.zoom, isDragging)
+  }
+
+  override fun onCameraIdle() {
+    val map = googleMap ?: return
+    val position = map.cameraPosition
+    isDragging = false
+    eventDelegate?.onCameraIdle(this, position.target.latitude, position.target.longitude, position.zoom)
+  }
+
+  private fun applyUiSettings() {
+    googleMap?.uiSettings?.apply {
+      isZoomGesturesEnabled = zoomEnabled
+      isScrollGesturesEnabled = scrollEnabled
+      isRotateGesturesEnabled = rotateEnabled
+      isTiltGesturesEnabled = pitchEnabled
+    }
+  }
+
+  private fun applyPadding() {
+    googleMap?.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom)
+  }
+
+  // endregion
+
+  // region PolylineViewDelegate
+
+  override fun polylineViewDidUpdate(polylineView: LuggMapsPolylineView) {
+    syncPolylineView(polylineView)
+  }
+
+  // endregion
+
+  // region MarkerViewDelegate
+
+  override fun markerViewDidLayout(markerView: LuggMapsMarkerView) {
+    if (googleMap == null) {
+      if (!pendingMarkerViews.contains(markerView)) {
+        pendingMarkerViews.add(markerView)
+      }
+      return
+    }
+
+    if (markerView.hasCustomView) {
+      // Recreate marker with custom view
+      markerView.marker?.remove()
+      addMarkerViewToMap(markerView)
+    } else {
+      syncMarkerView(markerView)
+    }
+  }
+
+  override fun markerViewDidUpdate(markerView: LuggMapsMarkerView) {
+    syncMarkerView(markerView)
+  }
+
+  // endregion
+
+  // region Marker Management
+
+  private fun syncMarkerView(markerView: LuggMapsMarkerView) {
+    if (googleMap == null) {
+      if (!pendingMarkerViews.contains(markerView)) {
+        pendingMarkerViews.add(markerView)
+      }
+      return
+    }
+
+    if (markerView.marker == null) {
+      // Custom views need layout first before adding to map
+      if (markerView.hasCustomView) return
+      addMarkerViewToMap(markerView)
+      return
+    }
+
+    markerView.marker?.apply {
+      position = LatLng(markerView.latitude, markerView.longitude)
+      title = markerView.title
+      snippet = markerView.description
+      setAnchor(markerView.anchorX, markerView.anchorY)
+      if (!markerView.hasCustomView) {
+        iconView = null
+      }
+    }
+  }
+
+  private fun processPendingMarkers() {
+    if (googleMap == null) return
+
+    Log.d(TAG, "processing pending markers ${pendingMarkerViews.size}")
+    pendingMarkerViews.forEach { addMarkerViewToMap(it) }
+    pendingMarkerViews.clear()
+  }
+
+  private fun addMarkerViewToMap(markerView: LuggMapsMarkerView) {
+    val map = googleMap ?: run {
+      RNLog.w(reactContext, "LuggMaps: addMarkerViewToMap called without a map")
+      return
+    }
+
+    val position = LatLng(markerView.latitude, markerView.longitude)
+    val iconView = markerView.iconView
+
+    (iconView.parent as? ViewGroup)?.removeView(iconView)
+
+    val options = AdvancedMarkerOptions()
+      .position(position)
+      .title(markerView.title)
+      .snippet(markerView.description)
+      .collisionBehavior(CollisionBehavior.REQUIRED)
+
+    Log.d(TAG, "adding marker: ${markerView.name} customview: ${markerView.hasCustomView}")
+    if (markerView.hasCustomView) {
+      options.iconView(iconView)
+    }
+
+    val marker = map.addMarker(options) as AdvancedMarker
+    marker.setAnchor(markerView.anchorX, markerView.anchorY)
+
+    markerView.marker = marker
+  }
+
+  // endregion
+
+  // region Polyline Management
+
+  private fun syncPolylineView(polylineView: LuggMapsPolylineView) {
+    if (googleMap == null) {
+      if (!pendingPolylineViews.contains(polylineView)) {
+        pendingPolylineViews.add(polylineView)
+      }
+      return
+    }
+
+    if (polylineView.polyline == null) {
+      addPolylineViewToMap(polylineView)
+      return
+    }
+
+    polylineView.polyline?.width = polylineView.strokeWidth.dpToPx()
+
+    polylineAnimators[polylineView]?.apply {
+      coordinates = polylineView.coordinates
+      strokeColors = polylineView.strokeColors
+      strokeWidth = polylineView.strokeWidth.dpToPx()
+      animated = polylineView.animated
+      update()
+    }
+  }
+
+  private fun processPendingPolylines() {
+    if (googleMap == null) return
+
+    pendingPolylineViews.forEach { addPolylineViewToMap(it) }
+    pendingPolylineViews.clear()
+  }
+
+  private fun addPolylineViewToMap(polylineView: LuggMapsPolylineView) {
+    val map = googleMap ?: return
+
+    val options = PolylineOptions()
+      .width(polylineView.strokeWidth.dpToPx())
+
+    val polyline = map.addPolyline(options)
+    polylineView.polyline = polyline
+
+    val animator = PolylineAnimator().apply {
+      this.polyline = polyline
+      coordinates = polylineView.coordinates
+      strokeColors = polylineView.strokeColors
+      strokeWidth = polylineView.strokeWidth.dpToPx()
+      animated = polylineView.animated
+      update()
+    }
+
+    polylineAnimators[polylineView] = animator
+  }
+
+  // endregion
+
+  // region Property Setters
+
+  fun setMapId(value: String?) {
+    if (value.isNullOrEmpty()) return
+
+    if (mapView != null) {
+      RNLog.w(reactContext, "LuggMaps: mapId cannot be changed after map is initialized")
+      return
+    }
+
+    mapId = value
+  }
+
+  fun setInitialCoordinate(latitude: Double, longitude: Double) {
+    initialLatitude = latitude
+    initialLongitude = longitude
+  }
+
+  fun setInitialZoom(zoom: Double) {
+    initialZoom = zoom.toFloat()
+  }
+
+  fun setZoomEnabled(enabled: Boolean) {
+    zoomEnabled = enabled
+    googleMap?.uiSettings?.isZoomGesturesEnabled = enabled
+  }
+
+  fun setScrollEnabled(enabled: Boolean) {
+    scrollEnabled = enabled
+    googleMap?.uiSettings?.isScrollGesturesEnabled = enabled
+  }
+
+  fun setRotateEnabled(enabled: Boolean) {
+    rotateEnabled = enabled
+    googleMap?.uiSettings?.isRotateGesturesEnabled = enabled
+  }
+
+  fun setPitchEnabled(enabled: Boolean) {
+    pitchEnabled = enabled
+    googleMap?.uiSettings?.isTiltGesturesEnabled = enabled
+  }
+
+  fun setMapPadding(top: Int, left: Int, bottom: Int, right: Int) {
+    paddingTop = top
+    paddingLeft = left
+    paddingBottom = bottom
+    paddingRight = right
+    applyPadding()
+  }
+
+  // endregion
+
+  // region Commands
+
+  fun moveCamera(latitude: Double, longitude: Double, zoom: Double, duration: Int) {
+    val map = googleMap ?: return
+    val position = LatLng(latitude, longitude)
+    val cameraUpdate = CameraUpdateFactory.newLatLngZoom(position, zoom.toFloat())
+    when {
+      duration < 0 -> map.animateCamera(cameraUpdate)
+      duration > 0 -> map.animateCamera(cameraUpdate, duration, null)
+      else -> map.moveCamera(cameraUpdate)
+    }
+  }
+
+  fun fitCoordinates(coordinates: List<LatLng>, padding: Int, duration: Int) {
+    val map = googleMap ?: return
+    if (coordinates.isEmpty()) return
+
+    val boundsBuilder = com.google.android.gms.maps.model.LatLngBounds.Builder()
+    coordinates.forEach { boundsBuilder.include(it) }
+    val bounds = boundsBuilder.build()
+
+    val cameraUpdate = CameraUpdateFactory.newLatLngBounds(bounds, padding.toFloat().dpToPx().toInt())
+    when {
+      duration < 0 -> map.animateCamera(cameraUpdate)
+      duration > 0 -> map.animateCamera(cameraUpdate, duration, null)
+      else -> map.moveCamera(cameraUpdate)
+    }
+  }
+
+  // endregion
+
+  companion object {
+    private const val TAG = "LuggMaps"
+    const val DEMO_MAP_ID = "DEMO_MAP_ID"
+  }
+}