Getting Started with React and MapBox GL JS

Using popup components with marker

First (You Know The Drill):

Below are the links to the previous pieces in this series. They have done pretty well — check them out if you haven’t already, there should be some valuable info in there!

1. Getting Started with React and MapBox GL JS

2. Getting Started With MapBox GL JS: User Location With Geolocation

3. Getting Started with React and MapBox GL JS: User Location Marker with a Marker Component

4. Getting Started with React and MapBox GL JS: Setting Map Markers from an API.

Goal: Set Up Some Popups for Our Markers

We’re going to programmatically place popups for each Marker. This result is this:

You can click on each marker to bring up relevant information. If you’ve been following along in this series you’ll know that we’ve been using an API to render markers, so we can use each marker’s data to render a popup using ReactMapGL’s Popup component. Easy!

What We Need

We need the following:

• Popup component
• selectedHotspot in state.
• A bit of customization.

Popup Component

I’ll let you peruse the Popup documentation yourselves: Popup Component

But we’re going to just be using the required latitude and longitude attributes, as well as creating an onClose event listener. If you have React experience this will be nothing for you.

We need to import the Popup component with our ReactMapGL:

import ReactMapGL, { Marker, Popup } from "react-map-gl";

selectedHotspot In State

Now we create a selectedHotspot key in state, whose value is null .