How to Embed Mapillary’s Street Level Imagery Into Any Mapping Platform

GIS Contributor

Updated:

Mapillary recently debuted its stand-alone viewer, MapillaryJS.  MapillaryJS is a platform-agnostic WebGL JavaScript library for displaying street level photos which allows for integration with a variety of mapping applications.  Jan Erik Solem, the CEO of Mapillary, notes, “Our goal with MapillaryJS is to enhance maps and help better visualize GIS information by making street level photos available on all platforms and all services.”

MapillaryJS is open source and its collection of over 50 million photos is the result of crowdsourcing (more about that process here: The Future of Street Level Photos in Mapping).  Solem further explains, “At Mapillary, we’re committed to building the best photo representation of the world and  providing those photos and data for anyone to use, regardless of what mapping tools people use. We’re completely agnostic to what platform works best for you. We ♡ OpenStreetMap but you may have other needs or requirements, for example connecting with your GIS data through our ArcGIS solution, or using a native mobile app on iOS/Android.”

How to Embed MapillaryJS

Solem has provided some instructions on how to embed MappillaryJS into any mapping platform (e.g. OpenStreetMap, Mapbox, Esri, Google, Apple).  Mapillary also offers examples of MappillaryJS embedded into various mapping applications.  Solem explains that the reason for the standalone component is that “by breaking the viewer out into a simple stand-alone component, we can make sure that every integration gets the same powerful features in terms of photo navigation, object detection, 3D object rendering, and whatever we cook up next. No extra work for you!

How to create a Mapillary viewer

Here’s how to create a Mapillary viewer and set some basic parameters.

var mly = new Mapillary
.Viewer(‘mly’, // container id
‘cjJ1SUtVOEMtdy11b21JM0tyYTZIQTo2ZmVjNTQ3YWQ0OWI2Yjgx’, // your Client ID
{
key: ‘Xo3DR9FUdP3nh0jHZhgeig‘,  // photoId at which the viewer initializes
uis: [‘simple’, ‘simplenav’] // UIs viewer will depend on (optional)
})



Free weekly newsletter

Fill out your e-mail address to receive our newsletter!
Email:  

By entering your email address you agree to receive our newsletter and agree with our privacy policy.
You may unsubscribe at any time.



You can easily customize behavior and load additional modules (see the documentation for details). We built MapillaryJS to be modular with a small, lightweight basic viewer that can be extended to display traffic signs, 3D and a lot more.

mapillary-map

The Future of Mapillary

From Solem:

We’re starting out with support for a WebGL component with 3D transitions, unified navigation, panoramas, HTML canvas rendering as fallback, a cover feature, and showing detected objects. Next up we’re adding point clouds, smoothed trajectories, and dragging functionality to be able to completely remove the old viewer from Mapillary.com.

Since MapillaryJS standardizes our work on one single viewer all client integrations will have access to our upcoming features. Currently in the plans are object tagging, rendering map markers, rendering full 3D models, and dynamic journeys. Let us know if you have any requests by filing an issue on GitHub.

How to Contribute to MapillaryJS

Mapillary invites everyone to contribute, give feedback, suggest features, make your own forks of MapillaryJS. To do so, head over to the project page or take a look at the code (MIT license).

Solem adds, “We are excited to see where the Mapillary viewer ends up! As always, we appreciate your thoughts or feedback on how you want to use Mapillary and what we can do better.”

See Also

Photo of author
About the author
GIS Contributor
Guest articles from GIS professionals. Authorship information is listed at the bottom of the articles.