JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.0-beta.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v2.9.0-beta.2/mapbox-gl.js"></script>
<div id="map" class="absolute top bottom left right w-full"></div>
<div id="toggle" class="btn btn--s mx12 my12 relative z1 cursor-pointer">Toggle style</div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

let inUse = 'a';
const a = {
  "version": 8,
  "name": "xray",
  "center": [34.267435292446066, 43.06535973366732],
  "zoom": 5.370424740756893,
  "bearing": 0,
  "pitch": 0,
  "light": {
    "intensity": 0.24,
    "position": [1.15, 480, 30],
    "color": [
      "interpolate",
      ["linear"],
      ["zoom"],
      0,
      "hsl(252, 95%, 54%)",
      22,
      "hsl(329, 98%, 83%)"
    ],
    "anchor": "viewport"
  },
  "terrain": {
    "source": "mapbox://mapbox.mapbox-terrain-dem-v1",
    "exaggeration": 0
  },
  "fog": {
    "color": "#ffffff"
  },
  "sources": {
    "mapbox://mapbox.mapbox-terrain-dem-v1": {
      "url": "mapbox://mapbox.mapbox-terrain-dem-v1",
      "type": "raster-dem",
      "tileSize": 512
    },
    "composite": {
      "url": "mapbox://mapbox.mapbox-streets-v8,mapbox.mapbox-terrain-v2",
      "type": "vector"
    }
  },
  "sprite": "mapbox://sprites/fallsemo10/cl47jxpdb002314p60ye79f9g/ck2u8j60r58fu0sgyxrigm3cu",
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "projection": {
    "name": "albers"
  },
  "layers": [{
      "id": "bg",
      "type": "background",
      "paint": {
        "background-color": "#000"
      }
    },
    {
      "id": "fill:mapbox.mapbox-streets-v8:landuse",
      "type": "fill",
      "source": "composite",
      "source-layer": "landuse",
      "filter": ["==", ["geometry-type"], "Polygon"],
      "paint": {
        "fill-color": "hsla(65, 94%, 66.64%, 0.125)",
        "fill-opacity": 0.5,
        "fill-outline-color": "hsl(65, 94%, 66.64%)"
      }
    },
    {
      "id": "fill:mapbox.mapbox-streets-v8:waterway",
      "type": "fill",
      "source": "composite",
      "source-layer": "waterway",
      "filter": ["==", ["geometry-type"], "Polygon"],
      "paint": {
        "fill-color": "hsla(282, 55.01%, 51.09%, 0.125)",
        "fill-opacity": 0.5,
       ...