Comparing two maps at the same time

In this recipe, we are going to learn how to compare two maps at the same time. We can have two maps that are styled differently and which display different features. For example, one may use street data, while the other may use terrain or satellite imagery. The user will be able to swipe between the two maps.

How to do it…

The following steps need to be performed:

1. Add an HTML5 slider input control to the DOM.

2. Add an overlay map layer at the top of the base layer.

3. Calculate the clipping point based on the slider input value.

4. Create a rect, and apply that to the clip CSS property of the map container.

We first create an overlay map, and add it at the top of the base map. Next, we use a simple HTML5 input control, a range slider. As the user drags the slider, the overlay map gets clipped. All the magic happens in CSS. We have an overlay layer already in place, and we clip it based on the input value of the range slider. The CSS property that we are tweaking on...