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>


<select class=top id=selTheme>
  <option value="orig">orig</option>
  <option value="purple">purple</option>
  <option value="sat">sat</option>
  <option value="black">black</option>
</select>

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 themes = {
  "enabled": "",
  "store": {
    "purple": {
      "background": {
        "paint": {
          "background-color": "#f708f7"
        }
      },
      "water": {
        "paint": {
          "fill-color": "#800080"
        }
      },
      "country-label-lg": {
        "paint": {
          "text-color": "#000",
          "text-halo-color": "rgba(255,255,255,0.8)",
          "text-halo-width": 0,
          "text-halo-blur": 0
        }
      }
    },
    "black": {
      "background": {
        "paint": {
          "background-color": "rgb(47,47,47)"
        }
      },
      "water": {
        "paint": {
          "fill-color": "rgb(0,0,0)"
        }
      }
    },
    "sat": {
      "satellite": {
        "layout": {
          "visibility": "visible"
        }
      }
    }
  }
}

map.funStyle = function(o) {
  if (o.action == "set") {
    if (o.prop == "paint") {
      return this.setPaintProperty(o.layer, o.atr, o.value);
    } else {
      return this.setLayoutProperty(o.layer, o.atr, o.value);
    }
  } else {
    if (o.prop == "paint") {
      return this.getPaintProperty(o.layer, o.atr);
    } else {
      return this.getLayoutProperty(o.layer, o.atr);
    }
  }
}

map.funTheme = function(o) {


  if (!o.action) o.action = "init";
  var init = o.action == "init";
  var origTheme = "orig";
  var
  if (init) o.name = origTheme;
  if (init) themes.store[origTheme] = {};

  if (!themes.store[origTheme]) {
    map.funTheme({
      action: "init"
    });
  }

  if (themes.enabled != origTheme) {
    map.funTheme({
      action: "set",
      name: origTheme
    });
  }

  var to = themes.store[origTheme];

  for (var t in themes.store) {

    if (!init && o.name &&...