JSFiddle - React, Tailwind, and code Playground

by rafaelrozon

HTML

<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css">
    <style>
        body { margin:0; padding:0; }
        #map { position:absolute; top:0; bottom:0; width:100%; }
    </style>
   <div id='map'></div>

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoiZWRlbnJheWdhcmRuZXIiLCJhIjoiRlZRVlhqOCJ9.tDrWaeNRbMCtXAovQLYuzA';
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/mapbox/light-v9',
    center: [-96, 37.8],
    zoom: 3
});


map.on('load', function () {

    map.addLayer({
        "id": "points",
        "type": "symbol",
        "source": {
            "type": "geojson",
            "data": {
                "type": "FeatureCollection",
                "features": [{
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-77.03238901390978, 38.913188059745586]
                    },
                    "properties": {
                        "title": "Mapbox DC",
                        "icon": "monument"
                    }
                }, {
                    "type": "Feature",
                    "geometry": {
                        "type": "Point",
                        "coordinates": [-122.414, 37.776]
                    },
                    "properties": {
                        "title": "Mapbox SF",
                        "icon": "harbor"
                    }
                },
                {
      "type": "Feature",
      "properties": {
        "OBJECTID": 330069,
        "name_e": "Tunnel Mountain Village 2",
        "nom_f": null,
        "url_e": null,
        "url_f": null,
        "site_num_site": "D020",
        "min_scale_echelle": 2000,
        "max_scale_echelle": null,
        "PreserveGlobal": null,
        "icon": "harbor"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          -115.5446766300834,
          51.189830198110805
        ]
      }
    }
                ]
            }
        },
        "layout": {
            "icon-image": "{icon}-15",
            "text-field": "{title}",
            "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
           ...