Display Geolocations Using Mapbox

Lauren Cunningham
May 14 · 5 min read

JavaScript-based Library for Mapping Anything!

https://github.com/laurencun/react-mapbox-geocoder

Getting Started

GoogleMaps API is a popular choice, but there’s another tool that I highly recommend called Mapbox. It comes with an extensive list of properties that allow you to customize your view and there’s some fantastic built-in styling features as well. Mapbox GL JS is JavaScript-based as you may have guessed by its name. Its magic comes from the integration of the WebGL API, which allows us to display 2D and 3D graphics that the user can interact with.

React developers can access a suite of components that are compatible with Mapbox through React-Map-GL. Simply install react-map-gl and import ReactMapGL in the file where it is to be rendered. Within the ReactMapGL component, you can add width and height, your mapbox API access token and other helpful properties such as onViewPortChange which adjusts the area that the map covers.

Render a Map

import mapboxgl from 'mapbox-gl'

Next you’ll need to request an API access token by creating an account on the Mapbox site. Don’t worry, it’s pretty painless. Once you have signed up, you’ll see a blue ‘create a token’ button in your account page. This will give you an access token that you can use to reach the API endpoints from your application. Add the token to a variable.

mapboxgl.accessToken = 'your-access-token-here'

The last thing you need is a style URL. This is crucial for ensuring the map is displayed as you have specified. There are a couple of ways to define the style source. You can include this link tag in the head of your HTML file:

<link href='https://api.mapbox.com/mapbox-gl-js/v2.2.0/mapbox-gl.css' rel='stylesheet' />

Or you can define the style property within your map object like so:

const map = new mapboxgl.Map({container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-74.5, 40], // starting position [lng, lat]
zoom: 9 // starting zoom
});

As you can see, the container is pointing to an element with an id of ‘map’ that will house the map object. There are many style URL variations that we can choose from. You can find them in the documentation here. This URL points to a map style that includes streets. There is also dark and light mode, satellite view, navigation settings and more. You can even get really fancy and create your own style URL with Mapbox Studio!

Add Markers

var marker = new mapboxgl.Marker({
color: "#FFFFFF",
draggable: true
}).setLngLat([30.5, 50.5]).addTo(map);

This is a great start, but don’t expect to see a marker appear yet. We need to give the marker some styling attributes. In your CSS file, you can refer to the marker class and add width, height, background color, etc. Here’s an example to help you get started:

.marker{
display:flex;
justify-content:center;
align-items:center;
box-sizing:border-box;
width: 30px;
height: 30px;
color:#fff;
background: #4D2D73;
border:solid 2px;
border-radius: 0 70% 70%;
box-shadow:0 0 2px #000;
cursor: pointer;
transform-origin:0 0;
transform: rotateZ(-135deg);
}

Map Data

To get familiar with this process and the variations of requests that can be made, you can use the Mapbox Geocoding API Playground. In the Starbucks example, we could iterate over a list of Starbuck locations and make a request to the forward geocoding endpoint, then map the coordinates we receive to a marker.

Create Pop-up

We can add a pop-up to our markers by mapping our Starbucks store object to a marker with a unique key that points to the specific store and an openPopup property that points to a function. The openPopup function will need to keep the store object in a variable like selectedLocation (or state if using React). That variable will be mapped to a pop-up element (or component in React) to display the information we want to show.

Of course, we will also need to be able to close the pop up. Our pop-up element needs a closePopup property pointing to a function that will remove this store location from the state and in doing so, effectively closing the pop-up.

That might sound like a lot of work but luckily React-Mapbox-GL comes with a pop-up component that includes all the basic styling we need. All you have to do is import Popup from react-map-gl, add the popup component within the ReactMapGL component, give it a closePopup property that points to a function to remove that store from the state and voila!

More Resources

The documentation for Mapbox is fairly detailed and includes sample code and tutorials. Keep in mind that React-Map-GL is a wrapper for Map-GL and does have some limitations. If your component is not displaying as expected, try using the getMap function to access the Map-GL API and its properties.

I’ll leave some documentation and the link to my github repo with examples of searching, adding markers and mapping existing data below. Enjoy!

Geek Culture

Proud to geek out. Follow to join our +500K monthly readers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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