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.”
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!”
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)
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.
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.
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.”