IS2 Map test

webroot/js/timedimension-ext.js

@@ -0,0 +1,248 @@
+/*
+ * L.TimeDimension.Layer.TileLayer.Portus: TimeDimension TileLayer for Portus.
+ */
+
+L.TimeDimension.Layer.TileLayer = L.TimeDimension.Layer.extend({});
+
+L.timeDimension.layer.tileLayer = function(layer, options) {
+  return new L.TimeDimension.Layer.TileLayer(layer, options);
+};
+
+L.TimeDimension.Layer.TileLayer.Portus = L.TimeDimension.Layer.TileLayer.extend({
+
+  initialize: function(layer, options) {
+    L.TimeDimension.Layer.TileLayer.prototype.initialize.call(this, layer, options);
+    this._layers = {};
+    this._defaultTime = 0;
+    this._availableTimes = [];
+    this._timeCacheBackward = this.options.cacheBackward || this.options.cache || 0;
+    this._timeCacheForward = this.options.cacheForward || this.options.cache || 0;
+
+    this._baseLayer.on('load', (function() {
+      this._baseLayer.setLoaded(true);
+      this.fire('timeload', {
+        time: this._defaultTime
+      });
+    }).bind(this));
+  },
+
+  eachLayer: function(method, context) {
+    for (var prop in this._layers) {
+      if (this._layers.hasOwnProperty(prop)) {
+        method.call(context, this._layers[prop]);
+      }
+    }
+    return L.TimeDimension.Layer.TileLayer.prototype.eachLayer.call(this, method, context);
+  },
+
+  _onNewTimeLoading: function(ev) {
+    var layer = this._getLayerForTime(ev.time);
+    if (!this._map.hasLayer(layer)) {
+      this._map.addLayer(layer);
+    }
+  },
+
+  isReady: function(time) {
+    var layer = this._getLayerForTime(time);
+    var currentZoom = this._map.getZoom();
+    if (layer.options.minZoom && currentZoom < layer.options.minZoom){
+      return true;
+    }
+    if (layer.options.maxZoom && currentZoom > layer.options.maxZoom){
+      return true;
+    }
+    return layer.isLoaded();
+  },
+
+  _update: function() {
+    if (!this._map)
+      return;
+    var time = this._timeDimension.getCurrentTime();
+    // It will get the layer for this time (create or get)
+    // Then, the layer will be loaded if necessary, adding it to the map (and show it after loading).
+    // If it already on the map (but probably hidden), it will be shown
+    var layer = this._getLayerForTime(time);
+    if (this._currentLayer == null) {
+      this._currentLayer = layer;
+    }
+    if (!this._map.hasLayer(layer)) {
+      this._map.addLayer(layer);
+    } else {
+      this._showLayer(layer, time);
+    }
+  },
+
+  setOpacity: function(opacity) {
+    L.TimeDimension.Layer.TileLayer.prototype.setOpacity.apply(this, arguments);
+    // apply to all preloaded caches
+    for (var prop in this._layers) {
+      if (this._layers.hasOwnProperty(prop) && this._layers[prop].setOpacity) {
+        this._layers[prop].setOpacity(opacity);
+      }
+    }
+  },
+
+  setZIndex: function(zIndex){
+    L.TimeDimension.Layer.TileLayer.prototype.setZIndex.apply(this, arguments);
+    // apply to all preloaded caches
+    for (var prop in this._layers) {
+      if (this._layers.hasOwnProperty(prop) && this._layers[prop].setZIndex) {
+        this._layers[prop].setZIndex(zIndex);
+      }
+    }
+  },
+
+  _unvalidateCache: function() {
+    var time = this._timeDimension.getCurrentTime();
+    for (var prop in this._layers) {
+      if (time != prop && this._layers.hasOwnProperty(prop)) {
+        this._layers[prop].setLoaded(false); // mark it as unloaded
+        this._layers[prop].redraw();
+      }
+    }
+  },
+
+  _evictCachedTimes: function(keepforward, keepbackward) {
+    // Cache management
+    var times = this._getLoadedTimes();
+    var strTime = String(this._currentTime);
+    var index = times.indexOf(strTime);
+    var remove = [];
+    // remove times before current time
+    if (keepbackward > -1) {
+      var objectsToRemove = index - keepbackward;
+      if (objectsToRemove > 0) {
+        remove = times.splice(0, objectsToRemove);
+        this._removeLayers(remove);
+      }
+    }
+    if (keepforward > -1) {
+      index = times.indexOf(strTime);
+      var objectsToRemove = times.length - index - keepforward - 1;
+      if (objectsToRemove > 0) {
+        remove = times.splice(index + keepforward + 1, objectsToRemove);
+        this._removeLayers(remove);
+      }
+    }
+  },
+
+  _showLayer: function(layer, time) {
+    if (this._currentLayer && this._currentLayer !== layer) {
+      this._currentLayer.hide();
+    }
+    layer.show();
+    if (this._currentLayer && this._currentLayer === layer) {
+      return;
+    }
+    this._currentLayer = layer;
+    this._currentTime = time;
+    console.log('Show layer with time: ' + new Date(time).toISOString());
+
+    this._evictCachedTimes(this._timeCacheForward, this._timeCacheBackward);
+  },
+
+  _getLayerForTime: function(time) {
+    if (time == 0 || time == this._defaultTime || time == null) {
+      return this._baseLayer;
+    }
+    if (this._layers.hasOwnProperty(time)) {
+      return this._layers[time];
+    }
+    var nearestTime = this._getNearestTime(time);
+    if (this._layers.hasOwnProperty(nearestTime)) {
+      return this._layers[nearestTime];
+    }
+
+    var newLayer = this._createLayerForTime(nearestTime);
+
+    this._layers[time] = newLayer;
+
+    newLayer.on('load', (function(layer, time) {
+      layer.setLoaded(true);
+      // this time entry should exists inside _layers
+      // but it might be deleted by cache management
+      if (!this._layers[time]) {
+        this._layers[time] = layer;
+      }
+      if (this._timeDimension && time == this._timeDimension.getCurrentTime() && !this._timeDimension.isLoading()) {
+        this._showLayer(layer, time);
+      }
+      // console.log('Loaded layer ' + layer.wmsParams.layers + ' with time: ' + new Date(time).toISOString());
+      this.fire('timeload', {
+        time: time
+      });
+    }).bind(this, newLayer, time));
+
+    // Hack to hide the layer when added to the map.
+    // It will be shown when timeload event is fired from the map (after all layers are loaded)
+    newLayer.onAdd = (function(map) {
+      Object.getPrototypeOf(this).onAdd.call(this, map);
+      this.hide();
+    }).bind(newLayer);
+    return newLayer;
+  },
+
+  _createLayerForTime:function(time){
+    var options = this._baseLayer.options;
+    var url = this._baseLayer.getURL();
+
+    url = url.replace('{t}', time / 1000);
+    return new this._baseLayer.constructor(url, this._baseLayer.options);
+  },
+
+  _getLoadedTimes: function() {
+    var result = [];
+    for (var prop in this._layers) {
+      if (this._layers.hasOwnProperty(prop)) {
+        result.push(prop);
+      }
+    }
+    return result.sort(function(a, b) {
+      return a - b;
+    });
+  },
+
+  _removeLayers: function(times) {
+    for (var i = 0, l = times.length; i < l; i++) {
+      if (this._map)
+        this._map.removeLayer(this._layers[times[i]]);
+      delete this._layers[times[i]];
+    }
+  },
+
+  setMinimumForwardCache: function(value) {
+    if (value > this._timeCacheForward) {
+      this._timeCacheForward = value;
+    }
+  },
+
+  _getNearestTime: function(time) {
+    if (this._layers.hasOwnProperty(time)) {
+      return time;
+    }
+    if (this._availableTimes.length == 0) {
+      return time;
+    }
+    var index = 0;
+    var len = this._availableTimes.length;
+    for (; index < len; index++) {
+      if (time < this._availableTimes[index]) {
+        break;
+      }
+    }
+    // We've found the first index greater than the time. Get the previous
+    if (index > 0) {
+      index--;
+    }
+    if (time != this._availableTimes[index]) {
+      console.log('Search layer time: ' + new Date(time).toISOString());
+      console.log('Return layer time: ' + new Date(this._availableTimes[index]).toISOString());
+    }
+    return this._availableTimes[index];
+  },
+
+});
+
+L.timeDimension.layer.tileLayer.portus = function(layer, options) {
+  return new L.TimeDimension.Layer.TileLayer.Portus(layer, options);
+};

webroot/test.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>blah</title>
+  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
+          integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
+          crossorigin=""/>
+  <link rel="stylesheet" href="/css/leaflet.timedimension.control.min.css"/>
+  <style>
+    html, body {
+      margin: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    #map {
+      width: 100%;
+      height: 100%;
+    }
+  </style>
+</head>
+<body>
+
+<div id="map"></div>
+
+<!-- Make sure you put this AFTER Leaflet's CSS -->
+<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
+        integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
+        crossorigin=""></script>
+<script src="/js/leaflet.timedimension.min.js"></script>
+<script src="/js/timedimension-ext.js"></script>
+<script>
+
+  var mapboxToken = "pk.eyJ1IjoiamVzc2VjYXIiLCJhIjoiY2pua3puanZ6MWZ1NTNwb2poeHd3Nm9nbyJ9.-A-L91iUQO23_AMvmX4inw";
+  var mymap = L.map('map', {
+    timeDimension: true,
+    timeDimensionControl: true,
+    timeDimensionControlOptions: {
+      autoPlay: true,
+      playerOptions: {
+        loop: false,
+        startOver: true,
+        transitionTime: 100,
+        buffer: 99
+      }
+    }
+  }).setView([ 39.53, -74.71], 8);
+
+  mymap.timeDimensionControl._player.on('stop', function(){
+    setTimeout( function() {
+      mymap.timeDimensionControl._player.setLooped(true);
+      mymap.timeDimensionControl._player.start();
+      setTimeout(function(){mymap.timeDimensionControl._player.setLooped(false)}, 1000);
+    }, 1000)
+  });
+
+  var xhr = new XMLHttpRequest();
+  xhr.onload = function () {
+    try {
+      var data = JSON.parse(xhr.response);
+      console.log(data);
+
+      var rad = data.seriesInfo.twcRadarMosaic;
+      var maxZoom = rad.maxZoom;
+      var series = rad.series;
+      var times = [];
+
+      for (var i = 0; i < series.length; i++) {
+        if (i + 1 > 12) break;
+        times.push(series[i].ts * 1000);
+      }
+
+      mymap.timeDimension.setAvailableTimes(times, 'replace');
+      mymap.timeDimension.setCurrentTime(times[0]);
+      radTimeLayer.addTo(mymap);
+      topLayer.addTo(mymap);
+      topLayer.bringToFront();
+
+      mymap.timeDimensionControl._player.start()
+
+    } catch (e) {
+      console.log(e);
+    }
+  };
+  xhr.open('GET', 'https://api.weather.com/v3/TileServer/series/productSet?apiKey=d522aa97197fd864d36b418f39ebb323&filter=twcRadarMosaic');
+  xhr.send();
+
+  // IS2 Bottom
+  L.tileLayer('https://api.mapbox.com/styles/v1/{style_id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+    maxZoom: 18,
+    style_id: 'jessecar/cjl186uw10jem2slf4lra7754',
+    accessToken: mapboxToken
+  }).addTo(mymap);
+
+  var radLayer = L.tileLayer('https://api.weather.com/v3/TileServer/tile?product=twcRadarMosaic&ts={t}&xyz={x}:{y}:{z}&apiKey={api}', {
+    maxZoom: 18,
+    api: 'd522aa97197fd864d36b418f39ebb323',
+    opacity: 1
+  });
+  var radTimeLayer = L.timeDimension.layer.tileLayer.portus(radLayer, {});
+
+  // IS2 Top layer
+  var topLayer = L.tileLayer('https://api.mapbox.com/styles/v1/{style_id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
+    maxZoom: 18,
+    style_id: 'jessecar/cjl18a4ao2mz52ro34ok1mnwj',
+    accessToken: mapboxToken
+  });
+
+  var overlayMaps = {
+    "Mediterranean wave": radTimeLayer,
+  };
+
+
+</script>
+</body>
+</html>