Swipe between maps

index.html

<div id="comparison-container">
    <div id="before" class="map"></div>
    <div id="after" class="map"></div>
</div>

script.js

	// TO MAKE THE MAP APPEAR YOU MUST
	// ADD YOUR ACCESS TOKEN FROM
	// https://account.mapbox.com
	mapboxgl.accessToken = 'pk.eyJ1IjoibHVrYXNtYXJ0aW5lbGxpIiwiYSI6ImNpem85dmhwazAyajIyd284dGxhN2VxYnYifQ.HQCmyhEXZUTz3S98FMrVAQ';
    var beforeMap = new mapboxgl.Map({
        container: 'before',
        style: 'https://assets.vector.hereapi.com/styles/berlin/day/mapbox/tilezen?apikey=bBe7W2JLwodUPG4J62sX8dGQRCVaJ4gJxupzOdwSURc',
        center: [0, 0],
        zoom: 0
    });

    var afterMap = new mapboxgl.Map({
        container: 'after',
        style: 'mapbox://styles/mapbox/dark-v10',
        center: [0, 0],
        zoom: 0
    });

    // A selector or reference to HTML element
    var container = '#comparison-container';

    var map = new mapboxgl.Compare(beforeMap, afterMap, container, {
        // Set this to enable comparing two maps by mouse movement:
        // mousemove: true
    });

scripts

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.js"></script>

style.css

	body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

    body {
        overflow: hidden;
    }

    body * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .map {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
    }

styles

<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<link href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css" rel="stylesheet" />

swipe-between-maps.markdown

Swipe between maps

Use mapbox-gl-compare to swipe between and synchronize two maps.

See the example: https://docs.mapbox.com//mapbox-gl-js/example/mapbox-gl-compare/

A Pen by Lukas Martinelli on CodePen.

License.