Skip to content
React Leaflet integration for Gatsbyjs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
package-lock.json Fix for leaflet project name bug May 22, 2019

Getting started

This package takes care of setting up your project for React Leaflet.

The current npm version is for Gatsby v2.

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.


module.exports = {
  plugins: [
      resolve: 'gatsby-plugin-react-leaflet',
      options: {
        linkStyles: true // (default: true) Enable/disable loading stylesheets via CDN

Step 3

When using your react-leaflet components, be sure to wrap them in a check for window. For example:

import React, { Component } from 'react'
import { Map } from 'react-leaflet'

export default class MyMap extends Component {
  render() {
    const { options } = this.props

    if (typeof window !== 'undefined') {
      return (
        <Map {...options}>
          {/* Map code goes here */}
    return null

Without these checks your code will fail when gatsby tries to build it for production.

WebpackError: Minified React error #130

You can’t perform that action at this time.