Tracking Irma hurricane with Leaflet

Tracking the path of hurricanes Irma and Jose. Source: European Center for Medium-Range Weather Forecasts, National Weather Service.
Tiles from MODIS Terra.

<!DOCTYPE html>
<html>
<head>
  <meta charset=utf-8 />
  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui' />
  <title>Irma on leaflet</title>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.min.js'></script>
  <link href='https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css' rel='stylesheet' />
  <script src="https://d3js.org/topojson.v1.min.js"></script>
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <style>
      body {
          margin: 0;
          padding: 0;
      }
      #map {
          position: absolute;
          top: 0;
          bottom: 0;
          width: 100%;
      }
      #date {
          position: absolute;
          top: 0;
          right: 0;
          font-family: sans-serif;
          font-size: 30px;
          color: #FFF;
          background: rgba(37, 16, 15,.9);
          padding: 10px;
      }
      .leaflet-popup-content-wrapper {
            border-radius: 1px;
            max-width: 200px;
      }
      .leaflet-popup-content-wrapper span{
            font-weight: bold;
      }
      #map > div.leaflet-map-pane > div.leaflet-objects-pane > div.leaflet-marker-pane > img,
      #map > div.leaflet-map-pane > div.leaflet-objects-pane > div.leaflet-shadow-pane > img {
          display: none;
      }

</style>
</head>
<body>
  <div id='map'></div>
  <div id='date'>2017-09-02</div>
  <script>

L.Map = L.Map.extend({
      openPopup: function(popup) {
            this._popup = popup;
            return this.addLayer(popup).fire('popupopen', {
                popup: this._popup
            });
      }
});

var map = L.map('map'),
      locale = "en-us",
      markers = new L.FeatureGroup();

var tile = L.tileLayer('https://map1.vis.earthdata.nasa.gov/wmts-webmerc/MODIS_Terra_CorrectedReflectance_Bands367/default/{time}/{tilematrixset}{maxZoom}/{z}/{y}/{x}.{format}', {
      attribution: 'Imagery provided by services from the Global Imagery Browse Services (GIBS), operated by the NASA/GSFC/Earth Science Data and Information System (<a href="https://earthdata.nasa.gov">ESDIS</a>) with funding provided by NASA/HQ.',
      minZoom: 1,
      maxZoom: 9,
      format: 'jpg',
      time: '2017-09-02',
      tilematrixset: 'GoogleMapsCompatible_Level'
  }).addTo(map);

L.control.scale({
      imperial: false
  })
  .addTo(map);

L.TopoJSON = L.GeoJSON.extend({
      addData: function (data) {
          var geojson, key;
          if (data.type === "Topology") {
              for (key in data.objects) {
                  if (data.objects.hasOwnProperty(key)) {
                      geojson = topojson.feature(data, data.objects[key]);
                    
                      L.GeoJSON.prototype.addData.call(this, geojson);
                  }
                }

return this;
            }

L.GeoJSON.prototype.addData.call(this, data);

return this;
      }
  });

var layerTrack = new L.TopoJSON(),
      layerForecast = new L.TopoJSON(),
      layerCoastline = new L.TopoJSON();
  
  $.getJSON('map.json').done(function(topoData){
      var forecast = topojson.feature(topoData, topoData.objects["forecast"]),
          ne_10m_coastline = topojson.feature(topoData, topoData.objects["ne_10m_coastline"]);
          track_swath = topojson.feature(topoData, topoData.objects["track_swath"]);
      
      layerCoastline.addData(ne_10m_coastline);
      layerTrack.addData(track_swath);
      layerForecast.addData(forecast);
      layerCoastline.addTo(map)
      
      var layers = L.featureGroup([layerTrack,layerForecast]);
      
      // use TopoJSON just to center and fit the map
      map.fitBounds(layers.getBounds())

layerCoastline.addData(ne_10m_coastline);
      layerCoastline.setStyle({
        fillOpacity: .5,
        color:'#FFF',
        stroke:'#FFF',
        weight:1,
        opacity:1
      })
  });
  
  // dates manage
  var date = new Date();
      year = "2017",
      start = new Date("September 2, 2017"),
      end = new Date("September 11, 2017"),
      
      timer = new Date(start.getTime()),
      string = "" + date.toLocaleString(locale, { month: "long" }) + " " + date.getDate() + ", " + year,
      now = end;

// hurricanes data to fill the popups
  var hurricanes = {
      "2017-09-01": [{"cat":3,"n":"Hurricane <b>Irma</b>","Lat": 19.476950206488414,"Lon" : -38.14453125 }],
      "2017-09-02": [{"cat":3,"n":"Hurricane <b>Irma</b>","Lat": 19.72534224805787,"Lon" : -43.857421875 }],
      "2017-09-03": [{"cat":3,"n":"Hurricane <b>Irma</b>","Lat": 18.06231230454674,"Lon" : -48.69140625 }],
      "2017-09-04": [{"cat":4,"n":"<b>Irma</b> resumed intensifying, becoming a Category 5 hurricane by early the next day.","Lat": 17.308687886770034,"Lon" : -52.91015625 }],
      "2017-09-05": [{"cat":5,"n":"In the <b>Turks and Caicos</b>, evacuation orders were issued for low-lying areas starting September 5 and the <b>Dominican Republic</b> activated the International Charter on Space and Major Disasters.","Lat": 16.97274101999902,"Lon" : -58.97460937499999 }],
      "2017-09-06": [{"cat":5,"n":"Hurricane <b>Irma</b> destroys 95% of the structures and vehicles in <b>Barbuda Island</b>.","Lat": 19.228176737766262,"Lon" : -63.369140625 },
                     {"cat":1,"n":"<b>Jose</b> becomes a hurricane.","Lat": 14.636191878397664,"Lon" : -44.47265625 }],
      "2017-09-07": [{"cat":5,"n":"Mudslides, destroyed homes, flooded crops, and infrastructure damage were caused by hurricane <b>Irma</b> in <b>Hispaniola</b>.","Lat": 21.289374355860424,"Lon" : -69.800390625 },
                     {"cat":3,"n":"Hurricane <b>Jose</b>","Lat": 15.707662769583518,"Lon": -50.537109375 }],
      "2017-09-08": [{"cat":4,"n":"<b>Irma</b> reintensified into a Category 5 hurricane and made landfall on the <b>Camagüey Archipelago</b> (Cuba) with maximum sustained winds of 160 mph. ","Lat": 22.43134015636061,"Lon" : -75.76171875 },
                     {"cat":4,"n":"Hurricane <b>Jose</b>. The government of <b>Antigua and Barbuda</b> began efforts on September 8 to evacuate the entire island prior to Jose's anticipated arrival.","Lat": 17.22475820662464,"Lon": -57.48046875 }],
      "2017-09-09": [{"cat":3,"n":"Hurricane <b>Irma</b>","Lat": 23.805449612314625,"Lon" : -79.716796875 },
                     {"cat":4,"n":"Multiple active hurricanes in the Atlantic simultaneously had wind speeds of at least 150 mph (240 km/h) for the first time in documented history.","Lat": 18.895892559415024,"Lon": -61.87499999999999 }],
      "2017-09-10": [{"cat":4-2,"n":"Hurricane <b>Irma</b> reaches the coast of <b>Florida</b>.","Lat": 28.07198030177986,"Lon": -81.2109375 },
                     {"cat":3,"n":"Jose slowly weakened below Category 4 intensity as the eye became cloud-filled and wind shear began affecting the storm.","Lat": 22.59372606392931,"Lon": -66.533203125 }],
      "2017-09-11": [{"cat":1,"n":"Hurricane <b>Irma</b> becomes a tropical storm when rises the coast of <b>Florida</b>.","Lat": 34.23451236236987,"Lon": -85.078125 },
                     {"cat":2,"n":"On September 14, <b>Jose</b> will be downgraded to a tropical storm, only to become a hurricane again eventually to dissipate on September 26 off the East Coast of the United States.","Lat": 25.48295117535531,"Lon": -70.400390625 }]
  }

setInterval(function(d){

var str = getTime();
      document.querySelector("#date").innerHTML = str;
      tile.options.time = str;
      
      markers.clearLayers();
      map.removeLayer(markers)

var markerData = hurricanes[str];
      
      if (markerData) {
          for (var i = 0; i < markerData.length; i++) {
            
              var marker = L.marker([markerData[i].Lat,markerData[i].Lon])
                            .bindPopup(markerData[i].n + "<div>Category: <span>" + markerData[i].cat + "</span></div>")
              
              markers.addLayer(marker);
          }

markers.addTo(map)
          markers.eachLayer(function(layer) {
              layer.openPopup();
          });
        
      }
      // Does anyone knows a better way to refresh the service?
      map.removeLayer(tile)
      map.addLayer(tile)
  }, 5000)

function getTime(){

timer.setDate(timer.getDate() + 1);

// time formats
      var day = timer.getDate() < 10 ? "0" + timer.getDate() : timer.getDate(),
          month = (timer.getMonth() + 1) < 10 ? "0" + (timer.getMonth() + 1) : (timer.getMonth() + 1),
          str = year + "-" + month + "-" + day;

if(timer.getTime() == now.getTime())
          timer.setTime(start.getTime());

return str;
  }

</script>
</body>
</html>

Modified http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js to a secure url

Modified http://d3js.org/topojson.v1.min.js to a secure url

https://cdn.leafletjs.com/leaflet/v0.7.7/leaflet-src.js

https://d3js.org/topojson.v1.min.js

https://code.jquery.com/jquery-2.1.1.min.js