Skip to main content
Version: v3.x

Vector layers

import {
Circle,
CircleMarker,
MapContainer,
Polyline,
Polygon,
Popup,
Rectangle,
TileLayer,
} from 'react-leaflet'

const center = [51.505, -0.09]

const polyline = [
[51.505, -0.09],
[51.51, -0.1],
[51.51, -0.12],
]

const multiPolyline = [
[
[51.5, -0.1],
[51.5, -0.12],
[51.52, -0.12],
],
[
[51.5, -0.05],
[51.5, -0.06],
[51.52, -0.06],
],
]

const polygon = [
[51.515, -0.09],
[51.52, -0.1],
[51.52, -0.12],
]

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],
]

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

function VectorLayersExample() {
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"
/>
<Circle center={center} pathOptions={fillBlueOptions} radius={200} />
<CircleMarker
center={[51.51, -0.12]}
pathOptions={redOptions}
radius={20}>
<Popup>Popup in CircleMarker</Popup>
</CircleMarker>
<Polyline pathOptions={limeOptions} positions={polyline} />
<Polyline pathOptions={limeOptions} positions={multiPolyline} />
<Polygon pathOptions={purpleOptions} positions={polygon} />
<Polygon pathOptions={purpleOptions} positions={multiPolygon} />
<Rectangle bounds={rectangle} pathOptions={blackOptions} />
</MapContainer>
)
}