JSFiddle - React, Tailwind, and code Playground

by hansenmc

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
<![endif]-->
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
    height: 600px;
    width:600px;
}

JavaScript

var map;
var plotlayers = [];

$(document).ready(function () {
    map = initMap();
    loadTestData();
});

function loadTestData() {
          
    var plotlist = testData.data;

    for (i = 0; i < plotlist.length; i++) {
      
        var plotll = new L.LatLng(plotlist[i].lat, plotlist[i].lon, true);
        var plotmark = new L.Marker(plotll);
        plotmark.data = plotlist[i];
        map.addLayer(plotmark);

        plotmark.bindPopup("<h3>" + "testItem" + i + "</h3>" + plotlist[i].lat + ", " + plotlist[i].lon);
        plotlayers.push(plotmark);
    }
}

function removeMarkers() {
    for (i = 0; i < plotlayers.length; i++) {
        map.removeLayer(plotlayers[i]);
    }
    plotlayers = [];
}

function initMap() {
    return L.map('map')
        .setView([15, 15], 2)
        .addLayer(getOpenStreetMapTileLayer());
}

function getOpenStreetMapTileLayer() {
    // create the tile layer with correct attribution
    var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib = 'Map data © OpenStreetMap contributors';
    var osm = new L.TileLayer(osmUrl, {
        minZoom: 1,
        maxZoom: 18,
        attribution: osmAttrib
    });
    return osm;
}

function getCloudemadeTileLayer() {
    /* 
     * If we want to use cloudemade, we will need to register for an API-key
     */
    return L.tileLayer('http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png', {
        attribution: '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://cloudmade.com">CloudMade</a>, Data <a href="">Troposphere</a>',
        maxZoom: 18
    });
}
var testData={
            max: 46,
            data: [{lat: 33.5363, lon:-117.044, value: 1},{lat: 33.5608, lon:-117.24, value: 1},{lat: 38, lon:-97, value: 1},{lat: 38.9358, lon:-77.1621, value: 1},{lat: 38, lon:-97, value: 2},{lat: 54, lon:-2, value:...