Leaflet combination chloropleth and Leaflet.TimeDimension

Question

Following up the post from Change the colors of polygons on a choropleth map with leaflet I'm wondering if it is possible to combine a Leaflet chloropleth with the Leaflet.TimeDimension so that the there is a slider where the user can control the years and the colors on the map change correspondingly.

To the background: Lines connect a building with a levee failure of a river (or we could say two imaginary points). With time, the water depth of the flooded building changes. I'd like to show that based on the color of the line (connecting the levee failure with the building). Therefore, moving the time slider should result in a change of the line color.

I have 114 time steps, each lying 20min apart. The date where they start was chosen randomly. So far, so good. After some try-and-errors I (might have) figured out a way how to represent the lines correctly with the corresponding times.

Two problems still remain:

1. By removing all the coordinates between the starting and end point of the line I could prevent the line from beeing gradually build over the time. But it still only shows after the second time step. What can I do that it is visible from the start?

2. In the function teststyle(feature) I tried to retrieve the current water depth of the line at the current time step, but I didn't have luck to do so so far. The line color: setColor(feature.properties.CurrentTime) should look in the GeoJSON for the corresponding property and color the line (e.g. water depth) as defined in the function setColor(f). The colors chosen herefore are random up to now.

The html-file looks as follows:

var map = L.map('map',{preferCanvas: true}).setView([46.7252, 8.1909], 14);
var timeDimension = new L.TimeDimension({
        period: "P0Y0M0DT0H20M0S"

    });
timeDimensionOptions:
    CurrentTime: new Date ("2019-10-22").getTime()
map.timeDimension = timeDimension; 


var player = new L.TimeDimension.Player(
      {
        transitionTime: 100,
        loop: false,
        startOver: false
      },
      timeDimension
    );

var timeDimensionControlOptions = {
    player: player,
    timeDimension: timeDimension,
    playReverseButton : true,
    position: "bottomleft",
    autoPlay: false,
    minSpeed: 1,
    speedStep: 0.5,
    maxSpeed: 15,
    stimeSliderDragUpdate: true
    };

var timeDimensionControl = new L.Control.TimeDimension(timeDimensionControlOptions);

map.addControl(timeDimensionControl);

function setColor(f) {
    return f > 3 ? '#fef0d9':
        f > 2  ? '#b30000':
        f > 1.5  ? '#e34a33':
        f > 1  ? '#fc8d59':
        f > 0.8   ? '#fdbb84':
        f > 0.6   ? '#fdd49e':
        f > 0.4   ? '#a6bddb' :
        f > 0.2   ? '#2b8cbe' :
              '#fef0d9';
    }

function teststyle(feature) {
    return {
      weight: 2,
      opacity: 1,
      color: setColor(feature.properties.CurrentTime),
      dashArray: '',
      fillOpacity: 1,
    };
  }

 var timeSeriesLayer=L.geoJSON(Lines_LV1, {style: teststyle})

 var geojson = L.timeDimension.layer.geoJson(timeSeriesLayer);

 geojson.addTo(map);

 var legend = L.control({position: 'bottomright'});

 legend.onAdd = function (map) {

    var div = L.DomUtil.create('div', 'info legend'),
        grades = [0.2, 0.4, 0.6, 0.8, 1, 1.5, 2, 3],
        labels = ['Values in m water depth per building'],
        from, to;

    for (var i = 0; i < grades.length; i++) {
        from = grades[i];
        to = grades[i + 1];

        labels.push(
            '<i style="background:' + getColor(from + 1) + '"></i> ' +
            from + (to ? '&ndash;' + to : '+'));
    }

    div.innerHTML = labels.join('<br>');
    return div;
    };

 legend.addTo(map);

and finally the geojson I'm trying to implement looks like this (subsequent code is one line feature of total 444 features):

var Lines_LV1 = {
  "type" : "FeatureCollection",
  "features" : [
    {
      "type" : "Feature",
      "id" : 0,
      "geometry" : {
        "type" : "LineString",
        "coordinates" : [
          [
            8.1872821807176006,
            46.722675259950208
          ],
          [
            8.0497022008185972,
            46.749807786672605
          ]
        ]
      },
      "properties" : {
        "FID" : 0,
        "times": [
        "2019-10-22T00:00:00.000Z",
        "2019-10-22T00:20:00.000Z",
        "2019-10-22T00:40:00.000Z",
        "2019-10-22T01:00:00.000Z",
        "2019-10-22T01:20:00.000Z",
        "2019-10-22T01:40:00.000Z",
        "2019-10-22T02:00:00.000Z",
        "2019-10-22T02:20:00.000Z",
        "2019-10-22T02:40:00.000Z",
        "2019-10-22T03:00:00.000Z",
        "2019-10-22T03:20:00.000Z",
        "2019-10-22T03:40:00.000Z",
        "2019-10-22T04:00:00.000Z",
        "2019-10-22T04:20:00.000Z",
        "2019-10-22T04:40:00.000Z",
        "2019-10-22T05:00:00.000Z",
        "2019-10-22T05:20:00.000Z",
        "2019-10-22T05:40:00.000Z",
        "2019-10-22T06:00:00.000Z",
        "2019-10-22T06:20:00.000Z",
        "2019-10-22T06:40:00.000Z",
        "2019-10-22T07:00:00.000Z",
        "2019-10-22T07:20:00.000Z",
        "2019-10-22T07:40:00.000Z",
        "2019-10-22T08:00:00.000Z",
        "2019-10-22T08:20:00.000Z",
        "2019-10-22T08:40:00.000Z",
        "2019-10-22T09:00:00.000Z",
        "2019-10-22T09:20:00.000Z",
        "2019-10-22T09:40:00.000Z",
        "2019-10-22T10:00:00.000Z",
        "2019-10-22T10:20:00.000Z",
        "2019-10-22T10:40:00.000Z",
        "2019-10-22T11:00:00.000Z",
        "2019-10-22T11:20:00.000Z",
        "2019-10-22T11:40:00.000Z",
        "2019-10-22T12:00:00.000Z",
        "2019-10-22T12:20:00.000Z",
        "2019-10-22T12:40:00.000Z",
        "2019-10-22T13:00:00.000Z",
        "2019-10-22T13:20:00.000Z",
        "2019-10-22T13:40:00.000Z",
        "2019-10-22T14:00:00.000Z",
        "2019-10-22T14:20:00.000Z",
        "2019-10-22T14:40:00.000Z",
        "2019-10-22T15:00:00.000Z",
        "2019-10-22T15:20:00.000Z",
        "2019-10-22T15:40:00.000Z",
        "2019-10-22T16:00:00.000Z",
        "2019-10-22T16:20:00.000Z",
        "2019-10-22T16:40:00.000Z",
        "2019-10-22T17:00:00.000Z",
        "2019-10-22T17:20:00.000Z",
        "2019-10-22T17:40:00.000Z",
        "2019-10-22T18:00:00.000Z",
        "2019-10-22T18:20:00.000Z",
        "2019-10-22T18:40:00.000Z",
        "2019-10-22T19:00:00.000Z",
        "2019-10-22T19:20:00.000Z",
        "2019-10-22T19:40:00.000Z",
        "2019-10-22T20:00:00.000Z",
        "2019-10-22T20:20:00.000Z",
        "2019-10-22T20:40:00.000Z",
        "2019-10-22T21:00:00.000Z",
        "2019-10-22T21:20:00.000Z",
        "2019-10-22T21:40:00.000Z",
        "2019-10-22T22:00:00.000Z",
        "2019-10-22T22:20:00.000Z",
        "2019-10-22T22:40:00.000Z",
        "2019-10-22T23:00:00.000Z",
        "2019-10-22T23:20:00.000Z",
        "2019-10-22T23:40:00.000Z",
        "2019-10-23T00:00:00.000Z",
        "2019-10-23T00:20:00.000Z",
        "2019-10-23T00:40:00.000Z",
        "2019-10-23T01:00:00.000Z",
        "2019-10-23T01:20:00.000Z",
        "2019-10-23T01:40:00.000Z",
        "2019-10-23T02:00:00.000Z",
        "2019-10-23T02:20:00.000Z",
        "2019-10-23T02:40:00.000Z",
        "2019-10-23T03:00:00.000Z",
        "2019-10-23T03:20:00.000Z",
        "2019-10-23T03:40:00.000Z",
        "2019-10-23T04:00:00.000Z",
        "2019-10-23T04:20:00.000Z",
        "2019-10-23T04:40:00.000Z",
        "2019-10-23T05:00:00.000Z",
        "2019-10-23T05:20:00.000Z",
        "2019-10-23T05:40:00.000Z",
        "2019-10-23T06:00:00.000Z",
        "2019-10-23T06:20:00.000Z",
        "2019-10-23T06:40:00.000Z",
        "2019-10-23T07:00:00.000Z",
        "2019-10-23T07:20:00.000Z",
        "2019-10-23T07:40:00.000Z",
        "2019-10-23T08:00:00.000Z",
        "2019-10-23T08:20:00.000Z",
        "2019-10-23T08:40:00.000Z",
        "2019-10-23T09:00:00.000Z",
        "2019-10-23T09:20:00.000Z",
        "2019-10-23T09:40:00.000Z",
        "2019-10-23T10:00:00.000Z",
        "2019-10-23T10:20:00.000Z",
        "2019-10-23T10:40:00.000Z",
        "2019-10-23T11:00:00.000Z",
        "2019-10-23T11:20:00.000Z",
        "2019-10-23T11:40:00.000Z",
        "2019-10-23T12:00:00.000Z",
        "2019-10-23T12:20:00.000Z",
        "2019-10-23T12:40:00.000Z",
        "2019-10-23T13:00:00.000Z",
        "2019-10-23T13:20:00.000Z",
        "2019-10-23T13:40:00.000Z"
        ],
        "V25OBJECTI" : 12349778,
        "X_centroid" : 646692,
        "Y_centroid" : 177806,
        "X_levee" : 657233,
        "Y_levee" : 174881,
        "OBJECTID" : 1,
        "V25OBJEC_1" : 12349778,
        "Wert" : 1103346,
        "X_centro_1" : 646692,
        "Y_centro_1" : 177806,
        "Node_ID_10" : 0,
        "Node_ID_11" : 0,
        "Node_ID_12" : 0,
        "Node_ID_13" : 0,
        "Node_ID_14" : 0,
        "Node_ID_15" : 0,
        "Node_ID_1" : 41,
        "Node_ID_2" : 0,
        "Node_ID_3" : 0,
        "Node_ID_4" : 0,
        "Node_ID_5" : 0,
        "Node_ID_6" : 0,
        "Node_ID_7" : 0,
        "Node_ID_8" : 0,
        "Node_ID_9" : 0,
        "MaxDepth" : 0.50578500000000004,
        "2019-10-22T00:00:00.000Z" : 0,
        "2019-10-22T00:20:00.000Z" : 0,
        "2019-10-22T00:40:00.000Z" : 0,
        "2019-10-22T01:00:00.000Z" : 0,
        "2019-10-22T01:20:00.000Z" : 0,
        "2019-10-22T01:40:00.000Z" : 0,
        "2019-10-22T02:00:00.000Z" : 0,
        "2019-10-22T02:20:00.000Z" : 0,
        "2019-10-22T02:40:00.000Z" : 0,
        "2019-10-22T03:00:00.000Z" : 0,
        "2019-10-22T03:20:00.000Z" : 0,
        "2019-10-22T03:40:00.000Z" : 0,
        "2019-10-22T04:00:00.000Z" : 0,
        "2019-10-22T04:20:00.000Z" : 0,
        "2019-10-22T04:40:00.000Z" : 0,
        "2019-10-22T05:00:00.000Z" : 0,
        "2019-10-22T05:20:00.000Z" : 0,
        "2019-10-22T05:40:00.000Z" : 0,
        "2019-10-22T06:00:00.000Z" : 0,
        "2019-10-22T06:20:00.000Z" : 0,
        "2019-10-22T06:40:00.000Z" : 0,
        "2019-10-22T07:00:00.000Z" : 0,
        "2019-10-22T07:20:00.000Z" : 0,
        "2019-10-22T07:40:00.000Z" : 0,
        "2019-10-22T08:00:00.000Z" : 0,
        "2019-10-22T08:20:00.000Z" : 0,
        "2019-10-22T08:40:00.000Z" : 0,
        "2019-10-22T09:00:00.000Z" : 0,
        "2019-10-22T09:20:00.000Z" : 0,
        "2019-10-22T09:40:00.000Z" : 0,
        "2019-10-22T10:00:00.000Z" : 0,
        "2019-10-22T10:20:00.000Z" : 0,
        "2019-10-22T10:40:00.000Z" : 0,
        "2019-10-22T11:00:00.000Z" : 0,
        "2019-10-22T11:20:00.000Z" : 0,
        "2019-10-22T11:40:00.000Z" : 0,
        "2019-10-22T12:00:00.000Z" : 0,
        "2019-10-22T12:20:00.000Z" : 0,
        "2019-10-22T12:40:00.000Z" : 0,
        "2019-10-22T13:00:00.000Z" : 0,
        "2019-10-22T13:20:00.000Z" : 0,
        "2019-10-22T13:40:00.000Z" : 0,
        "2019-10-22T14:00:00.000Z" : 0,
        "2019-10-22T14:20:00.000Z" : 0,
        "2019-10-22T14:40:00.000Z" : 0,
        "2019-10-22T15:00:00.000Z" : 0,
        "2019-10-22T15:20:00.000Z" : 0,
        "2019-10-22T15:40:00.000Z" : 0,
        "2019-10-22T16:00:00.000Z" : 0,
        "2019-10-22T16:20:00.000Z" : 0,
        "2019-10-22T16:40:00.000Z" : 0,
        "2019-10-22T17:00:00.000Z" : 0,
        "2019-10-22T17:20:00.000Z" : 0,
        "2019-10-22T17:40:00.000Z" : 0,
        "2019-10-22T18:00:00.000Z" : 0,
        "2019-10-22T18:20:00.000Z" : 0,
        "2019-10-22T18:40:00.000Z" : 0,
        "2019-10-22T19:00:00.000Z" : 0,
        "2019-10-22T19:20:00.000Z" : 0,
        "2019-10-22T19:40:00.000Z" : 0,
        "2019-10-22T20:00:00.000Z" : 0,
        "2019-10-22T20:20:00.000Z" : 0,
        "2019-10-22T20:40:00.000Z" : 0.272548999999999,
        "2019-10-22T21:00:00.000Z" : 0.288399999999999,
        "2019-10-22T21:20:00.000Z" : 0.303223,
        "2019-10-22T21:40:00.000Z" : 0.317962,
        "2019-10-22T22:00:00.000Z" : 0.332637,
        "2019-10-22T22:20:00.000Z" : 0.344395999999999,
        "2019-10-22T22:40:00.000Z" : 0.356130999999999,
        "2019-10-22T23:00:00.000Z" : 0.367991,
        "2019-10-22T23:20:00.000Z" : 0.377790999999999,
        "2019-10-22T23:40:00.000Z" : 0.387606,
        "2019-10-23T00:00:00.000Z" : 0.397473,
        "2019-10-23T00:20:00.000Z" : 0.405696999999999,
        "2019-10-23T00:40:00.000Z" : 0.413768,
        "2019-10-23T01:00:00.000Z" : 0.421794,
        "2019-10-23T01:20:00.000Z" : 0.429505,
        "2019-10-23T01:40:00.000Z" : 0.437203999999999,
        "2019-10-23T02:00:00.000Z" : 0.444894,
        "2019-10-23T02:20:00.000Z" : 0.450585999999999,
        "2019-10-23T02:40:00.000Z" : 0.456243,
        "2019-10-23T03:00:00.000Z" : 0.461880999999999,
        "2019-10-23T03:20:00.000Z" : 0.466127999999999,
        "2019-10-23T03:40:00.000Z" : 0.470318999999999,
        "2019-10-23T04:00:00.000Z" : 0.474488,
        "2019-10-23T04:20:00.000Z" : 0.478107,
        "2019-10-23T04:40:00.000Z" : 0.480688999999999,
        "2019-10-23T05:00:00.000Z" : 0.484501,
        "2019-10-23T05:20:00.000Z" : 0.486929,
        "2019-10-23T05:40:00.000Z" : 0.489207,
        "2019-10-23T06:00:00.000Z" : 0.491551999999999,
        "2019-10-23T06:20:00.000Z" : 0.493885999999999,
        "2019-10-23T06:40:00.000Z" : 0.496225,
        "2019-10-23T07:00:00.000Z" : 0.498570999999999,
        "2019-10-23T07:20:00.000Z" : 0.500241,
        "2019-10-23T07:40:00.000Z" : 0.502043,
        "2019-10-23T08:00:00.000Z" : 0.503745,
        "2019-10-23T08:20:00.000Z" : 0.504449999999999,
        "2019-10-23T08:40:00.000Z" : 0.505117999999999,
        "2019-10-23T09:00:00.000Z" : 0.505785,
        "2019-10-23T09:20:00.000Z" : 0.505487,
        "2019-10-23T09:40:00.000Z" : 0.505153999999999,
        "2019-10-23T10:00:00.000Z" : 0.50482,
        "2019-10-23T10:20:00.000Z" : 0.503843,
        "2019-10-23T10:40:00.000Z" : 0.502842,
        "2019-10-23T11:00:00.000Z" : 0.501839999999999,
        "2019-10-23T11:20:00.000Z" : 0.500148,
        "2019-10-23T11:40:00.000Z" : 0.498477999999999,
        "2019-10-23T12:00:00.000Z" : 0.496809999999999,
        "2019-10-23T12:20:00.000Z" : 0.494811999999999,
        "2019-10-23T12:40:00.000Z" : 0.49281,
        "2019-10-23T13:00:00.000Z" : 0.490806999999999,
        "2019-10-23T13:20:00.000Z" : 0.488804999999999,
        "2019-10-23T13:40:00.000Z" : 0.486802999999999,
        "X_levee_1" : 657233,
        "Y_levee_1" : 174881
      }
    }
  ]
}

Answer 1

L.TimeDimension.Layer.GeoJSON layer of L.TimeDimension plugin support two kinds of GeoJSON time series:

• If geometry/feature is LineString and there is an array of times associated with it, it must have as many items as coordinates in the LineString. Time travel in this case means progressively adding points that correspond to time.
• Otherwise time travel means that at given time those features are displayed that have this time included in the properties.

In your case you have LineString features with multiple times, but don't want to display line strings progressively from poin to point. Solution with L.TimeDimension plugin would be to repeat each feature several times (once for every time) with same geometry but different properties. This would be misuse of resources if LineStrings would consists of several hundreds of points each.

Much simpler and more flexible solution in this case is to write one's own simple time slider, tailored for this particular case. Range input HTML element is used for slider and setStyle layer method is used to dynamically change feature style.

Since what changes with time is just one value, time series can be defined as a feature property which contains an array of [time, value] pairs. For simplicity the example below presupposes that each feature contains same number of same times. Working JSFiddle example is available here: https://jsfiddle.net/TomazicM/myesfdnh/

<div id='map'>
  <div id="sliderContainer" style="position: absolute; left: 10px; bottom: 10px; background-color: white; display: flex; justify-content: center; align-items: center; z-index: 5000">
    <input type="range" id="timeSlider" min="1" max="11" value="1" style="float: left; padding: 6px;" oninput="updateTime(this.value);" onchange="updateTime(this.value);">
    <div id="currentTime" style="float: left; padding-left: 6px; padding-right: 6px;"></div>
  </div>
</div>
.
.
.
var myGeojson = [
  {"type":"FeatureCollection",
    "features":[
        {"type":"Feature",
          "id":1,
          "properties":{
            "name":"F001",
            "timeSeries":[
              ["2019-10-23T08:20:00.000Z", 0.1],
              ["2019-10-23T08:40:00.000Z", 0.3],
              ["2019-10-23T09:00:00.000Z", 0.4],
              ["2019-10-23T09:20:00.000Z", 0.8],
              ["2019-10-23T09:40:00.000Z", 1],
              ["2019-10-23T10:00:00.000Z", 0.8],
              ["2019-10-23T10:20:00.000Z", 1],
              ["2019-10-23T10:40:00.000Z", 1.5],
              ["2019-10-23T11:00:00.000Z", 2],
              ["2019-10-23T11:20:00.000Z", 3],
              ["2019-10-23T11:40:00.000Z", 2.5]
            ]
          },
          "geometry":{"type":"LineString","coordinates":[[-100.231018,47.875829],[-100.231018,47.875829],[-100.225525,47.715306],[-100.225525,47.715306],[-100.057983,47.717154],[-100.057983,47.717154],[-100.063477,47.885039],[-100.063477,47.885039]]}
        },
        {"type":"Feature",
          "id":2,
          "properties":{
            "name":"F002",
            "timeSeries":[
              ["2019-10-23T08:20:00.000Z", 1],
              ["2019-10-23T08:40:00.000Z", 0.8],
              ["2019-10-23T09:00:00.000Z", 0.3],
              ["2019-10-23T09:20:00.000Z", 0.1],
              ["2019-10-23T09:40:00.000Z", 1],
              ["2019-10-23T10:00:00.000Z", 1.8],
              ["2019-10-23T10:20:00.000Z", 2.1],
              ["2019-10-23T10:40:00.000Z", 3],
              ["2019-10-23T11:00:00.000Z", 1],
              ["2019-10-23T11:20:00.000Z", 2],
              ["2019-10-23T11:40:00.000Z", 1.5]
            ]
          },
        "geometry":{"type":"LineString","coordinates":[[-100.310669,47.648737],[-100.310669,47.648737],[-99.931641,47.656138],[-99.931641,47.656138]]}
        },
        {"type":"Feature",
          "id":3,
          "properties":{
            "name":"F003",
            "timeSeries":[
              ["2019-10-23T08:20:00.000Z", 0.8],
              ["2019-10-23T08:40:00.000Z", 0.7],
              ["2019-10-23T09:00:00.000Z", 0.1],
              ["2019-10-23T09:20:00.000Z", 0.5],
              ["2019-10-23T09:40:00.000Z", 2],
              ["2019-10-23T10:00:00.000Z", 1.5],
              ["2019-10-23T10:20:00.000Z", 1],
              ["2019-10-23T10:40:00.000Z", 1.5],
              ["2019-10-23T11:00:00.000Z", 0.8],
              ["2019-10-23T11:20:00.000Z", 0.1],
              ["2019-10-23T11:40:00.000Z", 0.5]
            ]
          },
        "geometry":{"type":"Polygon","coordinates":[[[-99.989319,47.829752],[-99.989319,47.964181],[-99.780579,47.964181],[-99.780579,47.829752],[-99.989319,47.829752]]]}
        }
    ]
  }
];

var map = L.map('map');

L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, &copy; <a href="https://carto.com/attribution">CARTO</a>'
}).addTo(map);

var timeIndex = 0;
var times = [];

function onEachFeature(feature, layer) {
  if (feature.id == 1) { 
    feature.properties.timeSeries.forEach(function (value, index) {
      times.push(value[0]);
    });
    var timeSlider = document.getElementById('timeSlider');
    timeSlider.setAttribute('min', '1');
    timeSlider.setAttribute('max', (times.length - 1));
  }
}

function setColor(f) {
  return f > 3   ? '#fef0d9':
         f > 2   ? '#b30000':
         f > 1.5 ? '#e34a33':
         f > 1   ? '#fc8d59':
         f > 0.8 ? '#fdbb84':
         f > 0.6 ? '#fdd49e':
         f > 0.4 ? '#a6bddb' :
         f > 0.2 ? '#2b8cbe' :
                   '#fef0d9';
}

function setStyle(feature) {
  return {
      weight: 4,
      opacity: 1,
      color: setColor(feature.properties.timeSeries[timeIndex][1]),
      fillColor: '#3388ff',
      fillOpacity: 0.2
  };
};

var  myLayer = L.geoJSON(myGeojson, {
  onEachFeature: onEachFeature,
  style: setStyle
}).addTo(map);

function updateTime(index) {
  var time;

  timeIndex = index - 1;
  myLayer.setStyle(setStyle);
  time = times[timeIndex];
  document.getElementById('currentTime').innerHTML = time.slice(0, 10) + ' ' + time.slice(11, 16);
};

var sliderContainer = document.getElementById('sliderContainer');
L.DomEvent.disableClickPropagation(sliderContainer);
L.DomEvent.on(sliderContainer, 'click', L.DomEvent.stop);

map.fitBounds(myLayer.getBounds());
updateTime(1);