Introducing Mapbox and React Deep Dives

This post introduces a new series I will be writing that takes a deep dive into Mapbox. The majority of the posts will focus on how you can use Mapbox with React, but a few guides will additionally focus on other key parts of the Mapbox suite such as Mapbox Studio and various Mapbox APIs.

In August 2011 I needed to pick one more elective to round out my sophomore year. I do not remember exactly what led me to choosing Introduction to Geographic Information Systems (GIS), but it was probably because I figured it would compliment my political science major. This unexpectedly became my favorite course I took at Grinnell and set me in slow motion down the path of learning to code and creating interactive web maps.

ArcGIS remained the pinnacle of all things mapping in my mind for a long time which led me to a summer internship with the Maine Department of Environmental Protection (DEP). I got to spend a whole summer delineating watersheds and making maps. Sharing a similar fate to the product of the once great Maine paper mills, the need arose to be able to share some of the mapping products in a non-print and non-static format.

And thus began my long journey in learning how to create interactive and data-driven map applications. I tried ESRI storymaps. They were great for the simplest of use cases. Then I stumbled upon Leaflet and Google Charts. This set me down the path of learning to code and five to six false starts before it finally started to take. After about a year of working with Leaflet and creating some truly horrible websites, I happened upon Mapbox and it was game over.

Beautiful basemaps? Check. Fantastic documentation and a wide variety of features? Check. Easy ways to manage spatial data and create highly customized maps? Check? And all in one place? Check.

I have been using Mapbox since 2015 and it is one of the few tools that has remained a constant in my stack which is a testament to both its stability and constant improvements. Thanks to Mapbox, I have been able to build out many data-driven map applications that were only the stuff of dreams back when I first started down this road. This only rings more true after the release of Mapbox GL JS V2 (check out my earlier post on how to create a 3D map).

However, this learning process has not been all puppies and rainbows. My keyboard is rutted out on the “m”, “a”, “p” keys from extensive google searches. In all my searching I never found a definitive resource for all things Mapbox. Now that I am committing to doing a lot more technical writing, I figured this could be a perfect project. In the coming weeks, I am planning to write a series of blog posts that detail the ins and outs of working with Mapbox in the context of React. I sure wish a guide like this existed when I first started so hoping that this can help some folks out. Happy mapping!