How to make a custom map in Mapbox

Anyone who knows me knows I bike pretty much everywhere. Client meetings, shopping, you name it. So when I came across a news article that contained a list of Amsterdam’s top 15 black cycling spots – the spots where most cycling accidents happen – I was really interested to see where they where.

Problem was the article only provided a list of intersections and road segments, but no map. A bit baffled, I tried to see if I can find the map somewhere else, but nope, no such map exists. So why not make it myself? This is pretty much what this article is about.

Getting the data

This is the list that needs to be turned into usable mapping data.

  1. Jodenbreedstraat / Valkenburgerstraat Intersection
  2. Linnaeusstraat / Wijttenbachweg Intersection
  3. Middenweg / Kruislaan Intersection
  4. Radarweg / Hanedastraat Intersection
  5. Pieter Calandlaan / Jan Puntstraat Intersection
  6. Overtoom / Rijtuigenhof Intersection
  7. Middenweg / A10 On- Off ramp Intersection
  8. Prins Hendrikkade (between Martelaarsgracht and Damrak) Road section
  9. Piet Heinkade (between De Ruijterkade and Blauwhoedenveem) Road section
  10. Nassaukade (between Nassauplein and Eerste Nassaustraat) Road section
  11. Haarlemmerweg (between Kijkduinstraat and Livornostraat) Road section
  12. Koninginneweg (between Emmalaan and Brachthuijzerstraat) Road section
  13. Stadhouderskade (between Eerste van der Helststraat and Nicolaas Berchemstraat) Road section
  14. Nieuwe Hemweg (street off main route Nieuwe Hemweg at Neptunushaven) Road section
  15. Piet Hein tunnel Road section

As you can see, our list above includes a mix of intersections and road segments. We need to convert this list to a more usable format that includes coordinates so we can then plot each list item on the map.

So how do we go about turning this list into a list of coordinates? There are probably lots of different way to do this, but the easiest I could think of was to make a custom Google map, use the built in search functionality to find the spots and manually add the markers and road segments. You can see the process below.

[evp_embed_video url=”″ autoplay=”true” ratio=”0.562″ loop=”true”]

Once all points were plotted, I then exported the data to a KML file.

[evp_embed_video url=”″ autoplay=”true” ratio=”0.562″ loop=”true”]

Because I wanted to style the intersection markers differently from road segments, I split the data in two files. I also converted the files to geoJson format. This is not really necessary, but I find geoJson easier to follow and easier to work with. Converting to geoJson can be easily done by using a free online conversion tool like this one.

Setting up the Mapbox map

Setting up a new Mapbox map is pretty straight forward. First, we need to add this two script files to the head area:

<script src=''></script>
 <link href='' rel='stylesheet' />

Then, in the body tag, we need to add a html element with an id for our map container. Something like this will do.

<div id='map'></div>

A CSS height and width should be specified for the map element.

Next, we can initiate the map by adding this javascript code either in a separate document or at the bottom of the HTML file before the closing </body> tag.

mapboxgl.accessToken = 'pk.eyJ1IjoiODRjb2xvcnMiLCJhIjoiY2ltaXcyeDY5MDAweXZsbTV4cWNqcWF2MiJ9.Br73PXLVOTGnr-D3qYZpjQ';

var map = new mapboxgl.Map({
 container: 'map',
 style: 'mapbox://styles/mapbox/streets-v9',
 center: [4.873955, 52.361457],
 zoom: 12

What this code does is it tells Mapbox to the specified user token (you can get one after signing up for a free account), then use the HTML element with an id of “map” as a container, use the Street preset map style, center the map view to the specified coordinates (those numbers are the long and lat for Amsterdam) and set a zoom level of 12.

Now we should have something that looks like this:

[codepen_embed height=”450″ theme_id=”0″ slug_hash=”bBxmzm” default_tab=”result” user=”84colors”]See the Pen <a href=’’>Mapbox start</a> by Cristiana Bardeanu (<a href=’’>@84colors</a>) on <a href=’’>CodePen</a>.[/codepen_embed]

Add the markers on the map

Next, let’s add our data markers.

[codepen_embed height=”450″ theme_id=”0″ slug_hash=”Lbrjob” default_tab=”result” user=”84colors”]See the Pen <a href=’’>Mapbox full</a> by Cristiana Bardeanu (<a href=’’>@84colors</a>) on <a href=’’>CodePen</a>.[/codepen_embed]

Customizing a default Mapbox style

It might sound obvious, but when deciding on a map style it’s important to consider the overall context the map will be used in. Light and minimalistic map styles like Mapbox Light and Dark styles are better used to show patterns, clusters and work better when zoomed out as they don’t contain much info at higher zoom levels.

In our case, while they looked pretty cool, these minimalistic styles failed to provide enough context for the intersection points. That’s why I decided to go with the more detailed Streets style.

The default Streets style was a bit too bright and cheerful for the subject matter, though. So I decided to tone the colors down a bit and remove some elements that made the map look too busy to improve contrast for the markers.

The process of making a custom Mapbox map style is pretty simple and you can see it in full in the short screen cap below. Here are the basic steps:

  1. Login to Mapbox
  2. Create a new style
  3. Choose a starting style, in our case Streets
  4. Click around on various elements you want to customize and play with the colors. Hit publish when done.
  5. Replace the style reference in the javascript code with the new map style code.

[evp_embed_video url=”″ ratio=”0.562″ poster=””]

I also made a full screen version of the map here with some added features like navigation controls, fly to marker and other little tweaks. Check the source code for more info!