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">
<script src="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v3.3.0/mapbox-gl.css">
<div id="map" class="absolute top bottom left right w-full"></div>

JavaScript

mapboxgl.accessToken =
  "pk.eyJ1IjoibWFwYm94c2F0ZWxsaXRlIiwiYSI6ImNqZWZ0MHg0djFqZWoyeG9kN3ZiMmkyd3cifQ.y2HNjGo7FcKQ7psI_BfGqQ"

const style = {
  "pitch": 0,
  "draft": true,
  "layers": [],
  "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
  "name": "Standard Experimental",
  "imports": [],
  "protected": false,
  "projection": {
    "name": "globe"
  },
  "visibility": "public",
  "owner": "tristen",
  "zoom": 11.24,
  "center": [
    -79.3883,
    43.6999
  ],
  "version": 8,
  "sources": {}
}

(window.map = new mapboxgl.Map({
  container: "map",
  style,
}))