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/

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<script src="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css">
<div id="before" class="map"></div>
<div id="after" class="map"></div>

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%;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1Ijoidmt3ZXR6ZWwiLCJhIjoiY2swNzNzamw3MDB6azNtcGVvN3cxNTJzZSJ9.YY56WOsc0ZNIK9YTwosnTw';

const beforeMap = new mapboxgl.Map({
  container: "before",
  style: {
    'version': 8,
    'sources': {
      'raster-tiles': {
        'type': 'raster',
        'tiles': [
        	'https://b.tiles.mapbox.com/v4/mapquest.tt-vivid/{z}/{x}/{y}@2x.png?access_token=sk.eyJ1Ijoicmlhc3RyYWQiLCJhIjoiY2s0ZDc0YjNmMDN2MjNubmc0ZTBuc3N4dyJ9.gGD3zepJq_HKEq54Wg7wUw'
        ],
        'tileSize': 256
      }
    },
    'layers': [{
      'id': 'simple-tiles',
      'type': 'raster',
      'source': 'raster-tiles',
      'minzoom': 0,
      'maxzoom': 22
    }]
  },
  center: [-77, 38.88],
  zoom: 15
});

const afterMap = new mapboxgl.Map({
  container: "after",
  style: "mapbox://styles/vkwetzel/ck54d2r9w0ta41cnvveia9bmd"
});

new mapboxgl.Compare(beforeMap, afterMap);