JSFiddle - React, Tailwind, and code Playground

by fxi

HTML

<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.css">
<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.31.0/mapbox-gl.js"></script>
<div id='map'>
</div>
<input id="time-slider" class="top" type="range" min=2012 max=2015 >

CSS

body {
          margin: 0;
          padding: 0;
        }
        
        #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
        }
.top {
  z-index:10;
  position:absolute;
  top:0;
}

JavaScript

mapboxgl.accessToken = 'pk.eyJ1IjoidW5lcGdyaWQiLCJhIjoiY2lrd293Z3RhMDAzNHd4bTR4YjE4MHM0byJ9.9c-Yt3p0aKFSO2tX6CR26Q';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v9',
  center: [26.312255859375, 3.5490588195926307],
  zoom: 5,
  pitch: 40,
  bearing: 20
});
/**
* http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging
*/
function onRangeChange(r,f) {
  var n,c,m;
  r.addEventListener("input",function(e){n=1;c=e.target.value;if(c!=m)f(e);m=c;});
  r.addEventListener("change",function(e){if(!n)f(e);});
}

map.on('load', function() {

 el = document.getElementById("time-slider");
 
 onRangeChange(el,function(e){
 var year = e.target.value;
 
 })

  map.addLayer({
    "id": "points",
    "type": "symbol",
    "source": {
      "type": "geojson",
      "data": {
        "type": "FeatureCollection",
        "features": [{
          "type": "Feature",
          "properties": {
            "title":"A",
            "mx_data": {
              "causalities": [{
                "d": "2012",
                "v": 4
              }, {
                "d": "2013",
                "v": 5
              }, {
                "d": "214",
                "v": 18
              }]
            }
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              25.90576171875,
              3.5572827265412794
            ]
          }
        }, {
          "type": "Feature",
          "properties": {
           "title":"B",
            "mx_data": {
              "causalities": [{
                "d": "2012",
                "v": 4
              }, {
                "d": "2013",
                "v": 5
              }, {
                "d": "214",
                "v": 18
              }]
            }
          },
          "geometry": {
            "type": "Point",
            "coordinates": [
              26.312255859375,
           ...