Building Interactive Mapping Apps with Gatsby

Maps are a fundamental part of our everyday experience. We count on them for uses like driving directions, weather reports, or to simply finding the closest coffee shop (or Impossible Burger).

But maps are also a high-impact tool for studying data in a visual way. Take for instance the Johns Hopkins University & Medicine COVID-19 map:

This tool presents public, up-to-date data of Coronavirus cases for study and analysis that are useful in many different contexts. For people like you and me, it helps us stay informed and aware, and also safe. For scientists, it can be applied in real-world efforts to track, treat and study both current and future outbreaks.

So: interactive maps are useful in so many different ways for so many different users. For Gatsby users, they are also surprisingly straightforward to create.

Building mapping apps with Gatsby

Gatsby gives us a way to easily spin up all kinds of new apps without having to worry about all of the less unique parts of our app. This includes things like dealing with Webpack and optimizing our builds — and, now, creating interactive maps!

Because Gatsby’s built on top of React we get to take advantage of really good off-the-shelf mapping tools. For this project we are going to use Leaflet, a Javascript library that allows us to programmatically build interactive maps. And to keep things on the fast and easy track, we will utilize React Leaflet — a React component library that wraps Leaflet and takes advantage of Gatsby’s component architecture.

Now comes the really cool part: using the GraphQL API, we’re able leverage those data tools to integrate our structured geospatial data right into the Gatsby pipeline. This gives us features like being able to dynamically generate location data for a map and automatically create a new page for that location.

Starting a new Gatsby app with React Leaflet

One of the cool features about Gatsby’s Command Line Interface is how it supports Starters. A Starter is a tool to easily scaffold a brand new, fully-featured Gatsby app off what is essentially a template. Setting up a new Starter is pretty straightforward; really, the main requirement is that you start from a Gatsby app. I took advantage of how easy this is and created a new Gatsby Starter for maps.

So, if you’re looking to start with a fresh new app, you can try out Gatsby Starter for Leaflet. This brings the same qualities you can expect from any other Gatsby Starter, plus get you productive with a new Gatsby site that comes with a map already included!

To get started, you can navigate to your project directory and run:

Once Gatsby finishes installing all of the app dependencies, you’ll be able to start up your new mapping app by running:

You should now be able to open the app in your browser and get started with a new mapping app!

Adding React Leaflet to an existing Gatsby app

Recently, Gatsby rolled out a new feature called Recipes that allows us to use the command line to add features to an existing Gatsby project. Gatsby takes advantage of Markdown to bring a familiar React-like syntax right in a Markdown file for adding existing plugins and other features you would typically run from the command line.

This makes it easier than ever to add a map! We now have the opportunity to add an example map right in an existing Gatsby project using this recipe for React Leaflet that I created.

You can get started by running this command in your terminal once you’ve navigated to an existing Gatsby project:

One you run that command, Gatsby will kick off a process that will set up some new files for your map, install all of your dependencies, and even set up an example to get you immediately productive.

Gatsby Map Demo: Gats B’s Restaurant

To show what a mapping app in Gatsby can look like, I set up a demo for a fancy restaurant called Gats B’s.

The demo’s main features is being able to (1) take a list of geographic locations and then (2) display this dynamically on a custom map and then (3) create pages for each location.

This is where we can take advantage of some of Gatsby’s best features: the framework’s ability to query custom data with its GraphQL API and createPages API.

The data gets queried from a GraphCMS project using the gatsby-source-graphql plugin. This allows us to manage Gats B’s locations from within the CMS while immediately making those locations available as data nodes.

As soon as those data nodes are available, we can query them using Gatsby’s useStaticQuery React hook to make that data available on the homepage to list the locations.

But it also lets us generate a new page for each of those locations. Each location is able to receive an individual, unique page with a map pinpointing its location — right alongside all of its metadata like contact information and store hours. And it all happens automatically!

Leveraging Gatsby’s powerful APIs up front allows a lot of flexibility for how we create and manage that content throughout our projects.

Here are links to the demo and the source:

Gats B’s Demo (gatsbs.netlify.app)
Gats B’s on Github (github.com)

Want to learn more about creating maps in a Gatsby app?

You can get started mapping from scratch by adding React Leaflet to a React app with this Egghead.io collection. You can also learn how to build a mapping app with Gatsby with one of these guides:

Colby Fayock is Lead UX and Front End Engineer at Element 84 and author of Jamstack Handbook.

Share on Twitter Share on LinkedIn Share on Facebook Share via Email