JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.3.5/tabletop.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

/*var colors = {
  1966: 'green',
  1951: 'orange',
  1952: 'red'
};*/

// Adapted from http://leafletjs.com/examples/choropleth.html
function getColor(d) {
  return d >= 1966 ? 'green' :
  	d >= 1960 ? 'black' :
    d >= 1952 ? 'red' :
    d >= 1940 ? 'orange' :
    'grey';
}

var map;
var code = "1ciPq3VfxUv3ucttkMPzNXNR1NLKA1JrOq1tGiLg2CsI"

document.addEventListener('DOMContentLoaded', function() {
  map = L.map('map').setView([51.49, 7.5], 11);
  L.tileLayer('http://{s}.tile.openstreetmap.se/hydda/full/{z}/{x}/{y}.png', {
    attribution: 'Tiles courtesy of <a href="http://openstreetmap.se/" target="_blank">OpenStreetMap Sweden</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &mdash; Marie-Louise Timcke'
  }).addTo(map);

  Tabletop.init({
    key: code,
    callback: function(sheet, tabletop) {
      for (var i in sheet) {
        var place = sheet[i];
        /* L.marker([place.lon, place.lat])
           .addTo(map)
           .bindPopup("<strong>Baujahr: </strong>" + place.constructdate)*/

        L.circleMarker([place.lon, place.lat], {
            radius: 10,
            color: getColor(place.constructdate), // you can call the getColor function
            fillColor: getColor(place.constructdate),
            fillOpacity: 0.5
          }).addTo(map)
          .bindPopup(place.adress + "<br><strong>Baujahr: </strong>" + place.constructdate);

       /* var myZoom = {
          start: map.getZoom(),
          end: map.getZoom()
        };*/

        //map.on('zoomstart', function(e) {
          //myZoom.start = map.getZoom();
        //});

      }
    },
    simpleSheet: true
  })

})