JSFiddle - React, Tailwind, and code Playground

by jpraden

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.css">
<script src="https://api.tiles.mapbox.com/mapbox.js/v1.5.0/mapbox.js"></script>

<div id="map"></div>

CSS

#map {
  width:650px;
  height:400px;
}

JavaScript

// 1891 map attribution
var attribution_1891 = 'Map image from <a href="http://bibliotecanacional.gov.co">Biblioteca Nacional</a>';

// 1891 tile set with attribution
var bog_1891 = L.tileLayer( 'http://mapwarper.net/maps/tile/4949/{z}/{x}/{y}.png',{attribution: attribution_1891});

// 2014 tile set attribution
var attribution_2014 = '<a id="home-link" target="_top" href="../">Map tiles</a> by <a target="_top" href="http://stamen.com">Stamen Design</a>, under <a target="_top" href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>. Data by <a target="_top" href="http://openstreetmap.org">OpenStreetMap</a>, under <a target="_top" href="http://creativecommons.org/licenses/by-sa/3.0">CC BY SA</a>.';

// 2014 tile set using Stamen Toner Lite
var bog_2014 = L.tileLayer( 'http://a.tile.stamen.com/toner-lite/{z}/{x}/{y}.png',{attribution: attribution_2014});

// create the map with the default the tileset
var map = L.map('map', {layers:bog_1891});

// create a variable to hold all tile sets and name them so we can use it for the toggler
var baseMaps = {
  "Bogotá 2014": bog_2014,
  "Bogotá 1891": bog_1891
};

// the geojson as it comes from the text document
var geostring = '{"type":"FeatureCollection","features":[{"type":"Feature","properties":{"Name":"Salvador Camacho Roldán ","Photo":"http://upload.wikimedia.org/wikipedia/commons/c/cd/SalvadorCamacho.jpg","Address":"361, Calle 10. — 178, Calle 12.","Term":"1868-1869 / 1871","Office":"President","Page":59,"Directory Occupation":"comerciante"},"geometry":{"type":"Point","coordinates":[-74.08004343509674,4.599738849604564]}},{"type":"Feature","properties":{"Name":"Miguel Antonio Caro Tobar","Photo":"http://upload.wikimedia.org/wikipedia/commons/5/5c/Miguel_Antonio_Caro_2.jpg","Address":"127, Carrera 11.","Term":"1892-1898","Office":"Vicepresident","Page":64,"Directory...