Examples
Using Mapillary vector tiles with map libraries.
Mapbox GL JS
Show Mapillary coverage on a map Filter Mapillary coverage Show a popup with an image preview Show images containing a detected object Color Mapillary layer based on image age Show public organization coverage
Leaflet
Show Mapillary coverage on a map Filter Mapillary coverage Show a popup with an image preview Show images containing a detected object Color Mapillary layer based on image age Show public organization coverage
ArcGIS API for JavaScript
Show Mapillary coverage on a map Filter Mapillary coverage Show a popup with an image preview Show images containing a detected object Color Mapillary layer based on image age Show public organization coverage
Mapillary coverage layer on the map
Add a Mapillary coverage layer to the map using vector tiles.
      
COPY
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Mapillary map layer</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /> <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.js"></script> <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css" rel="stylesheet" /> <style> body { margin:0; padding:0; } #map { position:absolute; top:0; bottom:0; width:100%; } </style> </head> <body> <div id="map"></div> <script> mapboxgl.accessToken = "<your mapbox access token here>"; var map = new mapboxgl.Map({ container: "map", style: "mapbox://styles/mapbox/light-v10", zoom: 12, center: [-87.622088, 41.878781] }); map.on("load", function() { // Add Mapillary sequence layer. // https://www.mapillary.com/developer/tiles-documentation/#sequence-layer map.addLayer({ "id": "mapillary", "type": "line", "source": { "type": "vector", "tiles": ["https://d25uarhxywzl1j.cloudfront.net/v0.1/{z}/{x}/{y}.mvt"], "minzoom": 6, "maxzoom": 14 }, "source-layer": "mapillary-sequences", "layout": { "line-cap": "round", "line-join": "round" }, "paint": { "line-opacity": 0.6, "line-color": "#39AF64", "line-width": 2 } }, "waterway-label"); }); map.addControl(new mapboxgl.NavigationControl()); </script> </body> </html>
Mapillary uses cookies. Some of them are essential for running the site. Others help us improve the site and we ask for your consent to use those. Learn more
I consent