react-native-leaflet-kit 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 React Native Leaflet Kit Contributors
+
+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,410 @@
+# React Native Leaflet Kit 🗺️
+
+A professional, pluggable, and declarative Map library for React Native built on top of Leaflet, WebView, and OpenStreetMap tiles. Designed with a Compound Component pattern for maximum flexibility and performance.
+
+## ✨ Features
+
+-   **Declarative API**: Build maps using clean, modular JSX components.
+-   **Compound Component Pattern**: Easily compose layers, markers, and polylines.
+-   **Surgical Updates**: Only modified elements are updated, preventing full map re-renders.
+-   **Premium User Location**: Integrated high-performance user marker with direction cone and pulse animation.
+-   **TypeScript Support**: Fully typed for a superior developer experience.
+-   **Theming**: Seamless support for Light and Dark modes.
+
+---
+
+## 🚀 Installation
+
+Install the library and its peer dependency:
+
+```bash
+npm install react-native-leaflet-kit react-native-webview
+# or
+yarn add react-native-leaflet-kit react-native-webview
+```
+
+---
+
+## 🛠️ Quick Start
+
+Wrap your map elements inside the `MapContainer` and add layers as needed.
+
+```tsx
+import { MapContainer, TileLayer, Marker, Polyline } from '@/components/map-library';
+
+const MyMap = () => {
+    return (
+        <MapContainer 
+            center={{ lat: 28.7041, lng: 77.1025 }} 
+            zoom={13}
+            isDark={true}
+            fitBounds={true}
+        >
+            <TileLayer />
+            
+            <Marker 
+                id="station-1"
+                position={{ lat: 28.7041, lng: 77.1025 }}
+                title="Delhi Station"
+            />
+        </MapContainer>
+    );
+};
+```
+
+### 🏎️ Using the Metride Wrapper
+For the most streamlined experience, use the `MetrideMap` component which handles all boilerplate:
+
+```tsx
+import { MetrideMap } from '@/components/metro/MetrideMap';
+
+<MetrideMap 
+  markers={myStations}
+  paths={myRouteLines}
+  userMarker={currentUserLocation}
+  fitBounds={true}
+  isDark={true}
+/>
+```
+
+---
+
+---
+
+## 🧩 Component Documentation
+
+### 1. `<MapContainer />`
+The primary wrapper that initializes the WebView and provides the Map Context.
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `center` | `LatLng` | - | Initial center coordinates `{ lat, lng }`. |
+| `zoom` | `number` | `13` | Initial zoom level. |
+| `isDark` | `boolean` | `false` | Toggles dark mode tiles filter. |
+| `backgroundColor` | `string` | `#ffffff` | WebView background color. |
+| `fitBounds` | `boolean` | `false` | Enables automatic framing of the map content. |
+| `onMapReady` | `() => void` | - | Called when the map is fully loaded. |
+| `onUserGesture`| `() => void` | - | Called when the user manually pans or zooms (disables fitBounds). |
+| `onMapClick` | `(pos: LatLng) => void` | - | Called when the map is tapped. |
+
+**Example:**
+```tsx
+<MapContainer 
+  ref={mapRef}
+  center={{ lat: 28.6139, lng: 77.2090 }}
+  onMapClick={(pos) => console.log('Tapped at:', pos)}
+>
+  {/* Children go here */}
+</MapContainer>
+```
+
+---
+
+### 2. `<TileLayer />`
+Defines the source of the map tiles.
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `url` | `string` | `OSM Standard` | Standard Tile URL pattern. Defaults to OpenStreetMap. |
+| `attribution` | `string` | - | Small text displayed at footer for credits. |
+
+**Example (Default):**
+```tsx
+<TileLayer />
+```
+
+**Example (Custom Source):**
+```tsx
+<TileLayer 
+  url="https://{s}.tile.thunderforest.com/transport/{z}/{x}/{y}.png"
+  attribution='&copy; Thunderforest'
+/>
+```
+
+---
+
+### 3. `<Marker />`
+Adds a standard or custom icon marker to the map.
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `id` | `string` | - | Unique identifier for the marker. |
+| `position` | `LatLng` | - | Coordinates for placement. |
+| `title` | `string` | - | Text shown in a popup when tapped. |
+| `icon` | `string` | - | Can be an Emoji, remote URL, or HTML string. |
+| `size` | `[number, number]` | `[32, 32]` | Icon dimensions. |
+
+**Example:**
+```tsx
+<Marker 
+  id="main-pin"
+  position={{ lat: 28.6139, lng: 77.2090 }}
+  icon="⭐"
+  title="New Delhi Capital"
+  size={[40, 40]}
+/>
+```
+
+---
+
+### 4. `<Polyline />`
+Draws paths or routes on the map.
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `id` | `string` | - | Unique identifier. |
+| `positions` | `LatLng[]` | - | Array of coordinates defining the path. |
+| `color` | `string` | `#3388ff` | Hex or RGBA color. |
+| `weight` | `number` | `3` | Thickness of the line. |
+| `opacity` | `number` | `1.0` | Transparency (0 to 1). |
+| `dashArray` | `string` | - | CSS dash pattern (e.g. "5, 10"). |
+| `isAnimated` | `boolean` | `false` | Enable a flowing route animation. |
+
+**Regular Example:**
+```tsx
+<Polyline 
+  id="route-1"
+  positions={pathCoordinates}
+  color="#e74c3c"
+  weight={5}
+/>
+```
+
+**Animated (Flowing) Example:**
+```tsx
+<Polyline 
+  id="moving-route"
+  positions={pathCoordinates}
+  color="#2ecc71"
+  isAnimated={true}
+/>
+```
+
+---
+
+### 5. `<UserMarker />`
+A specialized premium component for real-time user positioning.
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `position` | `LatLng` | Real-time coordinates. |
+| `heading` | `number` | Heading in degrees (0 = North). |
+| `accuracy` | `number` | Circular accuracy radius in meters. |
+| `markerColor`| `string` | The primary theme color for the pulse and cone. |
+| `style` | `UserLocationStyle` | Deep customization (see below). |
+
+**Example:**
+```tsx
+<UserMarker 
+  position={userPos}
+  heading={90}
+  accuracy={25}
+  markerColor="#2ecc71"
+  style={{
+    markerSize: 15,
+    showPulse: true,
+    pulseMaxScale: 3,
+    showDirectionCone: true,
+    coneOpacity: 0.4
+  }}
+/>
+```
+
+---
+
+### 6. `<Popup />`
+Enables rich HTML content and professional styling inside a `Marker`. Must be a child of `<Marker />`.
+
+| Prop | Type | Default | Description |
+| :--- | :--- | :--- | :--- |
+| `content` | `string` | - | (Optional) HTML string content. |
+| `style` | `PopupStyle`| - | Nested object for visual styling (see below). |
+| `autoPan` | `boolean` | `true` | Whether the map should pan to fit the popup. |
+| `offset` | `[number, number]` | `[0, 7]` | Tip-to-anchor offset. |
+
+#### `PopupStyle` Properties
+| Property | Type | Description |
+| :--- | :--- | :--- |
+| `backgroundColor` | `string` | Popup background color. |
+| `textColor` | `string` | Text color. |
+| `borderRadius` | `number` | Corner roundness in pixels. |
+| `padding` | `number` | Inner spacing in pixels. |
+| `fontSize` | `number` | Text size in pixels. |
+| `fontWeight` | `string/number`| Text weight. |
+| `maxWidth` | `number` | Maximum width of the popup. |
+| `closeButtonColor`| `string` | Color of the close 'X' button. |
+
+**Example:**
+```tsx
+<Marker id="premium-shop" position={pos}>
+  <Popup 
+    style={{
+      backgroundColor: "#2c3e50",
+      textColor: "#ecf0f1",
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 14
+    }}
+    offset={[0, 10]}
+  >
+    <b>Metride Premium Hub</b><br/>
+    Authorized Reseller
+  </Popup>
+</Marker>
+```
+
+---
+
+### 7. `<Circle />`
+Highlights a circular radius on the map.
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `id` | `string` | Unique ID. |
+| `center` | `LatLng` | Center of the circle. |
+| `radius` | `number` | Radius in meters. |
+| `color` | `string` | Border color. |
+| `fillColor` | `string` | Fill color. |
+
+**Example:**
+```tsx
+<Circle 
+  id="danger-zone"
+  center={{ lat: 28.7041, lng: 77.1025 }}
+  radius={500}
+  color="red"
+  fillColor="rgba(255, 0, 0, 0.2)"
+/>
+```
+
+---
+
+### 8. `<Polygon />`
+Defines a specific area or boundary.
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `id` | `string` | Unique ID. |
+| `positions` | `LatLng[]` | Array of coordinates defining the area. |
+| `color` | `string` | Border color. |
+| `fillColor` | `string` | Fill color. |
+
+**Example:**
+```
+
+---
+
+### 9. `<GeoJSON />`
+The standard for complex spatial data. Renders entire datasets (lines, points, polygons) from a single JSON.
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `id` | `string` | Unique ID. |
+| `data` | `object` | The GeoJSON object/file content. |
+| `style` | `object` | Styling function or object for the features. |
+
+**Example:**
+```tsx
+<GeoJSON 
+  id="metro-network"
+  data={delhiMetroGeoJSON}
+  style={{ color: '#ff7800', weight: 5, opacity: 0.65 }}
+/>
+```
+
+---
+
+### 10. `<MarkerCluster />`
+Optimizes performance and readability by grouping nearby markers.
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `options` | `object` | Leaflet.markercluster configuration. |
+| `children` | `ReactNode` | The markers to be clustered. |
+
+**Example:**
+```tsx
+<MarkerCluster options={{ maxClusterRadius: 80 }}>
+  {stations.map(s => <Marker key={s.id} {...s} />)}
+</MarkerCluster>
+```
+
+---
+
+### 11. `<Heatmap />`
+Visualizes data density (e.g., peak hour congestion).
+
+| Prop | Type | Description |
+| :--- | :--- | :--- |
+| `id` | `string` | Unique ID. |
+| `points` | `LatlngIntensity[]` | Array of `{ lat, lng, intensity }`. |
+| `radius` | `number` | Size of the heat points. |
+| `blur` | `number` | Softness of the heat edges. |
+
+**Example:**
+```tsx
+<Heatmap 
+  id="congestion-map"
+  points={trafficData}
+  radius={30}
+  blur={15}
+/>
+```
+
+---
+
+## 🎨 Professional Customization (UserLocationStyle)
+
+| Property | Default | Description |
+| :--- | :--- | :--- |
+| `markerSize` | `12` | Inner dot size in pixels. |
+| `showPulse` | `true` | Toggles the radiating pulse animation. |
+| `pulseDuration` | `2.5s` | Speed of the pulse animation. |
+| `pulseMaxScale` | `2.5` | How large the pulse expands. |
+| `showDirectionCone`| `true` | Toggles the field-of-view cone. |
+| `coneWidth` | `60` | Width of the direction cone. |
+| `coneHeight` | `50` | Length of the direction cone. |
+
+---
+
+## 🎥 Camera & Interaction Model
+
+Our map utilizes a professional state-driven camera system designed to balance automation with user control.
+
+### 1. The Priority Priority Engine
+When `fitBounds` is active, the map follows a context-aware hierarchy during initial load:
+-   **Priority 1: The Route (Hero)** - If markers or paths exist, the map frames them perfectly while excluding the user (if distant) to keep the journey as the main focus.
+-   **Priority 2: The User (Fallback)** - If the map is empty, it centers on the user at a comfortable street-level zoom (Level 15).
+
+### 2. Gesture-Aware Automation
+-   **Auto-Pause**: If a user performs a manual gesture (pan, zoom, pinch), the map **immediately disables** automatic camera movements to prevent "fighting" the user.
+-   **Recenter Pattern**: Developers can use the `onUserGesture` callback to show a "Recenter" button. When clicked, setting `fitBounds={true}` will snap the camera back to the optimal view.
+
+### 3. Debounced Handshake
+To prevent "jitter" during data loading, the camera wait **200ms** after the first piece of data arrives before performing the initial fit. This ensures that all markers and polylines have registered through the bridge for a perfect single-frame fit.
+
+---
+
+## 📜 License
+
+MIT License
+
+Copyright (c) 2026 Ashish Pradhan
+
+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/dist/components/Circle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CircleProps } from '../types';
+export declare const Circle: React.FC<CircleProps>;
+//# sourceMappingURL=Circle.d.ts.map

package/dist/components/Circle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.d.ts","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAEvC,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAcxC,CAAC"}

package/dist/components/Circle.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useMap } from '../context/MapContext';
+export const Circle = (props) => {
+    const { registerLayer, unregisterLayer, updateLayer } = useMap();
+    const { id, center, radius, color, fillColor, fillOpacity, weight } = props;
+    useEffect(() => {
+        registerLayer('circle', id, { center, radius, color, fillColor, fillOpacity, weight });
+        return () => unregisterLayer('circle', id);
+    }, []);
+    useEffect(() => {
+        updateLayer('circle', id, { center, radius, color, fillColor, fillOpacity, weight });
+    }, [id, center.lat, center.lng, radius, color, fillColor, fillOpacity, weight]);
+    return null;
+};
+//# sourceMappingURL=Circle.js.map

package/dist/components/Circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Circle.js","sourceRoot":"","sources":["../../src/components/Circle.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAG/C,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,KAAK,EAAE,EAAE;IACnD,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;IACjE,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;IAE5E,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;QACvF,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACX,WAAW,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IACzF,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,CAAC,CAAC,CAAC;IAEhF,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC"}

package/dist/components/GeoJSON.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { GeoJSONProps } from '../types';
+export declare const GeoJSON: React.FC<GeoJSONProps>;
+//# sourceMappingURL=GeoJSON.d.ts.map

package/dist/components/GeoJSON.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoJSON.d.ts","sourceRoot":"","sources":["../../src/components/GeoJSON.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAa1C,CAAC"}

package/dist/components/GeoJSON.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useMap } from '../context/MapContext';
+export const GeoJSON = ({ id, data, style, onPress }) => {
+    const { registerLayer, unregisterLayer, updateLayer } = useMap();
+    useEffect(() => {
+        registerLayer('geojson', id, { data, style });
+        return () => unregisterLayer('geojson', id);
+    }, []);
+    useEffect(() => {
+        updateLayer('geojson', id, { data, style });
+    }, [id, data, style]);
+    return null;
+};
+//# sourceMappingURL=GeoJSON.js.map

package/dist/components/GeoJSON.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeoJSON.js","sourceRoot":"","sources":["../../src/components/GeoJSON.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAG/C,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC5E,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;QAC9C,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACX,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,CAAC;IAChD,CAAC,EAAE,CAAC,EAAE,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC"}

package/dist/components/Heatmap.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HeatmapProps } from '../types';
+export declare const Heatmap: React.FC<HeatmapProps>;
+//# sourceMappingURL=Heatmap.d.ts.map

package/dist/components/Heatmap.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.d.ts","sourceRoot":"","sources":["../../src/components/Heatmap.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAa1C,CAAC"}

package/dist/components/Heatmap.js

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useMap } from '../context/MapContext';
+export const Heatmap = ({ id, points, radius, blur, max }) => {
+    const { registerLayer, unregisterLayer, updateLayer } = useMap();
+    useEffect(() => {
+        registerLayer('heatmap', id, { points, radius, blur, max });
+        return () => unregisterLayer('heatmap', id);
+    }, []);
+    useEffect(() => {
+        updateLayer('heatmap', id, { points, radius, blur, max });
+    }, [id, points, radius, blur, max]);
+    return null;
+};
+//# sourceMappingURL=Heatmap.js.map

package/dist/components/Heatmap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heatmap.js","sourceRoot":"","sources":["../../src/components/Heatmap.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAG/C,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,EAAE,EAAE;IACjF,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;IAEjE,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;QAC5D,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;IAChD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACX,WAAW,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAC;IAC9D,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,GAAG,CAAC,CAAC,CAAC;IAEpC,OAAO,IAAI,CAAC;AAChB,CAAC,CAAC"}

package/dist/components/MapContainer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { MapContainerProps, LatLng } from '../types';
+export interface MapContainerHandles {
+    fitBounds: (options?: any) => void;
+    centerToUserPosition: (position: LatLng) => void;
+    isUserPositionCentered: (position: LatLng) => boolean;
+}
+export declare const MapContainer: React.ForwardRefExoticComponent<MapContainerProps & React.RefAttributes<MapContainerHandles>>;
+//# sourceMappingURL=MapContainer.d.ts.map

package/dist/components/MapContainer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapContainer.d.ts","sourceRoot":"","sources":["../../src/components/MapContainer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAMxE,OAAO,EAAE,iBAAiB,EAA6B,MAAM,EAAE,MAAM,UAAU,CAAC;AAGhF,MAAM,WAAW,mBAAmB;IAChC,SAAS,EAAE,CAAC,OAAO,CAAC,EAAE,GAAG,KAAK,IAAI,CAAC;IACnC,oBAAoB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,sBAAsB,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,OAAO,CAAC;CACzD;AAED,eAAO,MAAM,YAAY,+FA6GvB,CAAC"}

package/dist/components/MapContainer.js

@@ -0,0 +1,86 @@
+import React, { useState, useRef, useCallback } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { WebView } from 'react-native-webview';
+import MapContext from '../context/MapContext';
+import { LEAFLET_HTML_CONTENT } from '../templates/LeafletHTML';
+import { isEqual } from '../utils/deepEqual';
+import { MapViewEvents } from '../types';
+export const MapContainer = React.forwardRef(({ center, zoom = 13, isDark = false, backgroundColor = '#ffffff', dragEnabled = true, zoomEnabled = true, fitBounds = false, style, children, onMapReady, onMapClick, onMarkerClick, onUserGesture, onMoveEnd, }, ref) => {
+    const webViewRef = useRef(null);
+    const [isReady, setIsReady] = useState(false);
+    const [mapCenter, setMapCenter] = useState(center || null);
+    const sendMessage = useCallback((payload) => {
+        webViewRef.current?.injectJavaScript(`window.postMessage(${JSON.stringify(payload)}, '*');`);
+    }, []);
+    React.useImperativeHandle(ref, () => ({
+        fitBounds: (options) => {
+            sendMessage({ type: 'fitBounds', options });
+        },
+        centerToUserPosition: (pos) => {
+            sendMessage({ type: 'center', position: pos });
+        },
+        isUserPositionCentered: (pos) => {
+            if (!mapCenter)
+                return false;
+            return isEqual(mapCenter, pos);
+        }
+    }));
+    const handleMessage = (event) => {
+        try {
+            const data = JSON.parse(event.nativeEvent.data);
+            switch (data.event) {
+                case MapViewEvents.MAP_READY:
+                    setIsReady(true);
+                    sendMessage({ type: 'init', center, zoom, isDark, background: backgroundColor, fitBounds });
+                    onMapReady?.();
+                    break;
+                case MapViewEvents.ON_MOVE_END:
+                    setMapCenter(data.payload.mapCenterPosition);
+                    onMoveEnd?.(data.payload.mapCenterPosition, data.payload.zoom, data.payload.bounds);
+                    break;
+                case MapViewEvents.ON_MAP_CLICK:
+                    onMapClick?.(data.payload.latlng);
+                    break;
+                case MapViewEvents.ON_MARKER_CLICK:
+                    onMarkerClick?.(data.payload.id);
+                    break;
+                case MapViewEvents.ON_USER_GESTURE:
+                    onUserGesture?.();
+                    break;
+            }
+        }
+        catch (e) {
+            console.error('Error parsing map message:', e);
+        }
+    };
+    const registerLayer = (type, id, props) => {
+        sendMessage({ type, id, ...props });
+    };
+    const unregisterLayer = (type, id) => {
+        sendMessage({ type: `remove_${type}`, id });
+    };
+    const updateLayer = (type, id, props) => {
+        sendMessage({ type, id, ...props });
+    };
+    React.useEffect(() => {
+        if (isReady) {
+            sendMessage({ type: 'theme', isDark, background: backgroundColor });
+            sendMessage({ type: 'fit_bounds_toggle', enabled: fitBounds });
+        }
+    }, [isDark, backgroundColor, fitBounds, isReady]);
+    return (<MapContext.Provider value={{ registerLayer, unregisterLayer, updateLayer, sendMessage }}>
+            <View style={[styles.container, style]}>
+                <WebView ref={webViewRef} source={{ html: LEAFLET_HTML_CONTENT }} style={[styles.webview, { backgroundColor: backgroundColor || 'transparent' }]} containerStyle={{ backgroundColor: backgroundColor || 'transparent' }} onMessage={handleMessage} javaScriptEnabled={true} domStorageEnabled={true} startInLoadingState={true} mixedContentMode="always" originWhitelist={['*']} bounces={false} scrollEnabled={false} overScrollMode="never"/>
+                {isReady && children}
+            </View>
+        </MapContext.Provider>);
+});
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    webview: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=MapContainer.js.map

package/dist/components/MapContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MapContainer.js","sourceRoot":"","sources":["../../src/components/MapContainer.tsx"],"names":[],"mappings":"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"}

package/dist/components/Marker.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MarkerProps, PopupProps } from '../types';
+export declare const useMarker: () => {
+    setPopupOptions: (options: Partial<PopupProps>) => void;
+} | null;
+export declare const Marker: React.FC<MarkerProps>;
+//# sourceMappingURL=Marker.d.ts.map

package/dist/components/Marker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.d.ts","sourceRoot":"","sources":["../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAE9E,OAAO,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAMnD,eAAO,MAAM,SAAS;qBAHD,CAAC,OAAO,EAAE,OAAO,CAAC,UAAU,CAAC,KAAK,IAAI;QAGH,CAAC;AAEzD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAoBxC,CAAC"}

package/dist/components/Marker.js

@@ -0,0 +1,20 @@
+import React, { useEffect, useState, createContext, useContext } from 'react';
+import { useMap } from '../context/MapContext';
+const MarkerContext = createContext(null);
+export const useMarker = () => useContext(MarkerContext);
+export const Marker = ({ id, position, icon, size, anchor, title, children }) => {
+    const { registerLayer, unregisterLayer, updateLayer } = useMap();
+    const [popupOptions, setPopupOptions] = useState({});
+    useEffect(() => {
+        registerLayer('marker', id, { position, icon, size, anchor, title, ...popupOptions });
+        return () => unregisterLayer('marker', id);
+    }, []);
+    useEffect(() => {
+        updateLayer('marker', id, { position, icon, size, anchor, title, ...popupOptions });
+    }, [position.lat, position.lng, icon, size, anchor, title, JSON.stringify(popupOptions)]);
+    const contextValue = React.useMemo(() => ({ setPopupOptions }), [setPopupOptions]);
+    return (<MarkerContext.Provider value={contextValue}>
+            {children}
+        </MarkerContext.Provider>);
+};
+//# sourceMappingURL=Marker.js.map

package/dist/components/Marker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Marker.js","sourceRoot":"","sources":["../../src/components/Marker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAG/C,MAAM,aAAa,GAAG,aAAa,CAEzB,IAAI,CAAC,CAAC;AAEhB,MAAM,CAAC,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE;IACnG,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,GAAG,MAAM,EAAE,CAAC;IACjE,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAsB,EAAE,CAAC,CAAC;IAE1E,SAAS,CAAC,GAAG,EAAE;QACX,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;QACtF,OAAO,GAAG,EAAE,CAAC,eAAe,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC;IAC/C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACX,WAAW,CAAC,QAAQ,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,YAAY,EAAE,CAAC,CAAC;IACxF,CAAC,EAAE,CAAC,QAAQ,CAAC,GAAG,EAAE,QAAQ,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;IAE1F,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,EAAE,eAAe,EAAE,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAC;IAEnF,OAAO,CACH,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,YAAY,CAAC,CACxC;YAAA,CAAC,QAAQ,CACb;QAAA,EAAE,aAAa,CAAC,QAAQ,CAAC,CAC5B,CAAC;AACN,CAAC,CAAC"}