The slider in MapillaryJS can be used as as tool for comparing different views of every place that has been documented with Mapillary. It works for any pair of images that were taken sufficiently close and has enough overlap.

The slider handle controls the image plane in the foreground by showing more or less of it like when drawing a curtain back and forth. Photos are usually not taken at exactly the same position and as a consequence there will also be some camera movement when using the slider. The camera is moved linearly between the positions where the two images were taken when the slider handle is moved.

Below are a few examples of different types of changes that can be illustrated with the slider.

Changing structure - Malmö, Sweden

Changing time - Orange, France

Changing weather - Ribeirão Grande, Brazil

Changing sun - San Francisco, United States

Changing season - Provincetown, United States

Changing century - Hillerød, Denmark

To create your own slider you need the keys for two images that were taken sufficiently close to each other and shows a smooth transition when navigating between them. The time travel feature on mapillary.com is great for finding good slider examples. Follow the slider example code (scroll down to the examples section) in the MapillaryJS GitHub repository to embed it on your blog or website. Check out the logic of the slider component if you want to dig even deeper and build another component on your own.

/Oscar