2

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
      }
    }
  ]
}
  • Yes, it is possible. – TomazicM Oct 23 at 17:52
  • @TomazicM thanks fore the reply. How would I do that? – Dominik Vogt Oct 23 at 20:26
  • Sorry, I know of no such example. You'll have to learn Leaflet and it's plugins enough to try it yourself. If you get stuck in the process, then you can get help here. – TomazicM Oct 23 at 20:33
  • Please edit your question and add your code. – TomazicM Oct 24 at 12:18
  • Hi TomazicM, sorry the text went off too quickly. I edited the question above. I'm happy to clarify unclear parts of the code. – Dominik Vogt Oct 24 at 12:23
0

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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.