Skip to content
React Leaflet integration for Gatsbyjs
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
LICENSE
README.md
gatsby-node.js
gatsby-ssr.js
index.js
package-lock.json Fix for leaflet project name bug May 22, 2019
package.json

README.md

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.

gatsby-config.js

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 */}
        </Map>
      )
    }
    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.