Child components

MapContainer required

Child components can only be used as descendants of a MapContainer component.

Props

Child components in React Leaflet use their props as options when creating the corresponding Leaflet instance, as described in Leaflet's documentation.

By default these props should be treated as immutable, only the props explicitely documented as mutable in this page will affect the Leaflet element when changed.

Behaviors

Child components in React Leaflet support common behaviors described below, implementing logic related to React or Leaflet.

ParentComponent behavior

The component will render its mutable React children components, based on the children?: ReactNode prop.

<Marker position={[50.5, 30.5]}>
  <Popup>Hello world</Popup>
</Marker>

Evented behavior

Adds support for the eventHandlers?: LeafletEventHandlerFnMap prop, adding and removing event listeners.

<Marker
  position={[50.5, 30.5]}
  eventHandlers={{
    click: () => {
      console.log('marker clicked')
    },
  }}
/>

Attribution behavior

Applies to layer components, making their attribution prop mutable.

<GeoJSON attribution="&copy; credits due..." data={...} />

Pane behavior

Applies to layer components, adding support for the pane prop or context from a Pane component ancestor.

<Circle center={[50.5, 30.5]} radius={200} pane="my-existing-pane" />

<Pane name="custom" style={{ zIndex: 100 }}>
  <Circle center={[50.5, 30.5]} radius={200} />
</Pane>

Path behavior

Applies to vector layer components, adding support for a pathOptions: PathOptions mutable prop.

<Circle center={[50.5, 30.5]} radius={200} pathOptions={{ color: 'blue' }} />

MediaOverlay behavior

Applies to components using Leaflet's ImageOverlay class, adding support for mutable bounds: LatLngBounds, opacity: number and zIndex: number props.

const bounds = new LatLngBounds([40.712216, -74.22655], [40.773941, -74.12544])

<ImageOverlay
  url="http://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"
  bounds={bounds}
  opacity={0.5}
  zIndex={10}
/>

CircleMarker behavior

Applies to components using Leaflet's CircleMarker class, adding support for mutable center: LatLngExpression and radius: number props.

<Circle center={[50.5, 30.5]} radius={200} />

GridLayer behavior

Applies to components using Leaflet's GridLayer class, adding support for mutable opacity: number and zIndex: number props.

<TileLayer url="..." opacity={0.5} zIndex={10} />

Control behavior

Applies to control components, making their position: ControlPosition prop mutable.

<ZoomControl position="bottomleft" />

UI layers

Marker

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
draggable	boolean	No	Yes
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
icon	Leaflet.Icon	No	Yes
opacity	number	No	Yes
pane	string	No	No	Pane
position	LatLngExpression	Yes	Yes
zIndexOffset	number	No	Yes

Absolute specifier import

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

Bare specifier import

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

Popup

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
position	LatLngExpression	No	Yes

Absolute specifier import

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

Bare specifier import

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

Tooltip

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
position	LatLngExpression	No	Yes

Absolute specifier import

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

Bare specifier import

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

Raster layers

TileLayer

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
opacity	number	No	Yes	GridLayer
pane	string	No	No	Pane
url	string	Yes	Yes
zIndex	number	No	Yes	GridLayer

Absolute specifier import

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

Bare specifier import

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

WMSTileLayer

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
opacity	number	No	Yes	GridLayer
pane	string	No	No	Pane
params	WMSParams	No	Yes
url	string	Yes	No
zIndex	number	No	Yes	GridLayer

Absolute specifier import

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

Bare specifier import

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

ImageOverlay

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
bounds	LatLngBounds	Yes	Yes	MediaOverlay
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
opacity	number	No	Yes	MediaOverlay
url	string	Yes	Yes
zIndex	number	No	Yes	MediaOverlay

Absolute specifier import

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

Bare specifier import

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

VideoOverlay

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
bounds	LatLngBounds	Yes	Yes	MediaOverlay
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
play	boolean	No	Yes
url	string, string[] or HTMLVideoElement	Yes	Yes
zIndex	number	No	Yes	MediaOverlay

Absolute specifier import

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

Bare specifier import

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

Vector layers

Circle

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
center	LatLngExpression	Yes	Yes
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
pathOptions	PathOptions	No	Yes	Path
radius	number	Yes	Yes

Absolute specifier import

import { Circle } from 'https://cdn.esm.sh/react-leaflet/Circle'

Bare specifier import

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

CircleMarker

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
center	LatLngExpression	Yes	Yes
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
pathOptions	PathOptions	No	Yes	Path
radius	number	Yes	Yes

Absolute specifier import

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

Bare specifier import

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

Polyline

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
pathOptions	PathOptions	No	Yes	Path
positions	LatLngExpression[] or LatLngExpression[][]	Yes	Yes

Absolute specifier import

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

Bare specifier import

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

Polygon

Leaflet reference

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
pathOptions	PathOptions	No	Yes	Path
positions	LatLngExpression[], LatLngExpression[][] or LatLngExpression[][][]	Yes	Yes

Absolute specifier import

import { Polygon } from 'https://cdn.esm.sh/react-leaflet/Polygon'

Bare specifier import

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

Rectangle

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
bounds	LatLngBoundsExpression	Yes	Yes
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
pathOptions	PathOptions	No	Yes	Path

Absolute specifier import

import { Rectangle } from 'https://cdn.esm.sh/react-leaflet/Rectangle'

Bare specifier import

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

SVGOverlay

Leaflet reference

Props

The attributes must be valid SVGSVGElement properties.

Prop	Type	Required	Mutable	Behavior
attributes	Record<string, string>	No	No
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
pane	string	No	No	Pane

Absolute specifier import

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

Bare specifier import

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

Other layers

LayerGroup

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane

Absolute specifier import

import { LayerGroup } from 'https://cdn.esm.sh/react-leaflet/LayerGroup'

Bare specifier import

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

FeatureGroup

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane

Absolute specifier import

import { FeatureGroup } from 'https://cdn.esm.sh/react-leaflet/FeatureGroup'

Bare specifier import

import { FeatureGroup } from 'react-leaflet/FeatureGroup'

GeoJSON

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
attribution	string	No	Yes	Attribution
children	ReactNode	No	Yes	ParentComponent
data	GeoJsonObject	Yes	No
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
pane	string	No	No	Pane
style	PathOptions or StyleFunction	No	Yes

Absolute specifier import

import { GeoJSON } from 'https://cdn.esm.sh/react-leaflet/GeoJSON'

Bare specifier import

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

Controls

ZoomControl

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
position	ControlPosition	No	Yes

Absolute specifier import

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

Bare specifier import

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

AttributionControl

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
position	ControlPosition	No	Yes

Absolute specifier import

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

Bare specifier import

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

LayersControl

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
collapsed	boolean	No	Yes
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
position	ControlPosition	No	Yes

Absolute specifier import

import { LayersControl } from 'https://cdn.esm.sh/react-leaflet/LayersControl'

Bare specifier import

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

LayersControl.BaseLayer

Attached to the LayersControl component.

Note: a ref cannot be attached to this element, it should be attached to the child element.

Props

Prop	Type	Required	Mutable	Behavior
checked	boolean	No	Yes
children	ReactNode	No	Yes	ParentComponent
name	string	Yes	No

LayersControl.Overlay

Attached to the LayersControl component.

Note: a ref cannot be attached to this element, it should be attached to the child element.

Props

Prop	Type	Required	Mutable	Behavior
checked	boolean	No	Yes
children	ReactNode	No	Yes	ParentComponent
name	string	Yes	No

ScaleControl

Leaflet reference

Props

Prop	Type	Required	Mutable	Behavior
eventHandlers	LeafletEventHandlerFnMap	No	Yes	Evented
position	ControlPosition	No	Yes

Absolute specifier import

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

Bare specifier import

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

Other

Pane

Leaflet reference

Props

caution

The name prop must be unique to the pane and different from the default Leaflet pane names

Prop	Type	Required	Mutable	Behavior
children	ReactNode	No	Yes	ParentComponent
className	string	No	No
name	string	Yes	No
pane	string	No	No	Pane
style	CSSProperties	No	No

Absolute specifier import

import { Pane } from 'https://cdn.esm.sh/react-leaflet/Pane'

Bare specifier import

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