JSFiddle - React, Tailwind, and code Playground

by dollysingh3192

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.11.1/mapbox-gl.css">
<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoieXVuamllIiwiYSI6ImNpZnd0ZjZkczNjNHd0Mm0xcGRoc21nY28ifQ.8lFXo9aC9PfoKQF9ywWW-g';
  
  const StyleSpecification = {
            version: 8,
            name: "light-weight-map",
            metadata: {
                "mapbox:autocomposite": true,
                "mapbox:type": "template"
            },
            center: [
                0,
                0
            ],
            // sprite: 'http://localhost:3000/public/assets/sprite/sprite',// need absolute url
            // sprite: 'http://localhost:3001/public/assets/sprite/maki-sdf-sprite',// need absolute url
            sprite: "mapbox://sprites/mapbox/bright-v8",
            zoom: 0,
            sources: {},
            //Open Font Glyphs for GL Styles, Please note this is open source glyph's without mapbox access token
            glyphs: '',
            // "https://fonts.openmaptiles.org/{fontstack}/{range}.pbf",
            // "http://localhost:3000/public/fonts/{fontstack}/{range}.pbf",
            layers: [],
            transition: {
                duration: 100,
                delay: 0
            }
        };
        
    var map = new mapboxgl.Map({
       style: StyleSpecification,
        container: 'map',
      style: 'mapbox://styles/mapbox/light-v10',
      center: [-96, 37.8],
      zoom: 3
    });

    map.on('load', function() {
    
    map.addSource('maine', {
        'type': 'geojson',
        'data': {
        'type': 'Feature',
        'geometry': {
        'type': 'Point',
        'coordinates':  [
          -77.03238901390978,
          38.913188059745586
          ]
        }
        }
        });

    map.addLayer({
        'id': 'circleLayer',
        'type': "circle",
        'source': 'maine',
        'paint': {
            "circle-radius": 25,
            "circle-color": 'red',
            "circle-opacity": 1,
            "circle-stroke-width": 1,
            "circle-stroke-color": 'blue',
            "circle-stroke-opacity": 1
     ...