The properties documented as dynamic properties are updated using the relevant Leaflet setter, other properties will not update the component when they are changed after the component is mounted.
All other properties are passed as the options
argument to their corresponding Leaflet element and should work fine for static maps, it is however unlikely that they would updated if you change them afterwards.
You can directly access the Leaflet element created by a component using this.leafletElement
in this component. This leaflet element is usually created in componentWillMount()
, except for the Map
component where it can only be created after the <div>
container is rendered.
These components are base classes used by other components. They can be extended to create custom components but should not be used directly.
Base class extending React.Component
and handling events binding and unbind.
It exposes a leafletElement
property to access the Leaflet
object created for the component.
Base class extending React.Component
for controls.
It exposes a leafletElement
property to access the Leaflet
object created for the control.
Base class extending MapComponent
, handling adding the layer to the map and removing it when relevant. It exposes the layerContainer
property, to be used by extending classes to access their containing layer.
Base class extending MapLayer
with the following methods:
getPathOptions(object props): object
: filters the inputprops
and return a new object of Path options properties.setStyle(object options = {}): void
: alias to the Leaflet elementsetStyle()
.setStyleIfChanged(object fromProps, object toProps): void
: extracts the Path options of the two arguments, and callssetStyle()
with the new options if different from the previous ones.
This is the top-level component that must be mounted for children ones to be rendered. Refer to Leaflet documentation for more information about the properties.
Dynamic properties
animate: boolean
(optional): Iftrue
, panning will always be animated if possible. Defaults tofalse
.bounds: bounds
(optional): A rectangle for the map to contain. It will be centered, and the map will zoom in as close as it can while still showing the full bounds. This property is dynamic, if you change it it will be reflected on the map.boundsOptions: object
(optional): Options passed to thefitBounds()
method.center: latLng
(optional): Center of the map. This property is dynamic, if you change it it will be reflected in the map.className: string
(optional): className property of the<div>
container for the map.maxBounds: bounds
(optional)style: object
(optional): style property of the<div>
container for the map.useFlyTo: boolean
(optional): boolean to control whether to use flyTo functions for bounds and center. If falsemap.fitBounds
andmap.setView
will be used. If truemap.flyToBounds
andmap.flyTo
will be used. Defaults to false.zoom: number
(optional)
Other properties
id: string
(optional): The ID of the<div>
container for the map. If you don't provide it, a unique one will be created.
Dynamic properties
name: string
(optional): Unique name for the pane. Existing Leaflet panes are blacklisted.style: object
(optional): style property of the pane's<div>
className: string
(optional): className property of the pane's<div>
Dynamic properties
position: latLng
(required)draggable: boolean
(optional)icon: Leaflet.Icon
(optional)zIndexOffset: number
(optional)opacity: number
(optional)
The Popup children will be rendered using ReactDOM.render()
, they must be valid React elements.
Dynamic properties
position: latLng
(optional)
The Tooltip children will be rendered using ReactDOM.render()
, they must be valid React elements.
Dynamic properties
url: string
(required)opacity: number
(optional)zIndex: number
(optional)
Dynamic properties
url: string
(required)opacity: number
(optional)
Dynamic properties
url: string
(required)
All other properties are passed as parameters and dynamic, they will cause the layer to redraw if they change.
All vector layers extend the Path component and therefore accept dynamic Path options properties.
Dynamic properties
center: latLng
(required)radius: number
(required)
Dynamic properties
center: latLng
(required)radius: number
(optional)
Dynamic properties
positions: latLngList | latLngList[]
(required)
Dynamic properties
positions: latLngList | latLngList[] | latLngList[][]
(required)
Dynamic properties
bounds: bounds
(required)
Extended LayerGroup
supporting a Popup
child.
Properties
data: GeoJSON
(required). This property will not be updated if it is changed after the component is mounted.
Dynamic properties
opacity: number
(optional)zIndex: number
(optional)
Use the LayerGroup
wrapper component to group children layers together.
Dynamic properties
position: controlPosition
(optional)
Dynamic properties
position: controlPosition
(optional)
This component exposes two children container components, LayersControl.BaseLayer
and LayersControl.Overlay
documented below.
See the layers-control
example for a more advanced usage.
Example usage:
<LayersControl position='topright'>
<LayersControl.BaseLayer name='OpenStreetMap.BlackAndWhite'>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
/>
</LayersControl.BaseLayer>
<LayersControl.BaseLayer name='OpenStreetMap.Mapnik'>
<TileLayer
attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
/>
</LayersControl.BaseLayer>
<LayersControl.Overlay name='Marker with popup'>
<Marker position={[51.51, -0.06]}>
<Popup>
<span>A pretty CSS3 popup. <br/> Easily customizable.</span>
</Popup>
</Marker>
</LayersControl.Overlay>
<LayersControl.Overlay name='Feature group'>
<FeatureGroup color='purple'>
<Popup>
<span>Popup in FeatureGroup</span>
</Popup>
<Circle center={[51.51, -0.06]} radius={200} />
</FeatureGroup>
</LayersControl.Overlay>
</LayersControl>
Properties
name: string
(required). The name of the layer as appearing in theLayersControl
.
Dynamic properties
checked: boolean
(optional, defaults tofalse
). Whether the radio button associated to the layer should be checked or not. The layer will be displayed in the map accordingly.
Properties
name: string
(required). The name of the layer as appearing in theLayersControl
.
Dynamic properties
checked: boolean
(optional, defaults tofalse
). Whether the checkbox associated to the layer should be checked or not. The layer will be displayed in the map accordingly.
Dynamic properties
position: controlPosition
(optional)
Dynamic properties
position: controlPosition
(optional)