JSFiddle - React, Tailwind, and code Playground

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.eyJ1Ijoia2Vsc2V5LXRheWxvciIsImEiOiJjazJ3ZWl2a2YwZHU2M21xbDJnYXA2Z29tIn0.pnZVgZveufjFh20yW0ZI7g';

const beforeMap = new mapboxgl.Map({
  container: "before",
  style: {
    'version': 8,
    'sources': {
      'raster-tiles': {
        'type': 'raster',
        'tiles': [
        	'https://a.tiles.mapbox.com/v4/vrmapbox.a1844071/{z}/{x}/{y}@2x.png?access_token=sk.eyJ1Ijoicmlhc3RyYWQiLCJhIjoiY2s0ZDc0YjNmMDN2MjNubmc0ZTBuc3N4dyJ9.gGD3zepJq_HKEq54Wg7wUw#14/60.1649/24.9355'
        ],
        'tileSize': 256
      }
    },
    'layers': [{
      'id': 'simple-tiles',
      'type': 'raster',
      'source': 'raster-tiles',
      'minzoom': 0,
      'maxzoom': 22
    }]
  },
  center: [24.94691, 60.16634],
  zoom: 13
});

const afterMap = new mapboxgl.Map({
  container: "after",
  style: "mapbox://styles/kelsey-taylor/ck58k6hlp135n1cpn0w9rmojw"
});

new mapboxgl.Compare(beforeMap, afterMap);