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/

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v2.5.1/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>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v2.5.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.4.0/mapbox-gl-compare.css">




<div id="comparison-container">
    <div id="before" class="map"></div>
    <div id="after" class="map"></div>
</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.eyJ1IjoidGFrdXRvc3V6dWtpbWFwYm94IiwiYSI6ImNrMjJlMXplcTE4a2czY3F3MWkxZHN4cWkifQ.CRcFM34KAOiPKIbscodOqA';
const beforeMap = new mapboxgl.Map({
  container: 'before',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [103.8427611, 1.2831373],
  zoom: 15
});

beforeMap.on('load', () => {

   beforeMap.addSource('route', {
    'type': 'vector',
    'url': 'mapbox://takutosuzukimapbox.sla-Roadshp19'
  });
  beforeMap.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'source-layer': 'sla-Roadshp19',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color':  "hsl(119, 89%, 48%)",
      'line-width': 1
    }
  });

})

const afterMap = new mapboxgl.Map({
  container: 'after',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [103.8427611, 1.2831373],
  zoom: 15
});


afterMap.on('load', () => {

  afterMap.addSource('route', {
    'type': 'vector',
    'url': 'mapbox://takutosuzukimapbox.sla-Roadshp19'
  });
  afterMap.addLayer({
    'id': 'route',
    'type': 'line',
    'source': 'route',
    'source-layer': 'sla-Roadshp19',
    'layout': {
      'line-join': 'round',
      'line-cap': 'round'
    },
    'paint': {
      'line-color': "hsl(238, 100%, 61%)",
      'line-width': 1
    }
  });

})


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

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