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 = {
            "version": 8,
            "center": [-73.99008984564783, 40.7138525988824],
            "zoom": 19.830597901417512,
            "bearing": -20,
            "pitch": 51,
            "imports": [{
                "id": "basemap",
                "url": "mapbox://styles/mapbox/standard"
            }],
            "sources": {
                "composite": {
                    "url": "mapbox://mapbox.mapbox-streets-v8",
                    "type": "vector"
                },
                "geojson": {
                    "type": "geojson",
                    "data": {
                        "type": "FeatureCollection",
                        "features": [
                            {
                                "type": "Feature",
                                "properties": {},
                                "geometry": {
                                    "coordinates": [
                                        -74.01582314934721,
                                        40.70220030077036
                                    ],
                                    "type": "Point"
                                }
                            }
                        ]
                    }
                }
            },
            "glyphs": "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
            "layers": [
                {
                    "id": "landuse",
                    "type": "fill",
                    "source": "composite",
                    "source-layer": "landuse",
                    "slot": "bottom",
                    "paint": {
                        "fill-color": "red"
                    }
                }
            ]
        };

        var map = window.map = new mapboxgl.Map({
            container: 'map',
            hash: true,
            style
      ...