JSFiddle - React, Tailwind, and code Playground

by alrick

HTML

<script src="http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js"></script>
<link rel="stylesheet" href="http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css">
<div id='map'></div>

CSS

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

JavaScript

var map = L.mapbox.map('map', 'examples.map-20v6611k')
    .setView([37.9, -77], 6);

geojson = {
    type: "FeatureCollection",
    features: [{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-77, 38]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "circle-stroked"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-77, 39]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "circle"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-77, 40]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "square-stroked"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-77, 41]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "square"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-77, 42]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "triangle-stroked"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-77, 43]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "triangle"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-76, 38]
        },
        properties: {
            "marker-color": "#3A487E",
            "marker-symbol": "star-stroked"
        },
    },{
        type: "Feature",
        geometry: {
            type: "Point",
            coordinates: [-76, 39]
        },
        properties: {
           ...