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.5/mapbox-gl.css">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.0.0-beta.5/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.37324724480675, 43.64834968294298],
  "zoom": 16,
  "bearing": -93,
  "pitch": 39,
  "lights": [{
      "id": "environment",
      "type": "ambient",
      "properties": {
        "color": "red",
        "intensity": 0.4
      }
    },
    {
      "id": "sun_light",
      "type": "directional",
      "properties": {
        "color": "blue",
        "intensity": 0.4,
        "direction": [200.0, 40.0],
        "cast-shadows": true,
        "shadow-intensity": 0.2
      }
    }
  ],
  "sources": {
    "composite": {
      "url": "mapbox://mapbox.mapbox-streets-v8",
      "type": "vector"
    }
  },
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "layers": [{
    "id": "building",
    "type": "fill-extrusion",
    "source": "composite",
    "source-layer": "building",
    "layout": {},
    "paint": {
      "fill-extrusion-height": 100,
      "fill-extrusion-color": "hsla(0, 100%, 50%, 0.01)"
    }
  }]
};

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