SHIP IT FASTER

The average enterprise on Netlify ships 140 times per week. Where does your team rank?

ContactSign Up
Community Plugin
View plugin on GitHub

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='&copy; <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>
  )
}
© 2023 Gatsby, Inc.