JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

HTML

<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v1.2.0/assembly.min.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.4/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.4/mapbox-gl.js"></script>
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

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

const style = {
  "version": 8,
  "name": "Untitled",
  "center": [-79.4294, 43.6751],
  "zoom": 16,
  "bearing": -28,
  "pitch": 53,
  "sources": {
    "composite": {
      "url": "mapbox://mapbox.mapbox-streets-v8",
      "type": "vector"
    }
  },
  "lights": [{
      "id": "one",
      "type": "directional",
      "properties": {
        "color": "green",
        "intensity": 0.4,
        "direction": [180, 20],
        "cast-shadows": true,
        "shadow-intensity": 0.2
      }
    }
  ],
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "projection": {
    "name": "globe"
  },
  "layers": [{
    "id": "3D-extrusions",
    "type": "fill-extrusion",
    "source": "composite",
    "source-layer": "building",
    "layout": {},
    "paint": {
      "fill-extrusion-height": 20,
      "fill-extrusion-color": "hsl(295, 78%, 73%)",
      "fill-extrusion-opacity": 0.4,
      "fill-extrusion-flood-light-color": "hsl(30, 79%, 81%)",
      "fill-extrusion-flood-light-ground-radius": [
        "step",
        ["number", ["get", "height"]],
        0.0,
        30.0,
        ["random", 30.0, 100.0, ["id"]]
      ],
      "fill-extrusion-flood-light-intensity": [
        "interpolate",
        ["linear"],
        ["measure-light", "brightness"],
        0.015,
        0.3,
        0.026,
        0
      ]
    }
  }]
}

new mapboxgl.Map({
  container: 'map',
  style: style
});