Mapbox API is a great tool to build custom, interactive maps. However, integrating Mapbox into a bigger application might feel tricky at first — personally, I found myself spending some time searching for resources outside of the documentation to incorporate key features into my React application. If you can relate, hopefully this article will be the last you’ll ever read! Here I will be breaking down the steps to build an interactive map using two libraries, react-map-gl and react-map-gl-geocoder. Specifically, I’ll go over how to: 1) render a map, 2) incorporate geocoder, 3) create markers, and 4) add popups.

1. Create a React app and install dependencies


Lauryn Kim

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store