Building a Country Highlighting Tool With Mapbox

For a recent Byfrost Bridge project, we needed to create a dynamic map that highlighted the areas in which our client had done work. After evaluating the requirements and looking into our options, we decided to build this using Mapbox. Their integration with OpenStreetMap and ability to easily customize the tilesets and style on our map was an instant hook. Let’s see what we’re building.

In this example, we are going to create a pop up that shows some basic stats about the country. This method can be used for any kind of Mapbox tileset, but we we using data from Natural Earth Data. Below is a link for the vector tileset we are using. Click the download countries link on that page and let’s get started!

Getting an API access token

To begin building, you’ll need to create a Mapbox Studio account. Once you get signed up, you’ll need to get your API access token. Login to your Mapbox account and click into the Account button on the bottom left of dashboard. Then on API access tokens on the top right. Look for your Default Public Token.

The next couple steps assume that you are using local files to run this code. If you want to play around with it in Codepen, here is a quick template that has the start of the project.

Go ahead and copy then paste it into a new Javascript file named `main.js` like this:

Now we just need some basic HTML boilerplate. Create a file called index.html and add the following:

Now let’s add some styles. Create a style.css and add this:

If you load up your page, you probably won’t see anything yet. Our next step is to add a map. Add the following code to main.js:

If you used the Codepen template from above, you should already have everything up to this point.

Load up the page and you should see the start of your map!

At this point, we need to load in our custom tileset in Mapbox Studio. If you haven’t already, download the Natural Earth Data from earlier. Open Mapbox Studio and click on Tilesets. From there click on “New tileset”

Upload the entire zip file you downloaded from Natural Earth Data.

Wait for it to finish uploading and processing.

Once it’s done, click into your custom tileset.

We need to load this custom tileset into your map now. We create a function on map load. Create a custom event listener and call addLayer inside it.

Look for the Map ID on the right hand side bar.

You’ll also need the source layer name, which is that bit starting with `ne_`. Grab this and the Map ID and add them to your JS code.

We should now have loaded the tileset and your map should look something like this:

Right now this isn’t super helpful. All of the countries are showing, which makes it hard to distinguish anything. Let’s filter the data a bit.

For this, we want to filter by ISO Alpha3 Codes, which exist in our tileset under the ID “ADM0_A3_IS”.

We add a line to the load function to start filtering:

Much better. Now our map highlights three countries: Nigeria, Australia, and the USA. If we want to add more countries, we can just edit the array of country codes. We could even pull these codes from an API and add them that way.

Finally, let’s make the map interactive. For this, we are going to use the API provided by REST Countries. Luckily, they have an endpoint that accepts ISO Alpha3 codes!

Now we have an interactive map with highlighted countries!

Hope this helps! Reach out on Twitter — I’d love to hear you!