Categories: GIS Software

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

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

Ad

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)
})

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.

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.


Ad:


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

Ad

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

Ad
Ad:
Share
Published by

Recent Posts

Mapping the Universe

New satellite technology achieved in in the last decade are helping scientist to more accurately…

February 18, 2020

Using GIS to Map and Track Vandalism

GIS is being used to better understand current and potentially future patterns of vandalism.

February 11, 2020

Using GIS to Assess the Impact of Electric Cars

GIS and spatial analysis may help find some practical solutions for electric vehicle charging.

February 5, 2020

GIS and Map Contests Roundup

Current map and GIS related competitions listed in order of the competition deadline.

February 5, 2020

Using GIS to Assess Urban Tree Canopy

The University of Vermont Spatial Analysis Lab used spatial analysis to map out how the…

February 3, 2020

How to Add Leader Lines to Labels in QGIS 3.10

The release of QGIS version 3.10 brought with it the native capability to add leader…

January 30, 2020