{"library":"react-leaflet","title":"React Leaflet","description":"React Leaflet provides React components that wrap the Leaflet map library, offering a declarative way to integrate interactive maps into React applications. It abstracts Leaflet's imperative API into a set of composable React components, making it easier to manage map state and layers. The current stable version is 5.0.0, which requires React v19 and Leaflet v1.9.0 as peer dependencies. The library generally follows the major version releases of React and Leaflet, introducing breaking changes when these core dependencies update significantly. Its primary differentiator is providing a idiomatic React experience for Leaflet, avoiding direct DOM manipulation often associated with Leaflet's vanilla JavaScript API, and offering a robust, type-safe (TypeScript-friendly) development experience for geospatial applications within the React ecosystem.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-leaflet"],"cli":null},"imports":["import { MapContainer } from 'react-leaflet'","import { TileLayer } from 'react-leaflet'","import { Marker, Popup } from 'react-leaflet'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from 'react';\nimport { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';\nimport 'leaflet/dist/leaflet.css'; // Don't forget Leaflet's CSS!\n\n// Fix for default marker icon issue with Webpack/Vite\nimport L from 'leaflet';\ndelete (L.Icon.Default.prototype as any)._getIconUrl;\nL.Icon.Default.mergeOptions({\n  iconRetinaUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon-2x.png',\n  iconUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-icon.png',\n  shadowUrl: 'https://unpkg.com/leaflet@1.9.4/dist/images/marker-shadow.png',\n});\n\nfunction MyMapComponent() {\n  const position: [number, number] = [51.505, -0.09];\n\n  return (\n    <MapContainer center={position} zoom={13} scrollWheelZoom={false} style={{ height: '500px', width: '100%' }}>\n      <TileLayer\n        attribution='&copy; <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a> contributors'\n        url=\"https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png\"\n      />\n      <Marker position={position}>\n        <Popup>\n          A pretty CSS3 popup. <br /> Easily customizable.\n        </Popup>\n      </Marker>\n    </MapContainer>\n  );\n}\n\nexport default MyMapComponent;\n","lang":"typescript","description":"This quickstart demonstrates how to set up a basic Leaflet map in a React component using `react-leaflet`, including a `TileLayer` and a `Marker` with a `Popup`. It also addresses a common issue with missing default marker icons.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}