Using popup components with marker

Dallas Bille
Sep 19 · 4 min read

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 .

Whenever we click a Marker, we set state as the hotspot object we assigned to the Marker. We do this by passing down an onClick callback function, which returns it’s Marker ‘s object.

You’ll remember that we iterated all of our wifiHotspots, and created a Marker for each one. This is a great spot to pass down the callback.

We do this by writing an onClick in our Marker , and passing in the object to setState with.

Afterwards, our loadWifiMarkers function look like this:


setSelectedHotspot Function

As you can see, we haven’t written the setSelectedHotspot function yet. It’s the most basic of state functions:

setSelectedHotspot = object => {
this.setState({
selectedHotspot: object
});
};

Popup Logic

So now we can set state when a marker is clicked. Then what?

All we need to do is write a ternary operator in our JSX to conditionally render the Popup of our selectedHotspot. If selectedHotspot is an object, render its Popup, if not, do nothing.

Then we insert an onClose key, whose value is a function that switches selectedHotspot back to null when clicked.

To clarify…

Marker onClick => puts object in selectedHotspot state, component re-renders, at which point the ternary operator will see the object in state and render the Popup component.

onClose => sets selectedHotspot state to null, re-renders component and doesn’t render Popup.


onClose Function

closePopup = () => {
this.setState({
selectedHotspot: null
});
};

This gets added below theloadWifiMarkers function.

{this.state.selectedHotspot !== null ? (
<Popup
latitude={parseFloat(this.state.selectedHotspot.latitude)}
longitude={parseFloat(this.state.selectedHotspot.longitude)}
onClose={this.closePopup}
>
<p>HotSpot Information</p>
</Popup>
) : null}

You will notice that this opens up the Popup on our clicked Marker . When you click the Popup, it closes.

Now we can just add whatever information we’d like from our selectedHotspot.

{this.state.selectedHotspot !== null ? (
<Popup
latitude={parseFloat(this.state.selectedHotspot.latitude)}
longitude={parseFloat(this.state.selectedHotspot.longitude)}
onClose={this.closePopup}
>
<div>
<p>
<b>Location:</b> {this.state.selectedHotspot.location}{", "}
{this.state.selectedHotspot.city}
</p>
<p>
<b>Type:</b> {this.state.selectedHotspot.location_t}
</p>
</div>
</Popup>
) : null}

And we get this:


Conclusion

Now we can programmatically render popups with our Popup component, which displays information about each hotspot. This makes for a much better user experience and a basic functioning application.

Thanks so much for reading!

Better Programming

Advice for programmers.

Dallas Bille

Written by

Full Stack Web Developer, Adventurer, Soccer Player/Coach

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade