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.


Ad:


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.

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

Automated Remote Sensing of Underground Features

Below ground mapping can now better utilize remotely sensed data to create more accurate maps.

December 10, 2019

Open Repository for Geospatial Training Data Released

Radiant Earth has launched Radiant MLHub, a cloud-based open library for training geospatial data used by machine learning algorithms.

December 9, 2019

Free Online Geocoder

Developed by LocalFocus, this online geocoder will generate lat/long coordinates for a list of addresses for free.

December 9, 2019

Print and Assemble These Map Tree Ornaments

John Nelson from Esri has posted three map ornament templates you can print and assemble for your Christmas tree.

December 9, 2019

GIS and Map Contests Roundup

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

December 7, 2019

There are Four Trillion Measurements in this Global Sea Surface Temperature Dataset

Researchers have compiled an enormous global dataset with over four trillion satellite-based measurements of sea surface temperature.

December 5, 2019