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>
<script src="http://d3js.org/d3.v3.min.js"></script>

<span class="coolBar let-a"></span> 
<span class="coolBar let-b"></span>

<!--<span class="coolBar let-c"></span> -->
<h1>Ciudad de Bogotá - Colombia </h1>
<table><center>
<h4>
La visualización muestra dos mapas de la Ciudad de Bogotá (1891 y  2018),
<p></p>en el podras ver algunos detalle de personalidades que vivieron en algunas de las calles de dicha ciudad.
</h4>
</center>
</table>
<center><div id="map"></div></center>
<h2>Una mirada al pasado y presente de su geografía y algo 
más...</h2>

CSS

h1 {
  font-size: -10rem;
  color: #0000FF;
  text-align: center;
  padding-top: -30rem;
  border-left: 1px;
  margin-right: 40px;
  }

h2 {
  font-size: -20rem;
  color:  #0000FF;
  text-align: center;
  padding-top: -20rem;
  margin-right: 40px;
  }


h4 {
  font-size: -10rem;
  color:  #000000;
  text-align: center;
  padding-top: -30em;
  margin-right: 40px;
  }

#map {
  width:750px;
  height:300px;
  margin-right: 45px;
}

.coolBar {
    height: 20px;
    display: block;
    text-align: right;
    font-size: 14px;
    color: #FFF;
    margin-top:1px;
}
.coolBar:before {
    margin-right: 5px;
    margin-top: 3px;
    display: inline-block;
}
.coolBar:after {
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 14px solid transparent;
    height: 0;
    display: block;
    content: "";
    float: right;
    margin-right: -15px;
}
.coolBar.let-a {
    background: #0B0B61;
    width: 0;
    -webkit-transition: width .3s;
    -moz-transition: width .3s;
    -o-transition: width .3s;
    transition: width .3s;
}
.coolBar.let-a:before {
    content: "Tarea Visualización DiplomadoDS-UC";
}
.coolBar.let-a:after {
    border-left-color: #0B0B61;
}
.coolBar.let-b {
    background: #0000FF;
    width: 0;
    -webkit-transition: width .5s;
    -moz-transition: width .5s;
    -o-transition: width .5s;
    transition: width .5s;
}
.coolBar.let-b:before {
    content: "Alumno: Jaime Pradenas Pizarro";
}
.coolBar.let-b:after {
    border-left-color: #0000FF;
}
.coolBar.let-c {
    background: #99D013;
    width: 0;
    -webkit-transition: width .8s;
    -moz-transition: width .8s;
    -o-transition: width .8s;
    transition: width .8s;
}
.coolBar.let-c:before {
    content: "C";
}
.coolBar.let-c:after {
    border-left-color: #99D013;
}

JavaScript

$('.let-a').width(230);
$('.let-b').width(200);
$('.let-c').width(160);

// 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});

// 2018 tile set attribution
var attribution_2018 = '<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>.';

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

// 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á 2018": bog_2018,
  "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...