React Leaflet

https://react-leaflet.js.org
Admin
Provides React components for building interactive maps using the Leaflet JavaScript library.
Tokens:37,029
Snippets:309
Trust Score:8.1
Update:1 day ago
Show doc for...
Tokens:
Raw
### Install React Leaflet with pnpm

Source: https://react-leaflet.js.org/docs/start-installation/

Install React Leaflet package using pnpm.

```bash
pnpm add react-leaflet@next
```

--------------------------------

### Install React Leaflet with npm

Source: https://react-leaflet.js.org/docs/start-installation/

Install React Leaflet package using npm.

```bash
npm install react-leaflet@next
```

--------------------------------

### Install peer dependencies with npm

Source: https://react-leaflet.js.org/docs/start-installation/

Install React, React DOM, and Leaflet as peer dependencies using npm.

```bash
npm install react@rc react-dom@rc leaflet
```

--------------------------------

### Install peer dependencies with pnpm

Source: https://react-leaflet.js.org/docs/start-installation/

Install React, React DOM, and Leaflet as peer dependencies using pnpm.

```bash
pnpm add react@rc react-dom@rc leaflet
```

--------------------------------

### Tooltip example with Circle, CircleMarker, Marker, Polygon, and Rectangle

Source: https://react-leaflet.js.org/docs/example-tooltips/

A single live editor example showing how to attach Tooltip components to various react-leaflet elements. It includes a Circle with a click counter that updates the tooltip text, a CircleMarker, a Marker with both Popup and Tooltip, a Polygon with a sticky tooltip, and a Rectangle with a permanent tooltip. The example uses a MapContainer with an OpenStreetMap TileLayer.

```tsx
const center = [51.505, -0.09]

const multiPolygon = [
  [
    [51.51, -0.12],
    [51.51, -0.13],
    [51.53, -0.13],
  ],
  [
    [51.51, -0.05],
    [51.51, -0.07],
    [51.53, -0.07],
  ],
]

const rectangle = [
  [51.49, -0.08],
  [51.5, -0.06],
]

function TooltipCircle() {
  const [clickedCount, setClickedCount] = useState(0)
  const eventHandlers = useMemo(
    () => ({
      click() {
        setClickedCount((count) => count + 1)
      },
    }),
    [],
  )

  const clickedText =
    clickedCount === 0
      ? 'Click this Circle to change the Tooltip text'
      : `Circle click: ${clickedCount}`

  return (
    <Circle
      center={center}
      eventHandlers={eventHandlers}
      pathOptions={{ fillColor: 'blue' }}
      radius={200}>
      <Tooltip>{clickedText}</Tooltip>
    </Circle>
  )
}

render(
  <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <TooltipCircle />
    <CircleMarker
      center={[51.51, -0.12]}
      pathOptions={{ color: 'red' }}
      radius={20}>
      <Tooltip>Tooltip for CircleMarker</Tooltip>
    </CircleMarker>
    <Marker position={[51.51, -0.09]}>
      <Popup>Popup for Marker</Popup>
      <Tooltip>Tooltip for Marker</Tooltip>
    </Marker>
    <Polygon pathOptions={{ color: 'purple' }} positions={multiPolygon}>
      <Tooltip sticky>sticky Tooltip for Polygon</Tooltip>
    </Polygon>
    <Rectangle bounds={rectangle} pathOptions={{ color: 'black' }}>
      <Tooltip direction="bottom" offset={[0, 20]} opacity={1} permanent>
        permanent Tooltip for Rectangle
      </Tooltip>
    </Rectangle>
  </MapContainer>,
)
```

--------------------------------

### Install TypeScript definitions with pnpm

Source: https://react-leaflet.js.org/docs/start-installation/

Install Leaflet's TypeScript definitions as a dev dependency using pnpm.

```bash
pnpm add -D @types/leaflet
```

--------------------------------

### Install TypeScript definitions with npm

Source: https://react-leaflet.js.org/docs/start-installation/

Install Leaflet's TypeScript definitions as a dev dependency using npm.

```bash
npm install -D @types/leaflet
```

--------------------------------

### LayerGroup and FeatureGroup example

Source: https://react-leaflet.js.org/docs/example-other-layers/

Renders a map with a LayerGroup containing circles and a FeatureGroup with a popup, circle, and rectangle. Uses pathOptions for styling. The example is shown in a live editor.

```tsx
const center = [51.505, -0.09]
const rectangle = [
  [51.49, -0.08],
  [51.5, -0.06],
]

const fillBlueOptions = { fillColor: 'blue' }
const fillRedOptions = { fillColor: 'red' }
const greenOptions = { color: 'green', fillColor: 'green' }
const purpleOptions = { color: 'purple' }

render(
  <MapContainer center={center} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <LayerGroup>
      <Circle center={center} pathOptions={fillBlueOptions} radius={200} />
      <Circle
        center={center}
        pathOptions={fillRedOptions}
        radius={100}
        stroke={false}
      />
      <LayerGroup>
        <Circle
          center={[51.51, -0.08]}
          pathOptions={greenOptions}
          radius={100}
        />
      </LayerGroup>
    </LayerGroup>
    <FeatureGroup pathOptions={purpleOptions}>
      <Popup>Popup in FeatureGroup</Popup>
      <Circle center={[51.51, -0.06]} radius={200} />
      <Rectangle bounds={rectangle} />
    </FeatureGroup>
  </MapContainer>,
)
```

--------------------------------

### SVGOverlay example with MapContainer and TileLayer

Source: https://react-leaflet.js.org/docs/example-svg-overlay/

Use this example to render an SVG overlay on a Leaflet map. It sets a position and bounds, and includes a TileLayer with OpenStreetMap tiles. The SVGOverlay contains a rectangle, circle, and text with specified attributes.

```tsx
const position = [51.505, -0.09]
const bounds = [
  [51.49, -0.08],
  [51.5, -0.06],
]

render(
  <MapContainer center={position} zoom={13} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <SVGOverlay attributes={{ stroke: 'red' }} bounds={bounds}>
      <rect x="0" y="0" width="100%" height="100%" fill="blue" />
      <circle r="5" cx="10" cy="10" fill="red" />
      <text x="50%" y="50%" stroke="white">
        text
      </text>
    </SVGOverlay>
  </MapContainer>,
)
```

--------------------------------

### useMapEvent hook example

Source: https://react-leaflet.js.org/docs/api-map/

Shows how to use the useMapEvent hook to attach a single 'click' event handler that sets the map view.

```tsx
function MyComponent() {
  const map = useMapEvent('click', () => {
    map.setView([50.5, 30.5], map.getZoom())
  })
  return null
}

function MyMapComponent() {
  return (
    <MapContainer center={[50.5, 30.5]} zoom={13}>
      <MyComponent />
    </MapContainer>
  )
}
```

--------------------------------

### Panes example with Pane component

Source: https://react-leaflet.js.org/docs/example-panes/

This example demonstrates how to use the Pane component to control the z-index of map layers. It defines two bounds arrays (outer and inner) and a BlinkingPane component that toggles the visibility of a cyan rectangle every 5 seconds. The example renders a MapContainer with a TileLayer, the BlinkingPane, and nested Pane components for yellow and purple rectangles, showing how z-index affects layer stacking.

```tsx
const outer = [
  [50.505, -29.09],
  [52.505, 29.09],
]
const inner = [
  [49.505, -2.09],
  [53.505, 2.09],
]

function BlinkingPane() {
  const [render, setRender] = useState(true)
  const timerRef = useRef()
  useEffect(() => {
    timerRef.current = setInterval(() => {
      setRender((r) => !r)
    }, 5000)
    return () => {
      clearInterval(timerRef.current)
    }
  }, [])

  return render ? (
    <Pane name="cyan-rectangle" style={{ zIndex: 500 }}>
      <Rectangle bounds={outer} pathOptions={{ color: 'cyan' }} />
    </Pane>
  ) : null
}

render(
  <MapContainer bounds={outer} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <BlinkingPane />
    <Pane name="yellow-rectangle" style={{ zIndex: 499 }}>
      <Rectangle bounds={inner} pathOptions={{ color: 'yellow' }} />
      <Pane name="purple-rectangle">
        <Rectangle bounds={outer} pathOptions={{ color: 'purple' }} />
      </Pane>
    </Pane>
  </MapContainer>,
)
```

--------------------------------

### Animated panning example with useMapEvent and setView

Source: https://react-leaflet.js.org/docs/example-animated-panning/

This snippet defines a component that uses useMapEvent to listen for clicks and calls map.setView with an animate option based on a ref. It renders a checkbox to toggle animation and a MapContainer with a TileLayer. The example is rendered with render(<AnimateExample />).

```tsx
function SetViewOnClick({ animateRef }) {
  const map = useMapEvent('click', (e) => {
    map.setView(e.latlng, map.getZoom(), {
      animate: animateRef.current || false,
    })
  })

  return null
}

function AnimateExample() {
  const animateRef = useRef(false)

  return (
    <>
      <p>
        <label>
          <input
            type="checkbox"
            onChange={() => {
              animateRef.current = !animateRef.current
            }}
          />
          Animate panning
        </label>
      </p>
      <MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        <SetViewOnClick animateRef={animateRef} />
      </MapContainer>
    </>
  )
}

render(<AnimateExample />)
```

--------------------------------

### Import SVGOverlay with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Imports the SVGOverlay component using a bare specifier for bundler-based setups.

```javascript
import { SVGOverlay } from 'react-leaflet/SVGOverlay'
```

--------------------------------

### useMapEvents hook example

Source: https://react-leaflet.js.org/docs/api-map/

Shows how to use the useMapEvents hook to attach event handlers for 'click' and 'locationfound' events to the map instance.

```tsx
function MyComponent() {
  const map = useMapEvents({
    click: () => {
      map.locate()
    },
    locationfound: (location) => {
      console.log('location found:', location)
    },
  })
  return null
}

function MyMapComponent() {
  return (
    <MapContainer center={[50.5, 30.5]} zoom={13}>
      <MyComponent />
    </MapContainer>
  )
}
```

--------------------------------

### React Leaflet Minimap Control Example

Source: https://react-leaflet.js.org/docs/example-react-control/

A complete example of a custom React Leaflet control that renders a miniature map. It defines position classes, a MinimapBounds component that syncs the minimap with the parent map, and a MinimapControl component that renders the minimap. The example is displayed in a live editor and includes a render call.

```tsx
// Classes used by Leaflet to position controls
const POSITION_CLASSES = {
  bottomleft: 'leaflet-bottom leaflet-left',
  bottomright: 'leaflet-bottom leaflet-right',
  topleft: 'leaflet-top leaflet-left',
  topright: 'leaflet-top leaflet-right',
}

const BOUNDS_STYLE = { weight: 1 }

function MinimapBounds({ parentMap, zoom }) {
  const minimap = useMap()

  // Clicking a point on the minimap sets the parent's map center
  const onClick = useCallback(
    (e) => {
      parentMap.setView(e.latlng, parentMap.getZoom())
    },
    [parentMap],
  )
  useMapEvent('click', onClick)

  // Keep track of bounds in state to trigger renders
  const [bounds, setBounds] = useState(parentMap.getBounds())
  const onChange = useCallback(() => {
    setBounds(parentMap.getBounds())
    // Update the minimap's view to match the parent map's center and zoom
    minimap.setView(parentMap.getCenter(), zoom)
  }, [minimap, parentMap, zoom])

  // Listen to events on the parent map
  const handlers = useMemo(() => ({ move: onChange, zoom: onChange }), [])
  useEventHandlers({ instance: parentMap }, handlers)

  return <Rectangle bounds={bounds} pathOptions={BOUNDS_STYLE} />
}

function MinimapControl({ position, zoom }) {
  const parentMap = useMap()
  const mapZoom = zoom || 0

  // Memoize the minimap so it's not affected by position changes
  const minimap = useMemo(
    () => (
      <MapContainer
        style={{ height: 80, width: 80 }}
        center={parentMap.getCenter()}
        zoom={mapZoom}
        dragging={false}
        doubleClickZoom={false}
        scrollWheelZoom={false}
        attributionControl={false}
        zoomControl={false}>
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
        <MinimapBounds parentMap={parentMap} zoom={mapZoom} />
      </MapContainer>
    ),
    [],
  )

  const positionClass =
    (position && POSITION_CLASSES[position]) || POSITION_CLASSES.topright
  return (
    <div className={positionClass}>
      <div className="leaflet-control leaflet-bar">{minimap}</div>
    </div>
  )
}

function ReactControlExample() {
  return (
    <MapContainer center={[51.505, -0.09]} zoom={6} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <MinimapControl position="topright" />
    </MapContainer>
  )
}

render(<ReactControlExample />)
```

--------------------------------

### Full example using createElementHook for a Square component

Source: https://react-leaflet.js.org/docs/core-architecture/

Complete example of a custom Square component using createElementHook, createElementObject, and useLeafletContext. It creates a Leaflet rectangle, updates its bounds when props change, and manages layer addition/removal in a useEffect. The component is used inside a MapContainer with a TileLayer.

```tsx
import {
  createElementHook,
  createElementObject,
  useLeafletContext,
} from '@react-leaflet/core'
import L from 'leaflet'
import { useEffect } from 'react'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function createSquare(props, context) {
  return createElementObject(new L.Rectangle(getBounds(props)), context)
}

function updateSquare(instance, props, prevProps) {
  if (props.center !== prevProps.center || props.size !== prevProps.size) {
    instance.setBounds(getBounds(props))
  }
}

const useSquareElement = createElementHook(createSquare, updateSquare)

function Square(props) {
  const context = useLeafletContext()
  const elementRef = useSquareElement(props, context)

  useEffect(() => {
    const container = context.layerContainer || context.map
    container.addLayer(elementRef.current.instance)

    return () => {
      container.removeLayer(elementRef.current.instance)
    }
  }, [])

  return null
}

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000} />
    </MapContainer>
  )
}
```

--------------------------------

### useMap hook example

Source: https://react-leaflet.js.org/docs/api-map/

Shows how to use the useMap hook to access the Leaflet map instance in a child component and log its center.

```tsx
function MyComponent() {
  const map = useMap()
  console.log('map center:', map.getCenter())
  return null
}

function MyMapComponent() {
  return (
    <MapContainer center={[50.5, 30.5]} zoom={13}>
      <MyComponent />
    </MapContainer>
  )
}
```

--------------------------------

### Import Rectangle with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Imports the Rectangle component using a bare specifier for bundler-based setups.

```javascript
import { Rectangle } from 'react-leaflet/Rectangle'
```

--------------------------------

### Import createControlComponent with bare specifier

Source: https://react-leaflet.js.org/docs/core-introduction/

Shows how to import and use createControlComponent from the @react-leaflet/core package using a bare specifier (package name). This example creates a ZoomControl component using Leaflet's Control.Zoom.

```javascript
import { createControlComponent } from '@react-leaflet/core'
import { Control } from 'leaflet'

export const ZoomControl = createControlComponent(
  (props) => new Control.Zoom(props),
)
```

--------------------------------

### useLayerLifecycle hook example with Square component

Source: https://react-leaflet.js.org/docs/core-architecture/

Replaces the useEffect hook with useLayerLifecycle to manage layer lifecycle. The example defines a Square component that creates a Leaflet rectangle and updates its bounds when props change. It uses createElementHook, createElementObject, and useLeafletContext from @react-leaflet/core.

```tsx
import {
  createElementHook,
  createElementObject,
  useLayerLifecycle,
  useLeafletContext,
} from '@react-leaflet/core'
import L from 'leaflet'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function createSquare(props, context) {
  return createElementObject(new L.Rectangle(getBounds(props)), context)
}

function updateSquare(instance, props, prevProps) {
  if (props.center !== prevProps.center || props.size !== prevProps.size) {
    instance.setBounds(getBounds(props))
  }
}

const useSquareElement = createElementHook(createSquare, updateSquare)

function Square(props) {
  const context = useLeafletContext()
  const elementRef = useSquareElement(props, context)
  useLayerLifecycle(elementRef.current, context)

  return null
}

const center = [51.505, -0.09]

render(
  <MapContainer center={center} zoom={13}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <Square center={center} size={1000} />
  </MapContainer>,
)
```

--------------------------------

### createPathHook example: Square component with custom hook

Source: https://react-leaflet.js.org/docs/core-architecture/

Shows how to use createPathHook to create a custom hook for a Leaflet Rectangle. The example defines createSquare and updateSquare functions, creates the element hook, then the path hook, and uses it in a Square component. The MyMap component renders the Square inside a MapContainer with a TileLayer. createPathHook also calls useEventHandlers and useLayerLifecycle hooks.

```tsx
import {
  createElementHook,
  createElementObject,
  createPathHook,
} from '@react-leaflet/core'
import L from 'leaflet'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function createSquare(props, context) {
  return createElementObject(new L.Rectangle(getBounds(props)), context)
}

function updateSquare(instance, props, prevProps) {
  if (props.center !== prevProps.center || props.size !== prevProps.size) {
    instance.setBounds(getBounds(props))
  }
}

const useSquareElement = createElementHook(createSquare, updateSquare)
const useSquare = createPathHook(useSquareElement)

function Square(props) {
  useSquare(props)
  return null
}

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000} />
    </MapContainer>
  )
}
```

--------------------------------

### Using createPathComponent to define a custom Square component

Source: https://react-leaflet.js.org/docs/core-architecture/

Complete example of a custom Square component using createPathComponent. It defines createSquare and updateSquare functions, and uses the component in a map with a Popup. Requires @react-leaflet/core and leaflet.

```tsx
import {
  createElementObject,
  createPathComponent,
  extendContext,
} from '@react-leaflet/core'
import L from 'leaflet'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function createSquare(props, context) {
  const square = new L.Rectangle(getBounds(props))
  return createElementObject(
    square,
    extendContext(context, { overlayContainer: square }),
  )
}

function updateSquare(instance, props, prevProps) {
  if (props.center !== prevProps.center || props.size !== prevProps.size) {
    instance.setBounds(getBounds(props))
  }
}

const Square = createPathComponent(createSquare, updateSquare)

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000}>
        <Popup>Hello Popup</Popup>
      </Square>
    </MapContainer>
  )
}
```

--------------------------------

### Import createControlComponent with absolute specifier

Source: https://react-leaflet.js.org/docs/core-introduction/

Shows how to import and use createControlComponent from the @react-leaflet/core package using an absolute specifier (CDN URL). This example creates a ZoomControl component using Leaflet's Control.Zoom.

```javascript
import { createControlComponent } from 'https://cdn.esm.sh/@react-leaflet/core'
import { Control } from 'https://cdn.esm.sh/leaflet'

export const ZoomControl = createControlComponent(
  (props) => new Control.Zoom(props),
)
```

--------------------------------

### Full Square component with children support

Source: https://react-leaflet.js.org/docs/core-architecture/

Complete example of a custom Square component that supports children like Popup and Tooltip. It uses createContainerComponent and sets the overlayContainer in the context via extendContext.

```tsx
import {
  createContainerComponent,
  createElementHook,
  createElementObject,
  createPathHook,
  extendContext,
} from '@react-leaflet/core'
import L from 'leaflet'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function createSquare(props, context) {
  const square = new L.Rectangle(getBounds(props))
  return createElementObject(
    square,
    extendContext(context, { overlayContainer: square }),
  )
}

function updateSquare(instance, props, prevProps) {
  if (props.center !== prevProps.center || props.size !== prevProps.size) {
    instance.setBounds(getBounds(props))
  }
}

const useSquareElement = createElementHook(createSquare, updateSquare)
const useSquare = createPathHook(useSquareElement)
const Square = createContainerComponent(useSquare)

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000}>
        <Popup>Hello Popup</Popup>
      </Square>
    </MapContainer>
  )
}
```

--------------------------------

### Create a custom Square component with createLeafComponent

Source: https://react-leaflet.js.org/docs/core-architecture/

Replaces a custom component with the createLeafComponent function, which also provides a ref to the Leaflet element instance. The example defines a Square component using createElementHook and createPathHook, and shows it used inside a MapContainer with a TileLayer.

```tsx
import {
  createElementHook,
  createElementObject,
  createLeafComponent,
  createPathHook,
} from '@react-leaflet/core'
import L from 'leaflet'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function createSquare(props, context) {
  return createElementObject(new L.Rectangle(getBounds(props)), context)
}

function updateSquare(instance, props, prevProps) {
  if (props.center !== prevProps.center || props.size !== prevProps.size) {
    instance.setBounds(getBounds(props))
  }
}

const useSquareElement = createElementHook(createSquare, updateSquare)
const useSquare = createPathHook(useSquareElement)
const Square = createLeafComponent(useSquare)

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000} />
    </MapContainer>
  )
}
```

--------------------------------

### Import VideoOverlay with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the VideoOverlay component using a bare module specifier.

```javascript
import { VideoOverlay } from 'react-leaflet/VideoOverlay'
```

--------------------------------

### Import from module entry-point

Source: https://react-leaflet.js.org/docs/start-installation/

Import all components and hooks from the React Leaflet package entry point.

```javascript
import { MapContainer, TileLayer, useMap } from 'react-leaflet'
```

--------------------------------

### Import useMap with bare specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the useMap hook using a bare specifier.

```js
import { useMap } from 'react-leaflet/hooks'
```

--------------------------------

### External State Example with MapContainer and DisplayPosition

Source: https://react-leaflet.js.org/docs/example-external-state/

This snippet shows a complete react-leaflet example where the map instance is stored in state via the ref callback. The DisplayPosition component subscribes to the map's 'move' event to update the displayed coordinates and provides a reset button that calls map.setView. The map is rendered with a TileLayer from OpenStreetMap.

```tsx
const center = [51.505, -0.09]
const zoom = 13

function DisplayPosition({ map }) {
  const [position, setPosition] = useState(() => map.getCenter())

  const onClick = useCallback(() => {
    map.setView(center, zoom)
  }, [map])

  const onMove = useCallback(() => {
    setPosition(map.getCenter())
  }, [map])

  useEffect(() => {
    map.on('move', onMove)
    return () => {
      map.off('move', onMove)
    }
  }, [map, onMove])

  return (
    <p>
      latitude: {position.lat.toFixed(4)}, longitude: {position.lng.toFixed(4)}{' '}
      <button onClick={onClick}>reset</button>
    </p>
  )
}

function ExternalStateExample() {
  const [map, setMap] = useState(null)

  const displayMap = useMemo(
    () => (
      <MapContainer
        center={center}
        zoom={zoom}
        scrollWheelZoom={false}
        ref={setMap}>
        <TileLayer
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
      </MapContainer>
    ),
    [],
  )

  return (
    <div>
      {map ? <DisplayPosition map={map} /> : null}
      {displayMap}
    </div>
  )
}

render(<ExternalStateExample />)
```

--------------------------------

### Import ImageOverlay with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the ImageOverlay component using a bare module specifier.

```javascript
import { ImageOverlay } from 'react-leaflet/ImageOverlay'
```

--------------------------------

### Import Tooltip with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Tooltip component using a bare specifier.

```javascript
import { Tooltip } from 'react-leaflet/Tooltip'
```

--------------------------------

### Import WMSTileLayer with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the WMSTileLayer component using a bare module specifier.

```javascript
import { WMSTileLayer } from 'react-leaflet/WMSTileLayer'
```

--------------------------------

### Import TileLayer with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the TileLayer component using a bare module specifier.

```javascript
import { TileLayer } from 'react-leaflet/TileLayer'
```

--------------------------------

### TypeScript import from entry-point

Source: https://react-leaflet.js.org/docs/start-installation/

TypeScript definitions are only available from the package entry-point; importing from subpaths lacks types.

```typescript
// ⚠️ No types available here
import { MapContainer } from 'react-leaflet/MapContainer'

// ✅ Types are available here
import { MapContainer } from 'react-leaflet'
```

--------------------------------

### Import useMapEvent with bare specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the useMapEvent hook using a bare specifier.

```js
import { useMapEvent } from 'react-leaflet/hooks'
```

--------------------------------

### Import CircleMarker with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the CircleMarker component using a bare specifier.

```javascript
import { CircleMarker } from 'react-leaflet/CircleMarker'
```

--------------------------------

### Import Popup with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Popup component using a bare specifier.

```javascript
import { Popup } from 'react-leaflet/Popup'
```

--------------------------------

### Define path options for styling

Source: https://react-leaflet.js.org/docs/example-vector-layers/

Define path options objects for styling the vector layers with different colors.

```tsx
const fillBlueOptions = { fillColor: 'blue' }
const blackOptions = { color: 'black' }
const limeOptions = { color: 'lime' }
const purpleOptions = { color: 'purple' }
const redOptions = { color: 'red' }
```

--------------------------------

### Basic Map with Marker and Popup (TSX)

Source: https://react-leaflet.js.org/docs/start-setup/

Add this code to your app to display a map with a marker and popup. Requires following the installation steps and ensuring Leaflet's CSS is loaded and the map container has a defined height.

```tsx
<MapContainer center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
  <TileLayer
    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    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>
```

--------------------------------

### Improved Square component with update logic

Source: https://react-leaflet.js.org/docs/core-architecture/

Full example of a Square component that adds a Leaflet rectangle to the map on mount and removes it on unmount, while conditionally updating its bounds when props change. Uses useLeafletContext, useRef, and two useEffect hooks.

```tsx
import { useLeafletContext } from '@react-leaflet/core'
import L from 'leaflet'
import { useEffect, useRef } from 'react'

function getBounds(props) {
  return L.latLng(props.center).toBounds(props.size)
}

function Square(props) {
  const context = useLeafletContext()
  const squareRef = useRef()
  const propsRef = useRef(props)

  useEffect(() => {
    squareRef.current = new L.Rectangle(getBounds(props))
    const container = context.layerContainer || context.map
    container.addLayer(squareRef.current)

    return () => {
      container.removeLayer(squareRef.current)
    }
  }, [])

  useEffect(() => {
    if (
      props.center !== propsRef.current.center ||
      props.size !== propsRef.current.size
    ) {
      squareRef.current.setBounds(getBounds(props))
    }
    propsRef.current = props
  }, [props.center, props.size])

  return null
}

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000} />
    </MapContainer>
  )
}
```

--------------------------------

### Import VideoOverlay with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the VideoOverlay component using an absolute URL from the esm.sh CDN.

```javascript
import { VideoOverlay } from 'https://cdn.esm.sh/react-leaflet/VideoOverlay'
```

--------------------------------

### Import ScaleControl with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the ScaleControl component using a bare specifier.

```javascript
import { ScaleControl } from 'react-leaflet/ScaleControl'
```

--------------------------------

### Square component with MapContainer usage

Source: https://react-leaflet.js.org/docs/core-architecture/

Complete example of a Square component that adds a Leaflet Rectangle to the map. It uses useLeafletContext to access the map context, creates the rectangle in a useEffect, adds it to the layer container or map, and removes it on cleanup. The component returns null because Leaflet handles rendering. Includes a MyMap component that renders the Square inside a MapContainer with a TileLayer.

```tsx
import { useLeafletContext } from '@react-leaflet/core'
import L from 'leaflet'
import { useEffect } from 'react'

function Square(props) {
  const context = useLeafletContext()

  useEffect(() => {
    const bounds = L.latLng(props.center).toBounds(props.size)
    const square = new L.Rectangle(bounds)
    const container = context.layerContainer || context.map
    container.addLayer(square)

    return () => {
      container.removeLayer(square)
    }
  })

  return null
}

const center = [51.505, -0.09]

function MyMap() {
  return (
    <MapContainer center={center} zoom={13}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <Square center={center} size={1000} />
    </MapContainer>
  )
}
```

--------------------------------

### Import ZoomControl with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the ZoomControl component using a bare specifier.

```javascript
import { ZoomControl } from 'react-leaflet/ZoomControl'
```

--------------------------------

### Import AttributionControl with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the AttributionControl component using a bare specifier.

```javascript
import { AttributionControl } from 'react-leaflet/AttributionControl'
```

--------------------------------

### Combining hooks to create a component

Source: https://react-leaflet.js.org/docs/core-architecture/

Shows the three functions combined to create a component: createElementHook, createPathHook, and createContainerComponent. This is the manual approach before using the higher-level factory.

```ts
const useSquareElement = createElementHook(createSquare, updateSquare)
const useSquare = createPathHook(useSquareElement)
const Square = createContainerComponent(useSquare)
```

--------------------------------

### ESM import full library from CDN

Source: https://react-leaflet.js.org/docs/start-installation/

Import all components and hooks from the React Leaflet package entry point via esm.sh.

```javascript
import {
  MapContainer,
  TileLayer,
  useMap,
} from 'https://cdn.esm.sh/react-leaflet'
```

--------------------------------

### Import useMapEvents with bare specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the useMapEvents hook using a bare specifier.

```js
import { useMapEvents } from 'react-leaflet/hooks'
```

--------------------------------

### Import useMap with absolute specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the useMap hook using an absolute specifier from the esm.sh CDN.

```js
import { useMap } from 'https://cdn.esm.sh/react-leaflet/hooks'
```

--------------------------------

### Import Circle with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Circle component using a bare specifier.

```javascript
import { Circle } from 'react-leaflet/Circle'
```

--------------------------------

### Import Marker with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Marker component using a bare specifier.

```javascript
import { Marker } from 'react-leaflet/Marker'
```

--------------------------------

### Import Polyline with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Polyline component using a bare specifier.

```javascript
import { Polyline } from 'react-leaflet/Polyline'
```

--------------------------------

### Import MapContainer with bare specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the MapContainer component using a bare specifier.

```js
import { MapContainer } from 'react-leaflet/MapContainer'
```

--------------------------------

### Import ImageOverlay with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the ImageOverlay component using an absolute URL from the esm.sh CDN.

```javascript
import { ImageOverlay } from 'https://cdn.esm.sh/react-leaflet/ImageOverlay'
```

--------------------------------

### Import Tooltip with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Tooltip component using an absolute specifier from the CDN.

```javascript
import { Tooltip } from 'https://cdn.esm.sh/react-leaflet/Tooltip'
```

--------------------------------

### Import Polygon with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Polygon component using a bare specifier.

```javascript
import { Polygon } from 'react-leaflet/Polygon'
```

--------------------------------

### Import TileLayer with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the TileLayer component using an absolute URL from the esm.sh CDN.

```javascript
import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'
```

--------------------------------

### Import GeoJSON with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the GeoJSON component using the bare specifier.

```js
import { GeoJSON } from 'react-leaflet/GeoJSON'
```

--------------------------------

### MediaOverlayProps

Source: https://react-leaflet.js.org/docs/core-api/

Interface for media overlay props, extending ImageOverlayOptions and EventedProps.

```APIDOC
## MediaOverlayProps

### Description
Interface for media overlay props, extending ImageOverlayOptions and EventedProps.

### Type
```ts
interface MediaOverlayProps extends ImageOverlayOptions, EventedProps {
  bounds: LatLngBoundsExpression
}
```

### Properties
- **bounds** (LatLngBoundsExpression) - Required - The bounds of the overlay.
```

--------------------------------

### Import Popup with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Popup component using an absolute specifier from the CDN.

```javascript
import { Popup } from 'https://cdn.esm.sh/react-leaflet/Popup'
```

--------------------------------

### Creating the Leaflet Rectangle instance

Source: https://react-leaflet.js.org/docs/core-architecture/

Uses React's useEffect hook to create the square instance. Calculates bounds from the center and size props using L.latLng().toBounds(), then creates a new L.Rectangle with those bounds.

```ts
const bounds = L.latLng(props.center).toBounds(props.size)
const square = new L.Rectangle(bounds)
```

--------------------------------

### Import WMSTileLayer with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the WMSTileLayer component using an absolute URL from the esm.sh CDN.

```javascript
import { WMSTileLayer } from 'https://cdn.esm.sh/react-leaflet/WMSTileLayer'
```

--------------------------------

### Import useMapEvent with absolute specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the useMapEvent hook using an absolute specifier from the esm.sh CDN.

```js
import { useMapEvent } from 'https://cdn.esm.sh/react-leaflet/hooks'
```

--------------------------------

### Import SVGOverlay with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Imports the SVGOverlay component using an absolute specifier from the esm.sh CDN.

```javascript
import { SVGOverlay } from 'https://cdn.esm.sh/react-leaflet/SVGOverlay'
```

--------------------------------

### Fit map to rectangle bounds with useMap and Rectangle

Source: https://react-leaflet.js.org/docs/example-view-bounds/

Defines inner and outer bounds, renders two Rectangle components, and uses useMap to call fitBounds on click. The selected rectangle is highlighted with a red color.

```tsx
const innerBounds = [
  [49.505, -2.09],
  [53.505, 2.09],
]
const outerBounds = [
  [50.505, -29.09],
  [52.505, 29.09],
]

const redColor = { color: 'red' }
const whiteColor = { color: 'white' }

function SetBoundsRectangles() {
  const [bounds, setBounds] = useState(outerBounds)
  const map = useMap()

  const innerHandlers = useMemo(
    () => ({
      click() {
        setBounds(innerBounds)
        map.fitBounds(innerBounds)
      },
    }),
    [map],
  )
  const outerHandlers = useMemo(
    () => ({
      click() {
        setBounds(outerBounds)
        map.fitBounds(outerBounds)
      },
    }),
    [map],
  )

  return (
    <>
      <Rectangle
        bounds={outerBounds}
        eventHandlers={outerHandlers}
        pathOptions={bounds === outerBounds ? redColor : whiteColor}
      />
      <Rectangle
        bounds={innerBounds}
        eventHandlers={innerHandlers}
        pathOptions={bounds === innerBounds ? redColor : whiteColor}
      />
    </>
  )
}

render(
  <MapContainer bounds={outerBounds} scrollWheelZoom={false}>
    <TileLayer
      attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <SetBoundsRectangles />
  </MapContainer>,
)
```

--------------------------------

### Import LayerGroup with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the LayerGroup component using the bare specifier.

```js
import { LayerGroup } from 'react-leaflet/LayerGroup'
```

--------------------------------

### Import Pane with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Use this import to load the Pane component using the bare module specifier 'react-leaflet/Pane'. The name prop must be unique and not one of the default Leaflet pane names.

```javascript
import { Pane } from 'react-leaflet/Pane'
```

--------------------------------

### Import useMapEvents with absolute specifier

Source: https://react-leaflet.js.org/docs/api-map/

Import the useMapEvents hook using an absolute specifier from the esm.sh CDN.

```js
import { useMapEvents } from 'https://cdn.esm.sh/react-leaflet/hooks'
```

--------------------------------

### Import AttributionControl with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the AttributionControl component using an absolute specifier from the esm.sh CDN.

```javascript
import { AttributionControl } from 'https://cdn.esm.sh/react-leaflet/AttributionControl'
```

--------------------------------

### Import CircleMarker with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the CircleMarker component using an absolute specifier from the esm.sh CDN.

```javascript
import { CircleMarker } from 'https://cdn.esm.sh/react-leaflet/CircleMarker'
```

--------------------------------

### Import Marker with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Marker component using an absolute specifier from the CDN.

```javascript
import { Marker } from 'https://cdn.esm.sh/react-leaflet/Marker'
```

--------------------------------

### Import modules with bare specifiers

Source: https://react-leaflet.js.org/docs/start-installation/

Import React Leaflet modules using bare specifiers when using a bundler like webpack.

```javascript
import { MapContainer } from 'react-leaflet/MapContainer'
import { TileLayer } from 'react-leaflet/TileLayer'
import { useMap } from 'react-leaflet/hooks'
```

--------------------------------

### Import LayersControl with bare specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the LayersControl component using a bare specifier.

```javascript
import { LayersControl } from 'react-leaflet/LayersControl'
```

--------------------------------

### Import ZoomControl with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the ZoomControl component using an absolute specifier from the esm.sh CDN.

```javascript
import { ZoomControl } from 'https://cdn.esm.sh/react-leaflet/ZoomControl'
```

--------------------------------

### Import Polyline with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the Polyline component using an absolute specifier from the esm.sh CDN.

```javascript
import { Polyline } from 'https://cdn.esm.sh/react-leaflet/Polyline'
```

--------------------------------

### Import ScaleControl with absolute specifier

Source: https://react-leaflet.js.org/docs/api-components/

Import the ScaleControl component using an absolute specifier from the esm.sh CDN.

```javascript
import { ScaleControl } from 'https://cdn.esm.sh/react-leaflet/ScaleControl'
```

--------------------------------

### ESM imports from CDN (individual modules)

Source: https://react-leaflet.js.org/docs/start-installation/

Import React Leaflet modules directly from esm.sh CDN using ES module syntax.

```javascript
import { MapContainer } from 'https://cdn.esm.sh/react-leaflet/MapContainer'
import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'
import { useMap } from 'https://cdn.esm.sh/react-leaflet/hooks'
```
Tokens:
Raw