How to Build a Mapbox Minimap in a React App

Backstory

My team at Evans and Chambers Technology has been working on an application in the geospatial analytics field for the past few months. Using the React library we were able to provide a map which would allow users to:

  • Draw and isolate GeoJSON shapes
  • Identify locations on a map
  • Provide layers for data analytics and trends
  • Have an overview map of the user’s current view

Caveats

That’s right! In order to show an overview map in Mapbox you need to manually render 2 maps.

Module 1… Create Base React Project

The first major step is to set up your base React project. If you already have an application up and running, simply create a blank Mapbox component and skip to module 2, otherwise continue below.

npx create-react-app mapbox-minimap 
cd mapbox-minimap
npm start

Module 2… Install and Setup Base Mapbox Code

Follow the instructions on Mapbox’s website to setup an account and create a web token. We will need this to render a map later on.

Module 3… Adding an Overview Map

The first step in adding our overview map is going to be reorganizing our code so that our map building functionality is no longer stored directly in our useEffect call. The code between building both maps can become extensive, particularly if you are adding additional features to the maps, outside of this tutorial (such as drawing, manipulating GeoJSON, etc).

Module 4… Styling Overview Map

Our last feature is to provide a more true “overview” zoom functionality and to create styled bounds within our overview map to indicate the region that we are viewing on our main map, as defined in the steps below.

--

--

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
Tyler Beall

Tyler Beall

1 Follower

I am a software engineer with experience in designing and building robust and beautiful business applications.