How to Upgrade to New Mapbox

by Roman Bilusiak

Curiosio shows the route over the interactive map. We use Mapbox as a map provider for curiosio.com site. The map is integrated via Mapbox.js API and Leaflet.js for drawing routes and points. We received notification about the end-of-life for the classic styles we were using. There was (and still is as of the end of April) a deadline by 1st of June 2020. This post is about the upgrade to the new map. Those who are in similar situation can benefit from the practical information how to make the switch.

Tiles

The new thing is called Static Tiles API. First of all, a new custom style has to be created in Mapbox Studio. Maps are called styles in Mapbox world. This was the most difficult part — to make a new style look similar to our previous one.

Mapbox offers a tool Cartogram that helps to create new map styles from the screenshot, but we were not able to replicate our previous style close enough. For some reason generated style was very different from the original one. Auto-styled map looked ugly and useless.

Automatic map from the screenshot by Cartogram

Manually edited new map

After the new style is created and works in the studio it’s time to do some programming. As we used Leaflet as builtin into Mapbox.js the overall migration was done by a simple change to the map initialization. However, update of Mapbox.js to the newer version was required (at least v3.0.1).

This is old code:

var map = L.mapbox.map('map', 'mapbox.streets')
    .setView([40, -74.50], 9)

This is new code:

var map = L.mapbox.map('map')
    .setView([40, -74.50], 9)
    .addLayer(L.mapbox.styleLayer('mapbox://styles/mapbox/streets-v11'));

Images

We use Static Images API to generate route previews for Open Graph. We used a geeky 3rd party lib mapbox-static-paths. It had a few limitations and bugs, like the inability to create an image with a particular map zoom level. But in general, it worked great until this deprecation.

It’s pretty straightforward to generate an image using Mapbox manual, but this is insufficient in our case. It happened that new Mapbox SDK does more sophisticated things similarly to what “mapbox-static-paths” did. The only difference is that official SDK operates layers like Leaflet.js. Here is a simple example of how to generate static image using Mapbox SDK:

const mbxStatic = require('@mapbox/mapbox-sdk/services/static');
const staticClient = mbxStatic({accessToken: ACCESS_TOKEN});
staticClient.getStaticImage({
  ownerId: 'mapbox’,
  styleId: 'streets-v11’,
  width: 200,
  height: 300,
  position: {coordinates: [12, 13], zoom: 3},
  overlays: [
    {marker: {coordinates: [12.2, 12.8]}},
    {marker: {size: 'large’, coordinates: [14, 13.2], label: 'marker’, color: '#000’}}
  ]
})

Result

Curiosio with the new map

Next

This map is barely the map that we need. We will fine-tune the style to make water, parks, roads, labels more distinguishable. The map is only the background. The route is the foreground, it must be distinguishable itself over the map. Play with Curiosio for your imaginary next cool road trip. Stay safe, curious, and tuned!