4.0.3 • Published 1 year ago
gatsby-plugin-react-leaflet v4.0.3
Getting started
This package takes care of setting up your project for React Leaflet.
The current npm version is for Gatsby v5.
Step 1
First install the packages.
npm i --save gatsby-plugin-react-leaflet react-leaflet leaflet
Step 2
Add the plugin to your Gatsby configuration.
gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-react-leaflet',
options: {
linkStyles: true // (default: true) Enable/disable loading stylesheets via CDN
}
}
]
}
Step 3
Add your React Leaflet components.
import React from 'react'
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet'
const IndexPage = () => {
return (
<MapContainer style={{ height: '400px' }} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
<TileLayer
attribution='© <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>
)
}
4.0.1
1 year ago
4.0.0
1 year ago
4.0.3
1 year ago
4.0.2
1 year ago
3.0.3
2 years ago
3.0.2
3 years ago
3.0.1
3 years ago
3.0.0
3 years ago
2.0.13
4 years ago
2.0.12
4 years ago
2.0.11
5 years ago
2.0.11-beta.0
5 years ago
2.0.10
5 years ago
2.0.9
5 years ago
2.0.8
5 years ago
2.0.7
5 years ago
2.0.6
5 years ago
2.0.5
5 years ago
2.0.4
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
2.0.0-alpha.3
6 years ago
1.0.7
6 years ago
2.0.0-alpha.2
6 years ago
1.0.6
6 years ago
1.0.5
6 years ago
1.0.4
6 years ago
2.0.0-alpha.1
6 years ago
2.0.0-beta.1
6 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago