JSFiddle - React, Tailwind, and code Playground

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox.js/plugins/leaflet-draw/v0.2.2/leaflet.draw.css">
<script src="https://rawgit.com/maxogden/geojson-js-utils/master/geojson-utils.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
}
.dotLegend {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display:inline-block;
}
.bdotColor {
    background: #20a0ff;
}
.gdotColor {
    background: #40b060;
}
.rdotColor {
    background: #b04040;
}

JavaScript

////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var centerlat = 34;
var centerlon = -118.25;

// set default zoom level
var zoomLevel = 10;

// initialize map
var map = L.map('map', {
    zoomControl: false
}).setView([centerlat, centerlon], zoomLevel);

// set source for map tiles (in this case one of Mapbox's minimal example maps)
MB_ATTR = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
    '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>';

MB_URL = 'http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(MB_URL, {
    attribution: MB_ATTR,
    id: 'examples.map-szwdot65'
}).addTo(map);

var poly = {
    "type": "MultiPolygon",
        "coordinates": [
        [
            [
                [-118.2, 34],
                [-118.3, 34],
                [-118.3, 34.10],
                [-118.2, 34.10],
                [-118.2, 34]
            ]
        ],
        [
            [
                [-118.5, 33.75],
                [-118, 33.75],
                [-118, 34.25],
                [-118.5, 34.25],
                [-118.5, 33.75]
            ],
            [
                [-118.1, 33.85],
                [-118.4, 33.85],
                [-118.4, 34.15],
                [-118.1, 34.15],
                [-118.1, 33.85]
            ]
        ]
    ]
}
var poly2 = {
    "type": "Polygon",
        "coordinates": [
        [
            [-118.5, 33.75],
            [-118, 33.75],
            [-118, 34.25],
            [-118.5, 34.25],
            [-118.5, 33.75]
        ],
        [
            [-118.1, 33.85],
            [-118.4, 33.85],
            [-118.4, 34.15],
            [-118.1, 34.15],
            [-118.1, 33.85]
  ...