@binghamchris/gatsby-plugin-react-leaflet
v4.0.3
Published
React Leaflet for Gatsby
Downloads
3
Maintainers
Readme
Package origins
This repository was forked from dweirich/gatsby-plugin-react-leaflet.
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>
)
}