JSFiddle - React, Tailwind, and code Playground

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<script src="http://makinacorpus.github.io/Leaflet.Spin/spin.js/dist/spin.min.js"></script>
<script src="http://makinacorpus.github.io/Leaflet.Spin/leaflet.spin.js"></script>
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
}

.circleLegend {
    border-radius: 50%;
    width: 10px;
    height: 10px;
    display:inline-block;
    behavior: url(PIE.htc);
    /* remove if you don't care about IE8 */
}
.stampColor {
    background: #20a0ff;
}
.info {
    padding: 6px 8px;
    font: 14px/16px Arial, Helvetica, sans-serif;
    background: white;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
}
.info h4 {
    margin: 0 0 5px;
    color: #777;
}
.infopop h4 {
    font: 14px/16px Arial, Helvetica, sans-serif;
    font-weight: bold;
    margin: 0 0 0px;
    color: #777;
}

JavaScript

// set center coordinates
var coords = [34.069, -118.293];

// set default zoom level
var zoomLevel = 11;

// initialize map
var map = L.map('map').setView(coords, zoomLevel);

// set source for map tiles
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 stamps = {
   "type": "FeatureCollection",
   "features": [
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ -118.3322972,34.10834904,0 ]
    },
    "properties": {
    "altitude":"0",
    "geometry":"Point",
    "name":"Geo. A. Shepard, 1926",
    "description":"On the Bella Vista Way stairway, Whitley Heights",
    "contractor":"Geo. A. Shepard",
    "year":1926,
    "tumblr_id":76591313618
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ -118.285042,33.82802003,0 ]
    },
    "properties": {
    "altitude":"0",
    "geometry":"Point",
    "name":"Griffith Company, 1929",
    "description":"100 or so feet East of Figueroa on 220th St., Carson",
    "contractor":"Griffith Company",
    "year":1929,
    "tumblr_id":74141080760
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ -118.2930511,34.07262197,0 ]
    },
    "properties": {
    "altitude":"0",
    "geometry":"Point",
    "name":"Griffith Company, 1925",
    "description":"Corner of 1st and New Hampshire, Koreatown",
    "contractor":"Griffith Company",
    "year":1925,
    "tumblr_id":76590719707
    }
  },
  {
    "type": "Feature",
    "geometry": {
       "type": "Point",
       "coordinates":  [ -118.2968599,34.06548096,0 ]
    },
   ...