Faster Navigation: Introducing MapillaryJS 2.0

MapillaryJS 2.0 improves the general performance of retrieving data and decreases the image loading time when navigating to a new place on the map.

Since the release of MapillaryJS 1.0 we have added lots of features and improvements. For MapillaryJS 2.0 we focused on decreasing the loading time between a click and showing the photo in the viewer when you navigate on the map.

To decrease this loading time we prioritize loading the photo, while making sure to load the data needed for navigation in parallel. This means that the navigation arrows may appear a little later than the photo itself. In MapillaryJS 1 it may have taken more time to load a photo in an area densely populated with photos. Now, with MapillaryJS 2.0, it will take roughly the same time to show a photo in every place, no matter how many photos have been captured in the area.

We have also decreased the amount of downloaded data by making more efficent API calls. MapillaryJS 2.0 will work better on slower connections and mobile devices.

You can try it out yourself in the interactive example below. The viewer on top is MapillaryJS 1.7 and the viewer at the bottom is the new MapillaryJS 2.0. Press the button below to move to the next country and observe the time from when you click to when the photo is shown in the respective viewer. The button simulates navigating on a map like on mapillary.com.

Top: MapillaryJS 1.7; bottom: MapillaryJS 2.0

The next step after trying this example is to go to mapillary.com and click around on the map tracks. Photos will load as fast as in the bottom example for every click, no matter how densely populated the map area is.

MapillaryJS 2.0 is used on mapillary.com as well as in our mobile apps.

If you want to integrate MapillaryJS 2.0 into your website or app, check out the GitHub repository for a simple example. Take a look at the documentation for more advanced implementations.

If you already have developed with MapillaryJS 1 in the past, take a look at the information about migrating from MapillaryJS 1 to 2 and make the required changes before upgrading.

Take a look at building the MapillaryJS navigation graph for a thorough explantion of the new data retrieval architecture.

/Oscar

Continue the conversation