Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

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>
  )
}
© 2024 Gatsby, Inc.