Mapbox With Mapillary Images

Mapillary is an interactive map of crowdsourced geotagged photos. For map developers it is a fantastic resource of street level imagery around the world. In this post I want to show you how you can use the Mapillary API to display street level imagery on a Mapbox GL interactive map.

Before we get started let's have a look at the finished map that we are going to create:

A Mapbox Map with Mapillary Images

This little interactive map allows you to explore photographs uploaded to Mapillary around the White House in Washington D.C.. Click on any of the map markers on this map and you can view the selected image directly on the interactive map.

Now let's get building ...


1. Sign Up for a Mapillary API Key

Before you can start using Mapillary photographs on your interactive map you will need a Mapillary API client ID. The Mapillary Blog has a great introduction into how you can register for your free Mapillary API account. Before starting to create your own map you should read Global access to map data with the Mapillary API and follow the provided instructions for opening a Mapillary account and getting your very own client ID.


2. Make a Mapillary API Call

Once you have a client ID you can start using the Mapillary API to make an API call. For our map we want to get photographs which have been uploaded to Mapillary near to the White House. Here is our API call:

https://a.mapillary.com/v3/images?client_id=<YOUR_CLIENT_ID>&closeto=-77.03655123710632,38.8976629708&radius=250


This call will return a GeoJSON doc with Mapillary images within a search radius of 250 metres from the White House (Longitude: -77.03655123710632, Latitude:38.8976629708).

- Remember to insert your own client ID into the above URL.


3. Save the GeoJSON and Upload it to Mapbox Studio

Once you have made your Mapillary API call the GeoJSON will be displayed in your internet browser. Save this as a GeoJSON file. Once you have saved the GeoJSON document you can display it using any interactive map library. For my map I uploaded the saved GeoJSON as a tileset in Mapbox Studio.

Saving the GeoJSON as a Mapbox Studio tileset allows us to add the Mapillary images as a layer in Mapbox GL.

map.on('load', function() {
   map.addLayer({
     id: 'san',
     type: 'circle',
     source: {
       type: 'vector',
       url: 'mapbox://gmapsmania.carbekh7'
     },
     'source-layer': 'centralpark-a2pen7',
         paint: {
     'circle-opacity': 0.8,
     'circle-color': 'blue'
   }
   });
 });

The code above displays the GeoJSON data on a Mapbox map as small blue circles.


4. Turning Data into Photos

The GeoJSON data we downloaded from Mapillary doesn't actually include the URLs for the Mapillary images. However it does include the key used in the URL for each image. Mapillary image URLs take the form of:

https://images.mapillary.com/<KEY>thumb-1024.jpg

In order to display the correct Mapillary photograph when a user clicks on one of the blue circle markers we need to use a Mapbox data expression to grab the key for the photograph from the GeoJSON and then use that key to call the correct Mapillary image URL:

map.on('click', function (e) {
       var text = map.queryRenderedFeatures(e.point,   { layers: ['san'] });
       var title = text[0].properties.key;
       document.getElementById('plate').innerHTML = '<img   src="https://images.mapillary.com/' + title + '/thumb-1024.jpg" height="337">';
});

This function simply queries the GeoJSON for the correct key and then displays an image from Mapillary using that key.

You can see the finished map in action at A Mapbox Map with Mapillary Images. If you are still confused can explore the whole code for the finished map displayed directly beneath the map.