Skip to main content
Version: v5.x (next)

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

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
draggablebooleanNoYes
eventHandlersLeafletEventHandlerFnMapNoYesEvented
iconLeaflet.IconNoYes
opacitynumberNoYes
panestringNoNoPane
positionLatLngExpressionYesYes
zIndexOffsetnumberNoYes
import { Marker } from 'https://cdn.esm.sh/react-leaflet/Marker'

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
positionLatLngExpressionNoYes
import { Popup } from 'https://cdn.esm.sh/react-leaflet/Popup'

Tooltip

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
positionLatLngExpressionNoYes
import { Tooltip } from 'https://cdn.esm.sh/react-leaflet/Tooltip'

Raster layers

TileLayer

Leaflet reference

Props

PropTypeRequiredMutableBehavior
eventHandlersLeafletEventHandlerFnMapNoYesEvented
opacitynumberNoYesGridLayer
panestringNoNoPane
urlstringYesYes
zIndexnumberNoYesGridLayer
import { TileLayer } from 'https://cdn.esm.sh/react-leaflet/TileLayer'

WMSTileLayer

Leaflet reference

Props

PropTypeRequiredMutableBehavior
eventHandlersLeafletEventHandlerFnMapNoYesEvented
opacitynumberNoYesGridLayer
panestringNoNoPane
paramsWMSParamsNoYes
urlstringYesNo
zIndexnumberNoYesGridLayer
import { WMSTileLayer } from 'https://cdn.esm.sh/react-leaflet/WMSTileLayer'

ImageOverlay

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
boundsLatLngBoundsYesYesMediaOverlay
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
opacitynumberNoYesMediaOverlay
urlstringYesYes
zIndexnumberNoYesMediaOverlay
import { ImageOverlay } from 'https://cdn.esm.sh/react-leaflet/ImageOverlay'

VideoOverlay

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
boundsLatLngBoundsYesYesMediaOverlay
eventHandlersLeafletEventHandlerFnMapNoYesEvented
playbooleanNoYes
urlstring, string[] or HTMLVideoElementYesYes
zIndexnumberNoYesMediaOverlay
import { VideoOverlay } from 'https://cdn.esm.sh/react-leaflet/VideoOverlay'

Vector layers

Circle

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
centerLatLngExpressionYesYes
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
pathOptionsPathOptionsNoYesPath
radiusnumberYesYes
import { Circle } from 'https://cdn.esm.sh/react-leaflet/Circle'

CircleMarker

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
centerLatLngExpressionYesYes
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
pathOptionsPathOptionsNoYesPath
radiusnumberYesYes
import { CircleMarker } from 'https://cdn.esm.sh/react-leaflet/CircleMarker'

Polyline

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
pathOptionsPathOptionsNoYesPath
positionsLatLngExpression[] or LatLngExpression[][]YesYes
import { Polyline } from 'https://cdn.esm.sh/react-leaflet/Polyline'

Polygon

Leaflet reference

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
pathOptionsPathOptionsNoYesPath
positionsLatLngExpression[], LatLngExpression[][] or LatLngExpression[][][]YesYes
import { Polygon } from 'https://cdn.esm.sh/react-leaflet/Polygon'

Rectangle

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
boundsLatLngBoundsExpressionYesYes
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
pathOptionsPathOptionsNoYesPath
import { Rectangle } from 'https://cdn.esm.sh/react-leaflet/Rectangle'

SVGOverlay

Leaflet reference

Props

The attributes must be valid SVGSVGElement properties.

PropTypeRequiredMutableBehavior
attributesRecord<string, string>NoNo
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
panestringNoNoPane
import { SVGOverlay } from 'https://cdn.esm.sh/react-leaflet/SVGOverlay'

Other layers

LayerGroup

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
import { LayerGroup } from 'https://cdn.esm.sh/react-leaflet/LayerGroup'

FeatureGroup

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
import { FeatureGroup } from 'https://cdn.esm.sh/react-leaflet/FeatureGroup'

GeoJSON

Leaflet reference

Props

PropTypeRequiredMutableBehavior
attributionstringNoYesAttribution
childrenReactNodeNoYesParentComponent
dataGeoJsonObjectYesNo
eventHandlersLeafletEventHandlerFnMapNoYesEvented
panestringNoNoPane
stylePathOptions or StyleFunctionNoYes
import { GeoJSON } from 'https://cdn.esm.sh/react-leaflet/GeoJSON'

Controls

ZoomControl

Leaflet reference

Props

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

AttributionControl

Leaflet reference

Props

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

LayersControl

Leaflet reference

Props

PropTypeRequiredMutableBehavior
collapsedbooleanNoYes
eventHandlersLeafletEventHandlerFnMapNoYesEvented
positionControlPositionNoYes
import { LayersControl } from 'https://cdn.esm.sh/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

PropTypeRequiredMutableBehavior
checkedbooleanNoYes
childrenReactNodeNoYesParentComponent
namestringYesNo

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

PropTypeRequiredMutableBehavior
checkedbooleanNoYes
childrenReactNodeNoYesParentComponent
namestringYesNo

ScaleControl

Leaflet reference

Props

PropTypeRequiredMutableBehavior
eventHandlersLeafletEventHandlerFnMapNoYesEvented
positionControlPositionNoYes
import { ScaleControl } from 'https://cdn.esm.sh/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

PropTypeRequiredMutableBehavior
childrenReactNodeNoYesParentComponent
classNamestringNoNo
namestringYesNo
panestringNoNoPane
styleCSSPropertiesNoNo
import { Pane } from 'https://cdn.esm.sh/react-leaflet/Pane'