JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css">
<div id='map'>
</div>

<button id="switch" type="button" class="top"> switch </button>

CSS

body {
          margin: 0;
          padding: 0;
        }
        
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
        
        .top {
          z-index: 10;
          position: absolute;
          top: 0;
        }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidW5lcGdyaWQiLCJhIjoiY2lrd293Z3RhMDAzNHd4bTR4YjE4MHM0byJ9.9c-Yt3p0aKFSO2tX6CR26Q';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: [97.9376220703125,
    63.780059156214016
  ],
  zoom: 6
});

var classEnabled;
var classes = {
  black: {
    "background": {
      "paint": {
        "background-color": "rgb(47,47,47)",
      }
    },
    "water": {
      "paint": {
        "fill-color": "rgb(0,0,0)",
      }
    }
  },
  purple: {
    "background": {
      "paint": {
        "background-color": "#f708f7",
        "background-opacity": 1
      }
    },
    "water": {
      "paint": {
        "fill-color": "#800080"
      }
    }
  },
  sat: {
    "satellite": {
      "layout": {
        "visibility": "visible"
      }
    }
  }
}



map.on('load', function() {

  map.addSource(
    "mapbox://mapbox.satellite", {
      type: "raster",
      url: "mapbox://mapbox.satellite"
    }
  )


  map.addLayer({
    id: "satellite",
    type: "raster",
    source: "mapbox://mapbox.satellite",
    layout: {
      visibility: "none"
    }
  })

  map.addLayer({
    id: "sample",
    type: "fill",
    source: {
      type: "geojson",
      data: "https://gist.githubusercontent.com/fxi/7a93abbef3b4df4b3d004c55d31dd7dc/raw/d14bf94fc3d648c77dca98d553ba4e0f4c95b4b7/map.geojson"
    }
  });

  document
    .getElementById("switch")
    .addEventListener("click", function(e) {
      var get, set, el, m, cls, cl, pos, prop, clOrig;
      el = e.target;
      if (!classes.orig) classes.orig = {};
      cls = Object.keys(classes);
      pos = cls.indexOf(classEnabled) + 1;
      if (pos == cls.length - 1) {
        classEnabled = "orig"
      } else {
        classEnabled = cls[pos];
      }

      cl = classes[classEnabled];

      for (var layer in cl) {
        if (!classes.orig[layer]) classes.orig[layer] = {};
        for (var prop in cl[layer]) {
          if (!classes.orig[layer][prop])...