Want to add a map to your Gatsby pages? These simple instructions will get you started with a map, a marker which displays a popup when clicked. To see what I'm talking about you can visit the demo at https://andrewl.github.io/gatsby-geo-simple-map
Assuming you have a Gatsby site up and running, the first thing you'll need to do is add the following npm packages, which installs Leaflet and the React and Gatsby wrappers for it
npm i --save leaflet react-leaflet gatsby-plugin-react-leaflet
It's really easy to build a React component for our site which displays a map - we'll give it three properties
The render() method for the component is quite simple, it just substitutes the placeholders with values from the properties above and adds a little logic to determine whether or not to display a marker:
Whilst this component will work fine in develop mode, if you try to build your site with it you'll hit a webpack error. This is because of the nature of the lifecycle of React components and the fact that Gatsby uses server side rendering to build pages.
To fix this, wherever you want to use the component you need to wrap it in a simple test determining whether we're in a real browser or not. This, from index.js, demonstrates the approach
I'm Andrew - a Tech Architect and Agile Delivery Consultant. Find out more about the services I offer here