@geekles007/motion-map-components 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Tondji
+
+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,234 @@
+# React Map Components
+
+[![npm version](https://badge.fury.io/js/@geekles%2Freact-map-components.svg)](https://www.npmjs.com/package/@geekles/react-map-components)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![TypeScript](https://img.shields.io/badge/TypeScript-5.4-blue.svg)](https://www.typescriptlang.org/)
+
+Modern, lightweight React components for interactive maps built on top of Leaflet.
+
+## ✨ Features
+
+- 🗺️ **Easy to use** - Simple, declarative API for creating maps
+- 📦 **Lightweight** - Tree-shakeable, only import what you need
+- 🎨 **Customizable** - Full control over styling and behavior
+- 📱 **Responsive** - Works great on desktop and mobile
+- 🔧 **TypeScript** - Full type support out of the box
+- ⚛️ **React 18/19** - Built for modern React with hooks
+
+## 📦 Installation
+
+```bash
+# npm
+npm install @geekles/react-map-components
+
+# yarn
+yarn add @geekles/react-map-components
+
+# pnpm
+pnpm add @geekles/react-map-components
+```
+
+## 🚀 Quick Start
+
+```tsx
+import { MapContainer, TileLayer, Marker, Popup } from '@geekles/react-map-components'
+import '@geekles/react-map-components/styles.css'
+
+function App() {
+  return (
+    <MapContainer
+      center={[51.505, -0.09]}
+      zoom={13}
+      style={{ height: '400px', width: '100%' }}
+    >
+      <TileLayer
+        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      />
+      <Marker position={[51.505, -0.09]}>
+        <Popup>
+          Hello! I'm a popup.
+        </Popup>
+      </Marker>
+    </MapContainer>
+  )
+}
+```
+
+## 📚 Components
+
+### MapContainer
+
+The main container component for your map.
+
+```tsx
+<MapContainer
+  center={[lat, lng]}
+  zoom={13}
+  minZoom={1}
+  maxZoom={18}
+  scrollWheelZoom={true}
+  style={{ height: '100vh' }}
+>
+  {/* children */}
+</MapContainer>
+```
+
+### TileLayer
+
+Add tile layers to your map.
+
+```tsx
+<TileLayer
+  url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+  attribution="© OpenStreetMap"
+  maxZoom={19}
+/>
+```
+
+### Marker
+
+Add markers to your map.
+
+```tsx
+<Marker 
+  position={[51.505, -0.09]}
+  draggable={false}
+  eventHandlers={{
+    click: () => console.log('Marker clicked!')
+  }}
+/>
+```
+
+### Popup
+
+Add popups to markers or the map.
+
+```tsx
+<Marker position={[51.505, -0.09]}>
+  <Popup>
+    <h3>My Location</h3>
+    <p>This is where I am!</p>
+  </Popup>
+</Marker>
+```
+
+### GeoJSON
+
+Render GeoJSON data on your map.
+
+```tsx
+<GeoJSON 
+  data={geojsonData}
+  style={{ color: 'blue', weight: 2 }}
+  onEachFeature={(feature, layer) => {
+    layer.bindPopup(feature.properties.name)
+  }}
+/>
+```
+
+## 🪝 Hooks
+
+### useMap
+
+Access the map instance from any child component.
+
+```tsx
+import { useMap } from '@geekles/react-map-components'
+
+function MyComponent() {
+  const map = useMap()
+  
+  const flyToLocation = () => {
+    map.flyTo([51.505, -0.09], 14)
+  }
+  
+  return <button onClick={flyToLocation}>Go to London</button>
+}
+```
+
+### useMapEvents
+
+Subscribe to map events.
+
+```tsx
+import { useMapEvents } from '@geekles/react-map-components'
+
+function LocationLogger() {
+  useMapEvents({
+    click: (e) => {
+      console.log('Clicked at:', e.latlng)
+    },
+    zoomend: () => {
+      console.log('Zoom changed')
+    }
+  })
+  
+  return null
+}
+```
+
+## 🎨 Styling
+
+Import the default styles:
+
+```tsx
+import '@geekles/react-map-components/styles.css'
+```
+
+Or customize with your own CSS:
+
+```css
+.leaflet-container {
+  height: 100%;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.leaflet-popup-content-wrapper {
+  border-radius: 12px;
+}
+```
+
+## 🔧 TypeScript
+
+All components are fully typed. Import types as needed:
+
+```tsx
+import type { 
+  MapContainerProps, 
+  MarkerProps, 
+  LatLngExpression 
+} from '@geekles/react-map-components'
+```
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+```bash
+# Clone the repo
+git clone https://github.com/geekles/react-map-components.git
+cd react-map-components
+
+# Install dependencies
+pnpm install
+
+# Start Storybook for development
+pnpm dev
+
+# Run tests
+pnpm test
+
+# Build the library
+pnpm build
+```
+
+## 📝 License
+
+MIT © [geekles](https://github.com/geekles)
+
+## 🙏 Acknowledgments
+
+- Built on top of [Leaflet](https://leafletjs.com/)
+- Inspired by [react-leaflet](https://react-leaflet.js.org/)

package/dist/index.cjs

@@ -0,0 +1,3 @@
+'use strict';var react=require('react'),x=require('leaflet'),jsxRuntime=require('react/jsx-runtime'),reactDom=require('react-dom');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var x__default=/*#__PURE__*/_interopDefault(x);var g=react.createContext(null);function E({children:e}){let[t,o]=react.useState(null);return jsxRuntime.jsx(g.Provider,{value:{map:t,setMap:o},children:e})}function L(){let e=react.useContext(g);if(!e)throw new Error("useMapContext must be used within a MapProvider or MapContainer");return e}x__default.default.Icon&&x__default.default.Icon.Default&&x__default.default.Icon.Default.prototype&&delete x__default.default.Icon.Default.prototype._getIconUrl;x__default.default.Icon.Default.mergeOptions({iconRetinaUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png",iconUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png",shadowUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png"});function F({center:e,zoom:t,minZoom:o,maxZoom:u,scrollWheelZoom:n=true,dragging:i=true,doubleClickZoom:s=true,zoomControl:f=true,style:r,className:a,children:p,whenReady:l,options:c,setMapReady:y}){let d=react.useRef(null),{setMap:M}=L(),P=react.useRef(null);return react.useEffect(()=>{if(!d.current||P.current)return;let C=x__default.default.map(d.current,{center:e,zoom:t,minZoom:o,maxZoom:u,scrollWheelZoom:n,dragging:i,doubleClickZoom:s,zoomControl:f,...c});return P.current=C,M(C),y(true),l&&l(C),()=>{C.remove(),P.current=null,M(null),y(false);}},[]),react.useEffect(()=>{P.current&&P.current.setView(e,t);},[e,t]),jsxRuntime.jsx("div",{ref:d,style:{height:"100%",width:"100%",...r},className:a,children:p})}function T(e){let[t,o]=react.useState(false);return jsxRuntime.jsx(E,{children:jsxRuntime.jsx(F,{...e,setMapReady:o,children:t?e.children:null})})}function m(){let{map:e}=L();if(!e)throw new Error("Map instance is not available. Make sure this hook is used within a MapContainer and the map has been initialized.");return e}function J({url:e,attribution:t,maxZoom:o,minZoom:u,opacity:n,zIndex:i,options:s}){let f=m(),r=react.useRef(null);return react.useEffect(()=>{if(!f)return;let a=x__default.default.tileLayer(e,{attribution:t,maxZoom:o,minZoom:u,opacity:n,zIndex:i,...s});return a.addTo(f),r.current=a,()=>{a.remove(),r.current=null;}},[f,e,t,o,u,n,i,s]),null}var N=react.createContext({marker:null});function v(){let{marker:e}=react.useContext(N);return e}function b({position:e,draggable:t=false,opacity:o,alt:u,eventHandlers:n,children:i,options:s}){let f=m(),[r,a]=react.useState(null);return react.useEffect(()=>{if(!f)return;let p=x__default.default.marker(e,{draggable:t,opacity:o,alt:u,...s});return p.addTo(f),a(p),()=>{p.remove(),a(null);}},[f]),react.useEffect(()=>{r&&r.setLatLng(e);},[e,r]),react.useEffect(()=>{r&&(t?r.dragging?.enable():r.dragging?.disable());},[t,r]),react.useEffect(()=>{r&&o!==void 0&&r.setOpacity(o);},[o,r]),react.useEffect(()=>{if(!r||!n)return;let p=Object.keys(n);return p.forEach(l=>{let c=n[l];c&&r.on(l,c);}),()=>{p.forEach(l=>{let c=n[l];c&&r.off(l,c);});}},[n,r]),jsxRuntime.jsx(N.Provider,{value:{marker:r},children:i})}function w({position:e,children:t,maxWidth:o=300,minWidth:u=50,autoClose:n=true,closeOnClick:i=true,className:s,options:f}){let r=m(),a=v(),p=react.useRef(null),[l,c]=react.useState(null);return react.useEffect(()=>{if(!r)return;let y=document.createElement("div");c(y);let d={maxWidth:o,minWidth:u,autoClose:n,closeOnClick:i,className:s,...f},M=!a&&e?x__default.default.popup(d).setLatLng(e):x__default.default.popup(d);return M.setContent(y),p.current=M,a&&a.bindPopup(M),()=>{a&&a.unbindPopup(),M.remove(),p.current=null,c(null);}},[r,a]),react.useEffect(()=>{p.current&&l&&r&&(a||e)&&p.current.openOn(r);},[l,r,a,e]),react.useEffect(()=>{p.current&&e&&!a&&r&&(p.current.setLatLng(e),p.current.isOpen()||p.current.openOn(r));},[e,a,r]),l?reactDom.createPortal(t,l):null}function D({data:e,style:t,onEachFeature:o,pointToLayer:u,filter:n,options:i}){let s=m(),f=react.useRef(null);return react.useEffect(()=>{if(!s||!e)return;let r=x__default.default.geoJSON(e,{style:t,onEachFeature:o,pointToLayer:u,filter:n,...i});return r.addTo(s),f.current=r,()=>{r.remove(),f.current=null;}},[s,e,t,o,u,n,i]),react.useEffect(()=>{f.current&&e&&(f.current.clearLayers(),f.current.addData(e));},[e]),null}function oe(e){let t=m();react.useEffect(()=>{if(!t||!e)return;let o=Object.keys(e);return o.forEach(u=>{let n=e[u];n&&t.on(u,n);}),()=>{o.forEach(u=>{let n=e[u];n&&t.off(u,n);});}},[t,e]);}
+exports.GeoJSON=D;exports.MapContainer=T;exports.MapProvider=E;exports.Marker=b;exports.Popup=w;exports.TileLayer=J;exports.useMap=m;exports.useMapContext=L;exports.useMapEvents=oe;exports.useMarker=v;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/MapContext.tsx","../src/components/MapContainer/MapContainer.tsx","../src/hooks/useMap.ts","../src/components/TileLayer/TileLayer.tsx","../src/components/Marker/Marker.tsx","../src/components/Popup/Popup.tsx","../src/components/GeoJSON/GeoJSON.tsx","../src/hooks/useMapEvents.ts"],"names":["MapContext","createContext","MapProvider","children","map","setMap","useState","jsx","useMapContext","context","useContext","L","MapContainerInner","center","zoom","minZoom","maxZoom","scrollWheelZoom","dragging","doubleClickZoom","zoomControl","style","className","whenReady","options","setMapReady","containerRef","useRef","mapRef","useEffect","MapContainer","props","mapReady","useMap","TileLayer","url","attribution","opacity","zIndex","tileLayerRef","tileLayer","MarkerContext","useMarker","marker","Marker","position","draggable","alt","eventHandlers","setMarker","markerInstance","eventNames","eventName","handler","Popup","maxWidth","minWidth","autoClose","closeOnClick","popupRef","container","setContainer","containerElement","popupOptions","popup","createPortal","GeoJSON","data","onEachFeature","pointToLayer","filter","geoJsonRef","geoJson","useMapEvents","handlers"],"mappings":"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","file":"index.cjs","sourcesContent":["import { createContext, useContext, useState, type ReactNode } from 'react'\nimport type { Map } from 'leaflet'\nimport type { MapContextValue } from '../types'\n\nconst MapContext = createContext<MapContextValue | null>(null)\n\nexport interface MapProviderProps {\n  children: ReactNode\n}\n\n/**\n * Provider component for sharing map instance across components\n */\nexport function MapProvider({ children }: MapProviderProps) {\n  const [map, setMap] = useState<Map | null>(null)\n\n  return (\n    <MapContext.Provider value={{ map, setMap }}>\n      {children}\n    </MapContext.Provider>\n  )\n}\n\n/**\n * Hook to access the map context\n * @throws Error if used outside of MapProvider\n */\nexport function useMapContext(): MapContextValue {\n  const context = useContext(MapContext)\n  \n  if (!context) {\n    throw new Error('useMapContext must be used within a MapProvider or MapContainer')\n  }\n  \n  return context\n}\n\nexport { MapContext }\n","import { useEffect, useRef, useState } from 'react'\nimport L from 'leaflet'\nimport type { Map } from 'leaflet'\nimport { MapProvider, useMapContext } from '../../context/MapContext'\nimport type { MapContainerProps } from '../../types'\n\n// Fix for default marker icons in Leaflet with bundlers\n// import 'leaflet/dist/leaflet.css' // Commented out for testing\n\n// Fix for default marker icons in Leaflet with bundlers\nif (L.Icon && L.Icon.Default && L.Icon.Default.prototype) {\n  delete (L.Icon.Default.prototype as any)._getIconUrl\n}\nL.Icon.Default.mergeOptions({\n  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',\n  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',\n  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',\n})\n\ninterface MapContainerInnerProps extends MapContainerProps {\n  setMapReady: (ready: boolean) => void\n}\n\nfunction MapContainerInner({\n  center,\n  zoom,\n  minZoom,\n  maxZoom,\n  scrollWheelZoom = true,\n  dragging = true,\n  doubleClickZoom = true,\n  zoomControl = true,\n  style,\n  className,\n  children,\n  whenReady,\n  options,\n  setMapReady,\n}: MapContainerInnerProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { setMap } = useMapContext()\n  const mapRef = useRef<Map | null>(null)\n\n  useEffect(() => {\n    if (!containerRef.current || mapRef.current) return\n\n    // Create the map\n    const map = L.map(containerRef.current, {\n      center,\n      zoom,\n      minZoom,\n      maxZoom,\n      scrollWheelZoom,\n      dragging,\n      doubleClickZoom,\n      zoomControl,\n      ...options,\n    })\n\n    mapRef.current = map\n    setMap(map)\n    setMapReady(true)\n\n    // Call whenReady callback\n    if (whenReady) {\n      whenReady(map)\n    }\n\n    // Cleanup\n    return () => {\n      map.remove()\n      mapRef.current = null\n      setMap(null)\n      setMapReady(false)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update view when center or zoom changes\n  useEffect(() => {\n    if (mapRef.current) {\n      mapRef.current.setView(center, zoom)\n    }\n  }, [center, zoom])\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        height: '100%',\n        width: '100%',\n        ...style,\n      }}\n      className={className}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * Main container component for creating a Leaflet  map\n * \n * @example\n * ```tsx\n * <MapContainer\n *   center={[51.505, -0.09]}\n *   zoom={13}\n *   style={{ height: '400px' }}\n * >\n *   <TileLayer url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\" />\n *   <Marker position={[51.505, -0.09]} />\n * </MapContainer>\n * ```\n */\nexport function MapContainer(props: MapContainerProps) {\n  const [mapReady, setMapReady] = useState(false)\n\n  return (\n    <MapProvider>\n      <MapContainerInner {...props} setMapReady={setMapReady}>\n        {mapReady ? props.children : null}\n      </MapContainerInner>\n    </MapProvider>\n  )\n}\n","import type { Map } from 'leaflet'\nimport { useMapContext } from '../context/MapContext'\n\n/**\n * Hook to access the Leaflet map instance\n * Must be used within a MapContainer or MapProvider\n * \n * @example\n * ```tsx\n * function MyComponent() {\n *   const map = useMap()\n *   \n *   const flyToLocation = () => {\n *     map.flyTo([51.505, -0.09], 14)\n *   }\n *   \n *   return <button onClick={flyToLocation}>Go to London</button>\n * }\n * ```\n * \n * @returns The Leaflet map instance\n * @throws Error if map is not yet initialized or used outside MapContainer\n */\nexport function useMap(): Map {\n  const { map } = useMapContext()\n  \n  if (!map) {\n    throw new Error(\n      'Map instance is not available. Make sure this hook is used within a MapContainer ' +\n      'and the map has been initialized.'\n    )\n  }\n  \n  return map\n}\n","import { useEffect, useRef } from 'react'\nimport L from 'leaflet'\nimport type { TileLayer as LeafletTileLayer } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport type { TileLayerProps } from '../../types'\n\n/**\n * Component for adding tile layers to the map\n * \n * @example\n * ```tsx\n * <TileLayer\n *   url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n *   attribution='&copy; OpenStreetMap contributors'\n *   maxZoom={19}\n * />\n * ```\n */\nexport function TileLayer({\n  url,\n  attribution,\n  maxZoom,\n  minZoom,\n  opacity,\n  zIndex,\n  options,\n}: TileLayerProps) {\n  const map = useMap()\n  const tileLayerRef = useRef<LeafletTileLayer | null>(null)\n\n  useEffect(() => {\n    if (!map) return\n\n    // Create tile layer\n    const tileLayer = L.tileLayer(url, {\n      attribution,\n      maxZoom,\n      minZoom,\n      opacity,\n      zIndex,\n      ...options,\n    })\n\n    tileLayer.addTo(map)\n    tileLayerRef.current = tileLayer\n\n    // Cleanup\n    return () => {\n      tileLayer.remove()\n      tileLayerRef.current = null\n    }\n  }, [map, url, attribution, maxZoom, minZoom, opacity, zIndex, options])\n\n  return null\n}\n","import { useEffect, useState, createContext, useContext } from 'react'\nimport L from 'leaflet'\nimport type { Marker as LeafletMarker } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport type { MarkerProps } from '../../types'\n\n// Context for sharing marker with Popup\ninterface MarkerContextValue {\n  marker: LeafletMarker | null\n}\n\nconst MarkerContext = createContext<MarkerContextValue>({ marker: null })\n\nexport function useMarker(): LeafletMarker | null {\n  const { marker } = useContext(MarkerContext)\n  return marker\n}\n\n/**\n * Component for adding markers to the map\n * \n * @example\n * ```tsx\n * <Marker\n *   position={[51.505, -0.09]}\n *   draggable={false}\n *   eventHandlers={{\n *     click: () => console.log('Marker clicked!')\n *   }}\n * >\n *   <Popup>Hello!</Popup>\n * </Marker>\n * ```\n */\nexport function Marker({\n  position,\n  draggable = false,\n  opacity,\n  alt,\n  eventHandlers,\n  children,\n  options,\n}: MarkerProps) {\n  const map = useMap()\n  const [marker, setMarker] = useState<LeafletMarker | null>(null)\n\n  useEffect(() => {\n    if (!map) return\n\n    // Create marker\n    const markerInstance = L.marker(position, {\n      draggable,\n      opacity,\n      alt,\n      ...options,\n    })\n\n    markerInstance.addTo(map)\n    setMarker(markerInstance)\n\n    // Cleanup\n    return () => {\n      markerInstance.remove()\n      setMarker(null)\n    }\n  }, [map]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update position\n  useEffect(() => {\n    if (marker) {\n      marker.setLatLng(position)\n    }\n  }, [position, marker])\n\n  // Update draggable option\n  useEffect(() => {\n    if (marker) {\n      if (draggable) {\n        marker.dragging?.enable()\n      } else {\n        marker.dragging?.disable()\n      }\n    }\n  }, [draggable, marker])\n\n  // Update opacity\n  useEffect(() => {\n    if (marker && opacity !== undefined) {\n      marker.setOpacity(opacity)\n    }\n  }, [opacity, marker])\n\n  // Attach event handlers\n  useEffect(() => {\n    if (!marker || !eventHandlers) return\n\n    const eventNames = Object.keys(eventHandlers) as Array<keyof typeof eventHandlers>\n    \n    eventNames.forEach(eventName => {\n      const handler = eventHandlers[eventName]\n      if (handler) {\n        // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n        marker.on(eventName, handler)\n      }\n    })\n\n    return () => {\n      eventNames.forEach(eventName => {\n        const handler = eventHandlers[eventName]\n        if (handler) {\n          // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n          marker.off(eventName, handler)\n        }\n      })\n    }\n  }, [eventHandlers, marker])\n\n  return (\n    <MarkerContext.Provider value={{ marker }}>\n      {children}\n    </MarkerContext.Provider>\n  )\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport L from 'leaflet'\nimport type { Popup as LeafletPopup } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport { useMarker } from '../Marker/Marker'\nimport type { PopupProps } from '../../types'\n\n/**\n * Component for adding popups to markers or the map\n * \n * When used inside a Marker, it automatically binds to that marker.\n * When used standalone, you must provide a position.\n * \n * @example\n * ```tsx\n * // Inside a Marker\n * <Marker position={[51.505, -0.09]}>\n *   <Popup>\n *     <h3>My Location</h3>\n *     <p>This is where I am!</p>\n *   </Popup>\n * </Marker>\n * \n * // Standalone\n * <Popup position={[51.505, -0.09]}>\n *   Hello from this location!\n * </Popup>\n * ```\n */\nexport function Popup({\n  position,\n  children,\n  maxWidth = 300,\n  minWidth = 50,\n  autoClose = true,\n  closeOnClick = true,\n  className,\n  options,\n}: PopupProps) {\n  const map = useMap()\n  const marker = useMarker()\n  const popupRef = useRef<LeafletPopup | null>(null)\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!map) return\n\n    // Create container for React portal\n    const containerElement = document.createElement('div')\n    setContainer(containerElement)\n\n    // Create popup with position if standalone\n    const popupOptions = {\n      maxWidth,\n      minWidth,\n      autoClose,\n      closeOnClick,\n      className,\n      ...options,\n    }\n\n    const popup = !marker && position \n      ? L.popup(popupOptions).setLatLng(position)\n      : L.popup(popupOptions)\n\n    popup.setContent(containerElement)\n    popupRef.current = popup\n\n    // Bind to marker (don't open yet)\n    if (marker) {\n      marker.bindPopup(popup)\n    }\n\n    // Cleanup\n    return () => {\n      if (marker) {\n        marker.unbindPopup()\n      }\n      popup.remove()\n      popupRef.current = null\n      setContainer(null)\n    }\n  }, [map, marker]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Open popup after container is ready\n  useEffect(() => {\n    if (popupRef.current && container && map) {\n      if (marker) {\n        // For marker-bound popups, open them (in real usage, they'd open on click)\n        popupRef.current.openOn(map)\n      } else if (position) {\n        // For standalone popups, open at position\n        popupRef.current.openOn(map)\n      }\n    }\n  }, [container, map, marker, position])\n\n  // Update position for standalone popups\n  useEffect(() => {\n    if (popupRef.current && position && !marker && map) {\n      popupRef.current.setLatLng(position)\n      if (!popupRef.current.isOpen()) {\n        popupRef.current.openOn(map)\n      }\n    }\n  }, [position, marker, map])\n\n  // Render children into popup container using portal\n  if (!container) {\n    return null\n  }\n\n  return createPortal(children, container)\n}\n","import { useEffect, useRef } from 'react'\nimport L from 'leaflet'\nimport type { GeoJSON as LeafletGeoJSON } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport type { GeoJSONProps } from '../../types'\n\n/**\n * Component for rendering GeoJSON data on the map\n * \n * @example\n * ```tsx\n * const geojsonData = {\n *   type: 'FeatureCollection',\n *   features: [\n *     {\n *       type: 'Feature',\n *       geometry: { type: 'Point', coordinates: [-0.09, 51.505] },\n *       properties: { name: 'London' }\n *     }\n *   ]\n * }\n * \n * <GeoJSON\n *   data={geojsonData}\n *   style={{ color: 'blue', weight: 2 }}\n *   onEachFeature={(feature, layer) => {\n *     layer.bindPopup(feature.properties.name)\n *   }}\n * />\n * ```\n */\nexport function GeoJSON({\n  data,\n  style,\n  onEachFeature,\n  pointToLayer,\n  filter,\n  options,\n}: GeoJSONProps) {\n  const map = useMap()\n  const geoJsonRef = useRef<LeafletGeoJSON | null>(null)\n\n  useEffect(() => {\n    if (!map || !data) return\n\n    // Create GeoJSON layer\n    const geoJson = L.geoJSON(data, {\n      style,\n      onEachFeature,\n      pointToLayer,\n      filter,\n      ...options,\n    })\n\n    geoJson.addTo(map)\n    geoJsonRef.current = geoJson\n\n    // Cleanup\n    return () => {\n      geoJson.remove()\n      geoJsonRef.current = null\n    }\n  }, [map, data, style, onEachFeature, pointToLayer, filter, options])\n\n  // Update data when it changes\n  useEffect(() => {\n    if (geoJsonRef.current && data) {\n      geoJsonRef.current.clearLayers()\n      geoJsonRef.current.addData(data)\n    }\n  }, [data])\n\n  return null\n}\n","import { useEffect } from 'react'\nimport type { LeafletEventHandlerFnMap } from 'leaflet'\nimport { useMap } from './useMap'\n\n/**\n * Hook to subscribe to Leaflet map events\n * Automatically cleans up event listeners on unmount\n * \n * @example\n * ```tsx\n * function LocationLogger() {\n *   useMapEvents({\n *     click: (e) => {\n *       console.log('Clicked at:', e.latlng)\n *     },\n *     zoomend: () => {\n *       console.log('Zoom changed')\n *     },\n *     moveend: () => {\n *       console.log('Map moved')\n *     }\n *   })\n *   \n *   return null\n * }\n * ```\n * \n * @param handlers - Object mapping event names to handler functions\n */\nexport function useMapEvents(handlers: LeafletEventHandlerFnMap): void {\n  const map = useMap()\n\n  useEffect(() => {\n    if (!map || !handlers) return\n\n    // Register all event handlers\n    const eventNames = Object.keys(handlers) as Array<keyof LeafletEventHandlerFnMap>\n    \n    eventNames.forEach(eventName => {\n      const handler = handlers[eventName]\n      if (handler) {\n        // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n        map.on(eventName, handler)\n      }\n    })\n\n    // Cleanup: remove all event handlers\n    return () => {\n      eventNames.forEach(eventName => {\n        const handler = handlers[eventName]\n        if (handler) {\n          // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n          map.off(eventName, handler)\n        }\n      })\n    }\n  }, [map, handlers])\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,291 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LatLngExpression, Map, MapOptions, TileLayerOptions, LeafletEventHandlerFnMap, MarkerOptions, PopupOptions, GeoJSONOptions, Marker as Marker$1 } from 'leaflet';
+export { LatLngExpression, Map as LeafletMap } from 'leaflet';
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Props for the MapContainer component
+ */
+interface MapContainerProps {
+    /** Initial center position [lat, lng] */
+    center: LatLngExpression;
+    /** Initial zoom level */
+    zoom: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Enable scroll wheel zoom */
+    scrollWheelZoom?: boolean;
+    /** Enable dragging */
+    dragging?: boolean;
+    /** Enable double click zoom */
+    doubleClickZoom?: boolean;
+    /** Enable zoom control */
+    zoomControl?: boolean;
+    /** Custom CSS styles */
+    style?: CSSProperties;
+    /** Custom CSS class */
+    className?: string;
+    /** Child components */
+    children?: ReactNode;
+    /** Callback when map is ready */
+    whenReady?: (map: Map) => void;
+    /** Additional Leaflet map options */
+    options?: Omit<MapOptions, 'center' | 'zoom'>;
+}
+/**
+ * Props for the TileLayer component
+ */
+interface TileLayerProps {
+    /** Tile URL template */
+    url: string;
+    /** Attribution text */
+    attribution?: string;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Tile opacity (0-1) */
+    opacity?: number;
+    /** Z-index */
+    zIndex?: number;
+    /** Additional Leaflet tile layer options */
+    options?: Omit<TileLayerOptions, 'attribution' | 'maxZoom' | 'minZoom'>;
+}
+/**
+ * Props for the Marker component
+ */
+interface MarkerProps {
+    /** Marker position [lat, lng] */
+    position: LatLngExpression;
+    /** Enable dragging */
+    draggable?: boolean;
+    /** Marker opacity (0-1) */
+    opacity?: number;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Event handlers */
+    eventHandlers?: LeafletEventHandlerFnMap;
+    /** Child components (usually Popup) */
+    children?: ReactNode;
+    /** Additional Leaflet marker options */
+    options?: Omit<MarkerOptions, 'draggable' | 'opacity' | 'alt'>;
+}
+/**
+ * Props for the Popup component
+ */
+interface PopupProps {
+    /** Popup position (optional if used inside Marker) */
+    position?: LatLngExpression;
+    /** Popup content */
+    children: ReactNode;
+    /** Maximum width */
+    maxWidth?: number;
+    /** Minimum width */
+    minWidth?: number;
+    /** Auto close on map click */
+    autoClose?: boolean;
+    /** Close on click */
+    closeOnClick?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Additional Leaflet popup options */
+    options?: Omit<PopupOptions, 'maxWidth' | 'minWidth' | 'autoClose' | 'closeOnClick' | 'className'>;
+}
+/**
+ * Props for the GeoJSON component
+ */
+interface GeoJSONProps {
+    /** GeoJSON data */
+    data: GeoJSON.GeoJsonObject;
+    /** Style for features */
+    style?: GeoJSONOptions['style'];
+    /** Callback for each feature */
+    onEachFeature?: GeoJSONOptions['onEachFeature'];
+    /** Point to layer callback */
+    pointToLayer?: GeoJSONOptions['pointToLayer'];
+    /** Filter function */
+    filter?: GeoJSONOptions['filter'];
+    /** Additional Leaflet GeoJSON options */
+    options?: Omit<GeoJSONOptions, 'style' | 'onEachFeature' | 'pointToLayer' | 'filter'>;
+}
+/**
+ * Map context value
+ */
+interface MapContextValue {
+    /** Leaflet map instance */
+    map: Map | null;
+    /** Set map instance */
+    setMap: (map: Map | null) => void;
+}
+/**
+ * Event handlers map type
+ */
+type MapEventHandlers = LeafletEventHandlerFnMap;
+
+/**
+ * Main container component for creating a Leaflet  map
+ *
+ * @example
+ * ```tsx
+ * <MapContainer
+ *   center={[51.505, -0.09]}
+ *   zoom={13}
+ *   style={{ height: '400px' }}
+ * >
+ *   <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+ *   <Marker position={[51.505, -0.09]} />
+ * </MapContainer>
+ * ```
+ */
+declare function MapContainer(props: MapContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Component for adding tile layers to the map
+ *
+ * @example
+ * ```tsx
+ * <TileLayer
+ *   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+ *   attribution='&copy; OpenStreetMap contributors'
+ *   maxZoom={19}
+ * />
+ * ```
+ */
+declare function TileLayer({ url, attribution, maxZoom, minZoom, opacity, zIndex, options, }: TileLayerProps): null;
+
+declare function useMarker(): Marker$1 | null;
+/**
+ * Component for adding markers to the map
+ *
+ * @example
+ * ```tsx
+ * <Marker
+ *   position={[51.505, -0.09]}
+ *   draggable={false}
+ *   eventHandlers={{
+ *     click: () => console.log('Marker clicked!')
+ *   }}
+ * >
+ *   <Popup>Hello!</Popup>
+ * </Marker>
+ * ```
+ */
+declare function Marker({ position, draggable, opacity, alt, eventHandlers, children, options, }: MarkerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Component for adding popups to markers or the map
+ *
+ * When used inside a Marker, it automatically binds to that marker.
+ * When used standalone, you must provide a position.
+ *
+ * @example
+ * ```tsx
+ * // Inside a Marker
+ * <Marker position={[51.505, -0.09]}>
+ *   <Popup>
+ *     <h3>My Location</h3>
+ *     <p>This is where I am!</p>
+ *   </Popup>
+ * </Marker>
+ *
+ * // Standalone
+ * <Popup position={[51.505, -0.09]}>
+ *   Hello from this location!
+ * </Popup>
+ * ```
+ */
+declare function Popup({ position, children, maxWidth, minWidth, autoClose, closeOnClick, className, options, }: PopupProps): react.ReactPortal | null;
+
+/**
+ * Component for rendering GeoJSON data on the map
+ *
+ * @example
+ * ```tsx
+ * const geojsonData = {
+ *   type: 'FeatureCollection',
+ *   features: [
+ *     {
+ *       type: 'Feature',
+ *       geometry: { type: 'Point', coordinates: [-0.09, 51.505] },
+ *       properties: { name: 'London' }
+ *     }
+ *   ]
+ * }
+ *
+ * <GeoJSON
+ *   data={geojsonData}
+ *   style={{ color: 'blue', weight: 2 }}
+ *   onEachFeature={(feature, layer) => {
+ *     layer.bindPopup(feature.properties.name)
+ *   }}
+ * />
+ * ```
+ */
+declare function GeoJSON$1({ data, style, onEachFeature, pointToLayer, filter, options, }: GeoJSONProps): null;
+
+/**
+ * Hook to access the Leaflet map instance
+ * Must be used within a MapContainer or MapProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const map = useMap()
+ *
+ *   const flyToLocation = () => {
+ *     map.flyTo([51.505, -0.09], 14)
+ *   }
+ *
+ *   return <button onClick={flyToLocation}>Go to London</button>
+ * }
+ * ```
+ *
+ * @returns The Leaflet map instance
+ * @throws Error if map is not yet initialized or used outside MapContainer
+ */
+declare function useMap(): Map;
+
+/**
+ * Hook to subscribe to Leaflet map events
+ * Automatically cleans up event listeners on unmount
+ *
+ * @example
+ * ```tsx
+ * function LocationLogger() {
+ *   useMapEvents({
+ *     click: (e) => {
+ *       console.log('Clicked at:', e.latlng)
+ *     },
+ *     zoomend: () => {
+ *       console.log('Zoom changed')
+ *     },
+ *     moveend: () => {
+ *       console.log('Map moved')
+ *     }
+ *   })
+ *
+ *   return null
+ * }
+ * ```
+ *
+ * @param handlers - Object mapping event names to handler functions
+ */
+declare function useMapEvents(handlers: LeafletEventHandlerFnMap): void;
+
+interface MapProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider component for sharing map instance across components
+ */
+declare function MapProvider({ children }: MapProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the map context
+ * @throws Error if used outside of MapProvider
+ */
+declare function useMapContext(): MapContextValue;
+
+export { GeoJSON$1 as GeoJSON, type GeoJSONProps, MapContainer, type MapContainerProps, type MapContextValue, type MapEventHandlers, MapProvider, Marker, type MarkerProps, Popup, type PopupProps, TileLayer, type TileLayerProps, useMap, useMapContext, useMapEvents, useMarker };

package/dist/index.d.ts

@@ -0,0 +1,291 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { LatLngExpression, Map, MapOptions, TileLayerOptions, LeafletEventHandlerFnMap, MarkerOptions, PopupOptions, GeoJSONOptions, Marker as Marker$1 } from 'leaflet';
+export { LatLngExpression, Map as LeafletMap } from 'leaflet';
+import * as react from 'react';
+import { CSSProperties, ReactNode } from 'react';
+
+/**
+ * Props for the MapContainer component
+ */
+interface MapContainerProps {
+    /** Initial center position [lat, lng] */
+    center: LatLngExpression;
+    /** Initial zoom level */
+    zoom: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Enable scroll wheel zoom */
+    scrollWheelZoom?: boolean;
+    /** Enable dragging */
+    dragging?: boolean;
+    /** Enable double click zoom */
+    doubleClickZoom?: boolean;
+    /** Enable zoom control */
+    zoomControl?: boolean;
+    /** Custom CSS styles */
+    style?: CSSProperties;
+    /** Custom CSS class */
+    className?: string;
+    /** Child components */
+    children?: ReactNode;
+    /** Callback when map is ready */
+    whenReady?: (map: Map) => void;
+    /** Additional Leaflet map options */
+    options?: Omit<MapOptions, 'center' | 'zoom'>;
+}
+/**
+ * Props for the TileLayer component
+ */
+interface TileLayerProps {
+    /** Tile URL template */
+    url: string;
+    /** Attribution text */
+    attribution?: string;
+    /** Maximum zoom level */
+    maxZoom?: number;
+    /** Minimum zoom level */
+    minZoom?: number;
+    /** Tile opacity (0-1) */
+    opacity?: number;
+    /** Z-index */
+    zIndex?: number;
+    /** Additional Leaflet tile layer options */
+    options?: Omit<TileLayerOptions, 'attribution' | 'maxZoom' | 'minZoom'>;
+}
+/**
+ * Props for the Marker component
+ */
+interface MarkerProps {
+    /** Marker position [lat, lng] */
+    position: LatLngExpression;
+    /** Enable dragging */
+    draggable?: boolean;
+    /** Marker opacity (0-1) */
+    opacity?: number;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Event handlers */
+    eventHandlers?: LeafletEventHandlerFnMap;
+    /** Child components (usually Popup) */
+    children?: ReactNode;
+    /** Additional Leaflet marker options */
+    options?: Omit<MarkerOptions, 'draggable' | 'opacity' | 'alt'>;
+}
+/**
+ * Props for the Popup component
+ */
+interface PopupProps {
+    /** Popup position (optional if used inside Marker) */
+    position?: LatLngExpression;
+    /** Popup content */
+    children: ReactNode;
+    /** Maximum width */
+    maxWidth?: number;
+    /** Minimum width */
+    minWidth?: number;
+    /** Auto close on map click */
+    autoClose?: boolean;
+    /** Close on click */
+    closeOnClick?: boolean;
+    /** Custom CSS class */
+    className?: string;
+    /** Additional Leaflet popup options */
+    options?: Omit<PopupOptions, 'maxWidth' | 'minWidth' | 'autoClose' | 'closeOnClick' | 'className'>;
+}
+/**
+ * Props for the GeoJSON component
+ */
+interface GeoJSONProps {
+    /** GeoJSON data */
+    data: GeoJSON.GeoJsonObject;
+    /** Style for features */
+    style?: GeoJSONOptions['style'];
+    /** Callback for each feature */
+    onEachFeature?: GeoJSONOptions['onEachFeature'];
+    /** Point to layer callback */
+    pointToLayer?: GeoJSONOptions['pointToLayer'];
+    /** Filter function */
+    filter?: GeoJSONOptions['filter'];
+    /** Additional Leaflet GeoJSON options */
+    options?: Omit<GeoJSONOptions, 'style' | 'onEachFeature' | 'pointToLayer' | 'filter'>;
+}
+/**
+ * Map context value
+ */
+interface MapContextValue {
+    /** Leaflet map instance */
+    map: Map | null;
+    /** Set map instance */
+    setMap: (map: Map | null) => void;
+}
+/**
+ * Event handlers map type
+ */
+type MapEventHandlers = LeafletEventHandlerFnMap;
+
+/**
+ * Main container component for creating a Leaflet  map
+ *
+ * @example
+ * ```tsx
+ * <MapContainer
+ *   center={[51.505, -0.09]}
+ *   zoom={13}
+ *   style={{ height: '400px' }}
+ * >
+ *   <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
+ *   <Marker position={[51.505, -0.09]} />
+ * </MapContainer>
+ * ```
+ */
+declare function MapContainer(props: MapContainerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Component for adding tile layers to the map
+ *
+ * @example
+ * ```tsx
+ * <TileLayer
+ *   url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+ *   attribution='&copy; OpenStreetMap contributors'
+ *   maxZoom={19}
+ * />
+ * ```
+ */
+declare function TileLayer({ url, attribution, maxZoom, minZoom, opacity, zIndex, options, }: TileLayerProps): null;
+
+declare function useMarker(): Marker$1 | null;
+/**
+ * Component for adding markers to the map
+ *
+ * @example
+ * ```tsx
+ * <Marker
+ *   position={[51.505, -0.09]}
+ *   draggable={false}
+ *   eventHandlers={{
+ *     click: () => console.log('Marker clicked!')
+ *   }}
+ * >
+ *   <Popup>Hello!</Popup>
+ * </Marker>
+ * ```
+ */
+declare function Marker({ position, draggable, opacity, alt, eventHandlers, children, options, }: MarkerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Component for adding popups to markers or the map
+ *
+ * When used inside a Marker, it automatically binds to that marker.
+ * When used standalone, you must provide a position.
+ *
+ * @example
+ * ```tsx
+ * // Inside a Marker
+ * <Marker position={[51.505, -0.09]}>
+ *   <Popup>
+ *     <h3>My Location</h3>
+ *     <p>This is where I am!</p>
+ *   </Popup>
+ * </Marker>
+ *
+ * // Standalone
+ * <Popup position={[51.505, -0.09]}>
+ *   Hello from this location!
+ * </Popup>
+ * ```
+ */
+declare function Popup({ position, children, maxWidth, minWidth, autoClose, closeOnClick, className, options, }: PopupProps): react.ReactPortal | null;
+
+/**
+ * Component for rendering GeoJSON data on the map
+ *
+ * @example
+ * ```tsx
+ * const geojsonData = {
+ *   type: 'FeatureCollection',
+ *   features: [
+ *     {
+ *       type: 'Feature',
+ *       geometry: { type: 'Point', coordinates: [-0.09, 51.505] },
+ *       properties: { name: 'London' }
+ *     }
+ *   ]
+ * }
+ *
+ * <GeoJSON
+ *   data={geojsonData}
+ *   style={{ color: 'blue', weight: 2 }}
+ *   onEachFeature={(feature, layer) => {
+ *     layer.bindPopup(feature.properties.name)
+ *   }}
+ * />
+ * ```
+ */
+declare function GeoJSON$1({ data, style, onEachFeature, pointToLayer, filter, options, }: GeoJSONProps): null;
+
+/**
+ * Hook to access the Leaflet map instance
+ * Must be used within a MapContainer or MapProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const map = useMap()
+ *
+ *   const flyToLocation = () => {
+ *     map.flyTo([51.505, -0.09], 14)
+ *   }
+ *
+ *   return <button onClick={flyToLocation}>Go to London</button>
+ * }
+ * ```
+ *
+ * @returns The Leaflet map instance
+ * @throws Error if map is not yet initialized or used outside MapContainer
+ */
+declare function useMap(): Map;
+
+/**
+ * Hook to subscribe to Leaflet map events
+ * Automatically cleans up event listeners on unmount
+ *
+ * @example
+ * ```tsx
+ * function LocationLogger() {
+ *   useMapEvents({
+ *     click: (e) => {
+ *       console.log('Clicked at:', e.latlng)
+ *     },
+ *     zoomend: () => {
+ *       console.log('Zoom changed')
+ *     },
+ *     moveend: () => {
+ *       console.log('Map moved')
+ *     }
+ *   })
+ *
+ *   return null
+ * }
+ * ```
+ *
+ * @param handlers - Object mapping event names to handler functions
+ */
+declare function useMapEvents(handlers: LeafletEventHandlerFnMap): void;
+
+interface MapProviderProps {
+    children: ReactNode;
+}
+/**
+ * Provider component for sharing map instance across components
+ */
+declare function MapProvider({ children }: MapProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the map context
+ * @throws Error if used outside of MapProvider
+ */
+declare function useMapContext(): MapContextValue;
+
+export { GeoJSON$1 as GeoJSON, type GeoJSONProps, MapContainer, type MapContainerProps, type MapContextValue, type MapEventHandlers, MapProvider, Marker, type MarkerProps, Popup, type PopupProps, TileLayer, type TileLayerProps, useMap, useMapContext, useMapEvents, useMarker };

package/dist/index.js

@@ -0,0 +1,3 @@
+import {createContext,useState,useContext,useRef,useEffect}from'react';import x from'leaflet';import {jsx}from'react/jsx-runtime';import {createPortal}from'react-dom';var g=createContext(null);function E({children:e}){let[t,o]=useState(null);return jsx(g.Provider,{value:{map:t,setMap:o},children:e})}function L(){let e=useContext(g);if(!e)throw new Error("useMapContext must be used within a MapProvider or MapContainer");return e}x.Icon&&x.Icon.Default&&x.Icon.Default.prototype&&delete x.Icon.Default.prototype._getIconUrl;x.Icon.Default.mergeOptions({iconRetinaUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png",iconUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png",shadowUrl:"https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png"});function F({center:e,zoom:t,minZoom:o,maxZoom:u,scrollWheelZoom:n=true,dragging:i=true,doubleClickZoom:s=true,zoomControl:f=true,style:r,className:a,children:p,whenReady:l,options:c,setMapReady:y}){let d=useRef(null),{setMap:M}=L(),P=useRef(null);return useEffect(()=>{if(!d.current||P.current)return;let C=x.map(d.current,{center:e,zoom:t,minZoom:o,maxZoom:u,scrollWheelZoom:n,dragging:i,doubleClickZoom:s,zoomControl:f,...c});return P.current=C,M(C),y(true),l&&l(C),()=>{C.remove(),P.current=null,M(null),y(false);}},[]),useEffect(()=>{P.current&&P.current.setView(e,t);},[e,t]),jsx("div",{ref:d,style:{height:"100%",width:"100%",...r},className:a,children:p})}function T(e){let[t,o]=useState(false);return jsx(E,{children:jsx(F,{...e,setMapReady:o,children:t?e.children:null})})}function m(){let{map:e}=L();if(!e)throw new Error("Map instance is not available. Make sure this hook is used within a MapContainer and the map has been initialized.");return e}function J({url:e,attribution:t,maxZoom:o,minZoom:u,opacity:n,zIndex:i,options:s}){let f=m(),r=useRef(null);return useEffect(()=>{if(!f)return;let a=x.tileLayer(e,{attribution:t,maxZoom:o,minZoom:u,opacity:n,zIndex:i,...s});return a.addTo(f),r.current=a,()=>{a.remove(),r.current=null;}},[f,e,t,o,u,n,i,s]),null}var N=createContext({marker:null});function v(){let{marker:e}=useContext(N);return e}function b({position:e,draggable:t=false,opacity:o,alt:u,eventHandlers:n,children:i,options:s}){let f=m(),[r,a]=useState(null);return useEffect(()=>{if(!f)return;let p=x.marker(e,{draggable:t,opacity:o,alt:u,...s});return p.addTo(f),a(p),()=>{p.remove(),a(null);}},[f]),useEffect(()=>{r&&r.setLatLng(e);},[e,r]),useEffect(()=>{r&&(t?r.dragging?.enable():r.dragging?.disable());},[t,r]),useEffect(()=>{r&&o!==void 0&&r.setOpacity(o);},[o,r]),useEffect(()=>{if(!r||!n)return;let p=Object.keys(n);return p.forEach(l=>{let c=n[l];c&&r.on(l,c);}),()=>{p.forEach(l=>{let c=n[l];c&&r.off(l,c);});}},[n,r]),jsx(N.Provider,{value:{marker:r},children:i})}function w({position:e,children:t,maxWidth:o=300,minWidth:u=50,autoClose:n=true,closeOnClick:i=true,className:s,options:f}){let r=m(),a=v(),p=useRef(null),[l,c]=useState(null);return useEffect(()=>{if(!r)return;let y=document.createElement("div");c(y);let d={maxWidth:o,minWidth:u,autoClose:n,closeOnClick:i,className:s,...f},M=!a&&e?x.popup(d).setLatLng(e):x.popup(d);return M.setContent(y),p.current=M,a&&a.bindPopup(M),()=>{a&&a.unbindPopup(),M.remove(),p.current=null,c(null);}},[r,a]),useEffect(()=>{p.current&&l&&r&&(a||e)&&p.current.openOn(r);},[l,r,a,e]),useEffect(()=>{p.current&&e&&!a&&r&&(p.current.setLatLng(e),p.current.isOpen()||p.current.openOn(r));},[e,a,r]),l?createPortal(t,l):null}function D({data:e,style:t,onEachFeature:o,pointToLayer:u,filter:n,options:i}){let s=m(),f=useRef(null);return useEffect(()=>{if(!s||!e)return;let r=x.geoJSON(e,{style:t,onEachFeature:o,pointToLayer:u,filter:n,...i});return r.addTo(s),f.current=r,()=>{r.remove(),f.current=null;}},[s,e,t,o,u,n,i]),useEffect(()=>{f.current&&e&&(f.current.clearLayers(),f.current.addData(e));},[e]),null}function oe(e){let t=m();useEffect(()=>{if(!t||!e)return;let o=Object.keys(e);return o.forEach(u=>{let n=e[u];n&&t.on(u,n);}),()=>{o.forEach(u=>{let n=e[u];n&&t.off(u,n);});}},[t,e]);}
+export{D as GeoJSON,T as MapContainer,E as MapProvider,b as Marker,w as Popup,J as TileLayer,m as useMap,L as useMapContext,oe as useMapEvents,v as useMarker};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/context/MapContext.tsx","../src/components/MapContainer/MapContainer.tsx","../src/hooks/useMap.ts","../src/components/TileLayer/TileLayer.tsx","../src/components/Marker/Marker.tsx","../src/components/Popup/Popup.tsx","../src/components/GeoJSON/GeoJSON.tsx","../src/hooks/useMapEvents.ts"],"names":["MapContext","createContext","MapProvider","children","map","setMap","useState","jsx","useMapContext","context","useContext","L","MapContainerInner","center","zoom","minZoom","maxZoom","scrollWheelZoom","dragging","doubleClickZoom","zoomControl","style","className","whenReady","options","setMapReady","containerRef","useRef","mapRef","useEffect","MapContainer","props","mapReady","useMap","TileLayer","url","attribution","opacity","zIndex","tileLayerRef","tileLayer","MarkerContext","useMarker","marker","Marker","position","draggable","alt","eventHandlers","setMarker","markerInstance","eventNames","eventName","handler","Popup","maxWidth","minWidth","autoClose","closeOnClick","popupRef","container","setContainer","containerElement","popupOptions","popup","createPortal","GeoJSON","data","onEachFeature","pointToLayer","filter","geoJsonRef","geoJson","useMapEvents","handlers"],"mappings":"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","file":"index.js","sourcesContent":["import { createContext, useContext, useState, type ReactNode } from 'react'\nimport type { Map } from 'leaflet'\nimport type { MapContextValue } from '../types'\n\nconst MapContext = createContext<MapContextValue | null>(null)\n\nexport interface MapProviderProps {\n  children: ReactNode\n}\n\n/**\n * Provider component for sharing map instance across components\n */\nexport function MapProvider({ children }: MapProviderProps) {\n  const [map, setMap] = useState<Map | null>(null)\n\n  return (\n    <MapContext.Provider value={{ map, setMap }}>\n      {children}\n    </MapContext.Provider>\n  )\n}\n\n/**\n * Hook to access the map context\n * @throws Error if used outside of MapProvider\n */\nexport function useMapContext(): MapContextValue {\n  const context = useContext(MapContext)\n  \n  if (!context) {\n    throw new Error('useMapContext must be used within a MapProvider or MapContainer')\n  }\n  \n  return context\n}\n\nexport { MapContext }\n","import { useEffect, useRef, useState } from 'react'\nimport L from 'leaflet'\nimport type { Map } from 'leaflet'\nimport { MapProvider, useMapContext } from '../../context/MapContext'\nimport type { MapContainerProps } from '../../types'\n\n// Fix for default marker icons in Leaflet with bundlers\n// import 'leaflet/dist/leaflet.css' // Commented out for testing\n\n// Fix for default marker icons in Leaflet with bundlers\nif (L.Icon && L.Icon.Default && L.Icon.Default.prototype) {\n  delete (L.Icon.Default.prototype as any)._getIconUrl\n}\nL.Icon.Default.mergeOptions({\n  iconRetinaUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png',\n  iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon.png',\n  shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-shadow.png',\n})\n\ninterface MapContainerInnerProps extends MapContainerProps {\n  setMapReady: (ready: boolean) => void\n}\n\nfunction MapContainerInner({\n  center,\n  zoom,\n  minZoom,\n  maxZoom,\n  scrollWheelZoom = true,\n  dragging = true,\n  doubleClickZoom = true,\n  zoomControl = true,\n  style,\n  className,\n  children,\n  whenReady,\n  options,\n  setMapReady,\n}: MapContainerInnerProps) {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const { setMap } = useMapContext()\n  const mapRef = useRef<Map | null>(null)\n\n  useEffect(() => {\n    if (!containerRef.current || mapRef.current) return\n\n    // Create the map\n    const map = L.map(containerRef.current, {\n      center,\n      zoom,\n      minZoom,\n      maxZoom,\n      scrollWheelZoom,\n      dragging,\n      doubleClickZoom,\n      zoomControl,\n      ...options,\n    })\n\n    mapRef.current = map\n    setMap(map)\n    setMapReady(true)\n\n    // Call whenReady callback\n    if (whenReady) {\n      whenReady(map)\n    }\n\n    // Cleanup\n    return () => {\n      map.remove()\n      mapRef.current = null\n      setMap(null)\n      setMapReady(false)\n    }\n  }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update view when center or zoom changes\n  useEffect(() => {\n    if (mapRef.current) {\n      mapRef.current.setView(center, zoom)\n    }\n  }, [center, zoom])\n\n  return (\n    <div\n      ref={containerRef}\n      style={{\n        height: '100%',\n        width: '100%',\n        ...style,\n      }}\n      className={className}\n    >\n      {children}\n    </div>\n  )\n}\n\n/**\n * Main container component for creating a Leaflet  map\n * \n * @example\n * ```tsx\n * <MapContainer\n *   center={[51.505, -0.09]}\n *   zoom={13}\n *   style={{ height: '400px' }}\n * >\n *   <TileLayer url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\" />\n *   <Marker position={[51.505, -0.09]} />\n * </MapContainer>\n * ```\n */\nexport function MapContainer(props: MapContainerProps) {\n  const [mapReady, setMapReady] = useState(false)\n\n  return (\n    <MapProvider>\n      <MapContainerInner {...props} setMapReady={setMapReady}>\n        {mapReady ? props.children : null}\n      </MapContainerInner>\n    </MapProvider>\n  )\n}\n","import type { Map } from 'leaflet'\nimport { useMapContext } from '../context/MapContext'\n\n/**\n * Hook to access the Leaflet map instance\n * Must be used within a MapContainer or MapProvider\n * \n * @example\n * ```tsx\n * function MyComponent() {\n *   const map = useMap()\n *   \n *   const flyToLocation = () => {\n *     map.flyTo([51.505, -0.09], 14)\n *   }\n *   \n *   return <button onClick={flyToLocation}>Go to London</button>\n * }\n * ```\n * \n * @returns The Leaflet map instance\n * @throws Error if map is not yet initialized or used outside MapContainer\n */\nexport function useMap(): Map {\n  const { map } = useMapContext()\n  \n  if (!map) {\n    throw new Error(\n      'Map instance is not available. Make sure this hook is used within a MapContainer ' +\n      'and the map has been initialized.'\n    )\n  }\n  \n  return map\n}\n","import { useEffect, useRef } from 'react'\nimport L from 'leaflet'\nimport type { TileLayer as LeafletTileLayer } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport type { TileLayerProps } from '../../types'\n\n/**\n * Component for adding tile layers to the map\n * \n * @example\n * ```tsx\n * <TileLayer\n *   url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n *   attribution='&copy; OpenStreetMap contributors'\n *   maxZoom={19}\n * />\n * ```\n */\nexport function TileLayer({\n  url,\n  attribution,\n  maxZoom,\n  minZoom,\n  opacity,\n  zIndex,\n  options,\n}: TileLayerProps) {\n  const map = useMap()\n  const tileLayerRef = useRef<LeafletTileLayer | null>(null)\n\n  useEffect(() => {\n    if (!map) return\n\n    // Create tile layer\n    const tileLayer = L.tileLayer(url, {\n      attribution,\n      maxZoom,\n      minZoom,\n      opacity,\n      zIndex,\n      ...options,\n    })\n\n    tileLayer.addTo(map)\n    tileLayerRef.current = tileLayer\n\n    // Cleanup\n    return () => {\n      tileLayer.remove()\n      tileLayerRef.current = null\n    }\n  }, [map, url, attribution, maxZoom, minZoom, opacity, zIndex, options])\n\n  return null\n}\n","import { useEffect, useState, createContext, useContext } from 'react'\nimport L from 'leaflet'\nimport type { Marker as LeafletMarker } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport type { MarkerProps } from '../../types'\n\n// Context for sharing marker with Popup\ninterface MarkerContextValue {\n  marker: LeafletMarker | null\n}\n\nconst MarkerContext = createContext<MarkerContextValue>({ marker: null })\n\nexport function useMarker(): LeafletMarker | null {\n  const { marker } = useContext(MarkerContext)\n  return marker\n}\n\n/**\n * Component for adding markers to the map\n * \n * @example\n * ```tsx\n * <Marker\n *   position={[51.505, -0.09]}\n *   draggable={false}\n *   eventHandlers={{\n *     click: () => console.log('Marker clicked!')\n *   }}\n * >\n *   <Popup>Hello!</Popup>\n * </Marker>\n * ```\n */\nexport function Marker({\n  position,\n  draggable = false,\n  opacity,\n  alt,\n  eventHandlers,\n  children,\n  options,\n}: MarkerProps) {\n  const map = useMap()\n  const [marker, setMarker] = useState<LeafletMarker | null>(null)\n\n  useEffect(() => {\n    if (!map) return\n\n    // Create marker\n    const markerInstance = L.marker(position, {\n      draggable,\n      opacity,\n      alt,\n      ...options,\n    })\n\n    markerInstance.addTo(map)\n    setMarker(markerInstance)\n\n    // Cleanup\n    return () => {\n      markerInstance.remove()\n      setMarker(null)\n    }\n  }, [map]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Update position\n  useEffect(() => {\n    if (marker) {\n      marker.setLatLng(position)\n    }\n  }, [position, marker])\n\n  // Update draggable option\n  useEffect(() => {\n    if (marker) {\n      if (draggable) {\n        marker.dragging?.enable()\n      } else {\n        marker.dragging?.disable()\n      }\n    }\n  }, [draggable, marker])\n\n  // Update opacity\n  useEffect(() => {\n    if (marker && opacity !== undefined) {\n      marker.setOpacity(opacity)\n    }\n  }, [opacity, marker])\n\n  // Attach event handlers\n  useEffect(() => {\n    if (!marker || !eventHandlers) return\n\n    const eventNames = Object.keys(eventHandlers) as Array<keyof typeof eventHandlers>\n    \n    eventNames.forEach(eventName => {\n      const handler = eventHandlers[eventName]\n      if (handler) {\n        // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n        marker.on(eventName, handler)\n      }\n    })\n\n    return () => {\n      eventNames.forEach(eventName => {\n        const handler = eventHandlers[eventName]\n        if (handler) {\n          // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n          marker.off(eventName, handler)\n        }\n      })\n    }\n  }, [eventHandlers, marker])\n\n  return (\n    <MarkerContext.Provider value={{ marker }}>\n      {children}\n    </MarkerContext.Provider>\n  )\n}\n","import { useEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport L from 'leaflet'\nimport type { Popup as LeafletPopup } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport { useMarker } from '../Marker/Marker'\nimport type { PopupProps } from '../../types'\n\n/**\n * Component for adding popups to markers or the map\n * \n * When used inside a Marker, it automatically binds to that marker.\n * When used standalone, you must provide a position.\n * \n * @example\n * ```tsx\n * // Inside a Marker\n * <Marker position={[51.505, -0.09]}>\n *   <Popup>\n *     <h3>My Location</h3>\n *     <p>This is where I am!</p>\n *   </Popup>\n * </Marker>\n * \n * // Standalone\n * <Popup position={[51.505, -0.09]}>\n *   Hello from this location!\n * </Popup>\n * ```\n */\nexport function Popup({\n  position,\n  children,\n  maxWidth = 300,\n  minWidth = 50,\n  autoClose = true,\n  closeOnClick = true,\n  className,\n  options,\n}: PopupProps) {\n  const map = useMap()\n  const marker = useMarker()\n  const popupRef = useRef<LeafletPopup | null>(null)\n  const [container, setContainer] = useState<HTMLDivElement | null>(null)\n\n  useEffect(() => {\n    if (!map) return\n\n    // Create container for React portal\n    const containerElement = document.createElement('div')\n    setContainer(containerElement)\n\n    // Create popup with position if standalone\n    const popupOptions = {\n      maxWidth,\n      minWidth,\n      autoClose,\n      closeOnClick,\n      className,\n      ...options,\n    }\n\n    const popup = !marker && position \n      ? L.popup(popupOptions).setLatLng(position)\n      : L.popup(popupOptions)\n\n    popup.setContent(containerElement)\n    popupRef.current = popup\n\n    // Bind to marker (don't open yet)\n    if (marker) {\n      marker.bindPopup(popup)\n    }\n\n    // Cleanup\n    return () => {\n      if (marker) {\n        marker.unbindPopup()\n      }\n      popup.remove()\n      popupRef.current = null\n      setContainer(null)\n    }\n  }, [map, marker]) // eslint-disable-line react-hooks/exhaustive-deps\n\n  // Open popup after container is ready\n  useEffect(() => {\n    if (popupRef.current && container && map) {\n      if (marker) {\n        // For marker-bound popups, open them (in real usage, they'd open on click)\n        popupRef.current.openOn(map)\n      } else if (position) {\n        // For standalone popups, open at position\n        popupRef.current.openOn(map)\n      }\n    }\n  }, [container, map, marker, position])\n\n  // Update position for standalone popups\n  useEffect(() => {\n    if (popupRef.current && position && !marker && map) {\n      popupRef.current.setLatLng(position)\n      if (!popupRef.current.isOpen()) {\n        popupRef.current.openOn(map)\n      }\n    }\n  }, [position, marker, map])\n\n  // Render children into popup container using portal\n  if (!container) {\n    return null\n  }\n\n  return createPortal(children, container)\n}\n","import { useEffect, useRef } from 'react'\nimport L from 'leaflet'\nimport type { GeoJSON as LeafletGeoJSON } from 'leaflet'\nimport { useMap } from '../../hooks/useMap'\nimport type { GeoJSONProps } from '../../types'\n\n/**\n * Component for rendering GeoJSON data on the map\n * \n * @example\n * ```tsx\n * const geojsonData = {\n *   type: 'FeatureCollection',\n *   features: [\n *     {\n *       type: 'Feature',\n *       geometry: { type: 'Point', coordinates: [-0.09, 51.505] },\n *       properties: { name: 'London' }\n *     }\n *   ]\n * }\n * \n * <GeoJSON\n *   data={geojsonData}\n *   style={{ color: 'blue', weight: 2 }}\n *   onEachFeature={(feature, layer) => {\n *     layer.bindPopup(feature.properties.name)\n *   }}\n * />\n * ```\n */\nexport function GeoJSON({\n  data,\n  style,\n  onEachFeature,\n  pointToLayer,\n  filter,\n  options,\n}: GeoJSONProps) {\n  const map = useMap()\n  const geoJsonRef = useRef<LeafletGeoJSON | null>(null)\n\n  useEffect(() => {\n    if (!map || !data) return\n\n    // Create GeoJSON layer\n    const geoJson = L.geoJSON(data, {\n      style,\n      onEachFeature,\n      pointToLayer,\n      filter,\n      ...options,\n    })\n\n    geoJson.addTo(map)\n    geoJsonRef.current = geoJson\n\n    // Cleanup\n    return () => {\n      geoJson.remove()\n      geoJsonRef.current = null\n    }\n  }, [map, data, style, onEachFeature, pointToLayer, filter, options])\n\n  // Update data when it changes\n  useEffect(() => {\n    if (geoJsonRef.current && data) {\n      geoJsonRef.current.clearLayers()\n      geoJsonRef.current.addData(data)\n    }\n  }, [data])\n\n  return null\n}\n","import { useEffect } from 'react'\nimport type { LeafletEventHandlerFnMap } from 'leaflet'\nimport { useMap } from './useMap'\n\n/**\n * Hook to subscribe to Leaflet map events\n * Automatically cleans up event listeners on unmount\n * \n * @example\n * ```tsx\n * function LocationLogger() {\n *   useMapEvents({\n *     click: (e) => {\n *       console.log('Clicked at:', e.latlng)\n *     },\n *     zoomend: () => {\n *       console.log('Zoom changed')\n *     },\n *     moveend: () => {\n *       console.log('Map moved')\n *     }\n *   })\n *   \n *   return null\n * }\n * ```\n * \n * @param handlers - Object mapping event names to handler functions\n */\nexport function useMapEvents(handlers: LeafletEventHandlerFnMap): void {\n  const map = useMap()\n\n  useEffect(() => {\n    if (!map || !handlers) return\n\n    // Register all event handlers\n    const eventNames = Object.keys(handlers) as Array<keyof LeafletEventHandlerFnMap>\n    \n    eventNames.forEach(eventName => {\n      const handler = handlers[eventName]\n      if (handler) {\n        // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n        map.on(eventName, handler)\n      }\n    })\n\n    // Cleanup: remove all event handlers\n    return () => {\n      eventNames.forEach(eventName => {\n        const handler = handlers[eventName]\n        if (handler) {\n          // @ts-expect-error - Leaflet's type definitions require specific handler types per event, but we're dynamically iterating\n          map.off(eventName, handler)\n        }\n      })\n    }\n  }, [map, handlers])\n}\n"]}

package/package.json

@@ -0,0 +1,119 @@
+{
+  "name": "@geekles007/motion-map-components",
+  "version": "0.2.0",
+  "description": "Modern React components for interactive maps with Leaflet",
+  "author": "Geekles",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Geekles007/react-map-components.git"
+  },
+  "homepage": "https://github.com/Geekles007/react-map-components#readme",
+  "bugs": {
+    "url": "https://github.com/Geekles007/react-map-components/issues"
+  },
+  "keywords": [
+    "react",
+    "map",
+    "leaflet",
+    "mapbox",
+    "gis",
+    "components",
+    "typescript",
+    "mapping",
+    "geojson",
+    "markers"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "build": "tsup",
+    "build:storybook": "storybook build",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run build",
+    "release": "changeset publish",
+    "prepare": "husky install"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "leaflet": "^1.9.4"
+  },
+  "devDependencies": {
+    "@changesets/cli": "^2.27.1",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-interactions": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/blocks": "^8.0.4",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-vite": "^8.0.4",
+    "@storybook/test": "^8.0.4",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.2",
+    "@types/leaflet": "^1.9.8",
+    "@types/react": "^18.2.67",
+    "@types/react-dom": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^7.3.1",
+    "@typescript-eslint/parser": "^7.3.1",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-v8": "^1.4.0",
+    "@vitest/ui": "^1.4.0",
+    "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.8.0",
+    "husky": "^9.0.11",
+    "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
+    "prettier": "^3.2.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^8.0.4",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.2",
+    "vite": "^5.2.6",
+    "vitest": "^1.4.0"
+  },
+  "lint-staged": {
+    "*.{ts,tsx}": [
+      "eslint --fix",
+      "prettier --write"
+    ]
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}