After the recent update of MapillaryJS, you can now compare any pair of images, regular as well as panoramas. It also features a simpler design to make MapillaryJS integrate smoothly in various applications.

We have previously explained how time travel works on the Mapillary web. The time travel feature is built with the MapillaryJS compare function for cases where there's a good enough match between the location, compass angle, and features in two images.

The compare functionality can be used to inspect how a scene changes over time. This is relevant for construction and development projects as well as observing e.g. seasonal changes in the environment.

The criterion of finding enough matching points between the images is sometimes not possible when a scene changes a lot over time. That's why with the latest update of MapillaryJS, we have softened the requirements so that matching points are no longer needed. Also, it is now possible to compare panoramas—considering the increase in the popularity of 360° cameras, this option becomes more and more relevant.

As the MapillaryJS library is open source, you can intergate the compare functionality in any application or website. (Note that we haven't implemented the updated functionality in the time travel feature on the Mapillary web yet.)

Let's take a look at a few interactive examples of what you can do now.

Using the compare function

You can try the new compare functionality for regular images as well as for panoramas below. For regular images, there are two modes, 3D and non-3D. In the 3D mode, the image content will be aligned and the camera viewpoint will move when changing the position. This relies on finding correspondancies between the images. It is not possible to pan or zoom in the 3D mode.

When not enough correspondences have been found, only the non-3D mode will be available. In this case, the images are laid out on top of each other. Here the content may not be perfectly aligned like in the 3D mode. Note that panoramas are always shown in non-3D mode—so pan and zoom are always available when comparing those.

Two modes for comparing regular images: 3D and non-3D (click on the indicator to change the mode). You can pan by dragging or zoom with the zoom controls in the non-3D mode.

Compare panoramas by using the compare controls. You can pan by dragging or zoom with the zoom controls.

When comparing images in the non-3D mode, the alignment between the content of the images will not be perfect. It will be best if the images were captured in the same location with the same direction (for panoramas, the same location is enough).

There are many occasions when images have not been captured in exactly the same location or direction. The content of the images may then not be perfectly aligned. In that case, you may want more fine-grained control over what to compare.

To do that, you can place two MapillaryJS viewers side by side like in the example below (or like in the MapillaryJS side by side compare example). When using two MapillaryJS viewers, you can also enable navigation controls and navigate to the desired position in each view (the spatial navigation arrows are disabled in the example, but the sequence navigation is shown).

Two MapillaryJS viewers. Try the side-by-side and curtain modes. Compare any part of the images by panning and zooming in the direction of interest in each view.

Simplifying the visual look

Since MapillaryJS is just the foundation with which you can integrate Mapillary, you should be able to minimize visual clutter and maximize focus.

We’ve removed all color from elements and icons, and made a simpler, more consistent interface. This results in a bare-bones, or as we say, spartan look that works well in various environments. In addition, you can opt to include or omit certain elements to make the interface clutter-free in your integration.

The MapillaryJS viewer with its cleaner interface.

Here is what we have changed:

• Improved cover option: if you want to avoid loading MapillaryJS automatically, you can opt in to a new cover page style that makes it clear you should click it to start interacting with the viewer.

• Zoom buttons: in addition to zooming with mousewheel and keyboard, you now have the option to display zoom buttons as a control for your viewers.

• Compass indicator: the field of view sector always points forward, in the direction you are looking at. The north indicator always points to north in relation to your view.

• Informative attribution: in addition to showing who contributed the image, you can now see the date as well.

Take a look at MapillaryJS examples if you want to integrate MapillaryJS in your own application. If you need any help or have comments, we're just an email away, as always.

/Oscar and Józsi