React-Leaflet is a React wrapper for the popular Leaflet mapping library. It provides React components for Leaflet maps, allowing developers to easily integrate interactive maps into their React applications while leveraging the power and flexibility of Leaflet.

Pros

• Seamless integration with React applications
• Simplified API compared to vanilla Leaflet
• Automatic handling of map and layer lifecycle
• Good documentation and active community support

Cons

• Performance can be slower compared to vanilla Leaflet for complex maps
• Limited customization options for some advanced Leaflet features
• Learning curve for developers new to Leaflet concepts
• Occasional version compatibility issues with Leaflet

Code Examples

1. Creating a basic map:

import { MapContainer, TileLayer } from 'react-leaflet'

function MyMap() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px' }}>
      <TileLayer
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      />
    </MapContainer>
  )
}

2. Adding a marker to the map:

import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'

function MapWithMarker() {
  return (
    <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]}>
        <Popup>
          A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
      </Marker>
    </MapContainer>
  )
}

3. Using event handlers:

import { MapContainer, TileLayer, useMapEvents } from 'react-leaflet'

function LocationFinder() {
  const map = useMapEvents({
    click(e) {
      console.log('Clicked at:', e.latlng)
      map.flyTo(e.latlng, map.getZoom())
    },
  })
  return null
}

function InteractiveMap() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px' }}>
      <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      <LocationFinder />
    </MapContainer>
  )
}

Getting Started

1. Install the required packages:

   npm install react react-dom leaflet react-leaflet
   

2. Import the necessary CSS in your main application file:

   import 'leaflet/dist/leaflet.css'
   

3. Create a basic map component:

   import { MapContainer, TileLayer } from 'react-leaflet'
   
   function MyMap() {
     return (
       <MapContainer center={[51.505, -0.09]} zoom={13} style={{ height: '400px' }}>
         <TileLayer
           url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
           attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
         />
       </MapContainer>
     )
   }
   

4. Use the map component in your React application:

   import MyMap from './MyMap'
   
   function App() {
     return (
       <div>
         <h1>My React-Leaflet Map</h1>
         <MyMap />
       </div>
     )
   }