0

I have a GeoJSON file with time series data, representing repeating polygons with varying data. I have managed to display the data for one time interval (a subset of the data representing one interval) using Leaflet but have so far failed to animate the data using the Leaflet Timedimension plugin (I tried with a subset representing 2 intervals). My data is repeating every one hour, the geometry is the same while the attribute value is changing every hour. I keep getting "Time not available" on the plugin control.

My data has an attribute field called time and the date is in this format:

"time": "2006-03-11 09:00:00"

This is one feature from the GeoJSON data:

{ "type": "Feature", "id": -1549271008, "properties": { "id": 827793, "time": "2006-03-11 08:00:00", "insol": 61.73542 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 39.151222675648221, 34.199670805202523 ], [ 39.151222675712766, 34.199675276071595 ], [ 39.151228272367668, 34.199675276015682 ], [ 39.151228272302838, 34.199670805146624 ], [ 39.151222675648221, 34.199670805202523 ] ] ] } }

I have loaded the relevant js libraries for TimeDimension to work (plus the CSS):

<script type="text/javascript" src="https://cdn.rawgit.com/nezasa/iso8601-js-period/master/iso8601.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/socib/Leaflet.TimeDimension/master/dist/leaflet.timedimension.min.js"></script>

The JavaScript code is at JSFiddle

I'm not sure if the time format is wrong or if I simply have the wrong code for loading the data using the TimeDimension plugin. I have looked through the examples and elsewhere but didn't see something that resembles my case.

So what is the correct way to load a GeoJSON polygon dataset with hourly interval repeating geometry using the Leaflet TimeDimension plugin?

1

You guessed right, time format is wrong. In Leaflet TimeDimension plugin time is parsed with Java Script function Date.parse(dateTime). This function accepts date/time strings in IETF RFC 2822 format or Ecma-262 5.1 format.

The right format for your time would then be 2006/03/11 09:00:00 or 2006-03-11T09:00:00.

EDIT: From your comment below I understand you are loading GeoJSON layer as GeoJSON object. Parameter layer in L.timeDimension.layer.geoJson(layer) has to be Leaflet layer. You first have to load GeoJSON as Leaflet layer and then use it in L.timeDimension.layer.geoJson call.

This code worked for me:

var timeSeriesGeoJSON =
   {"features": [
       { "type": "Feature", "id": -1549271008, "properties": { "id": 827793, "time": "2006-03-11T08:00:00", "insol": 61.73542 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 39.151222675648221, 34.199670805202523 ], [ 39.151222675712766, 34.199675276071595 ], [ 39.151228272367668, 34.199675276015682 ], [ 39.151228272302838, 34.199670805146624 ], [ 39.151222675648221, 34.199670805202523 ] ] ] } },
       { "type": "Feature", "id": -1549271008, "properties": { "id": 827794, "time": "2006-03-11T09:00:00", "insol": 161.73542 }, "geometry": { "type": "Polygon", "coordinates": [ [ [ 39.151222675648221, 34.199670805202523 ], [ 39.151222675712766, 34.199675276071595 ], [ 39.151228272367668, 34.199675276015682 ], [ 39.151228272302838, 34.199670805146624 ], [ 39.151222675648221, 34.199670805202523 ] ] ] } }
     ],
    "type":"FeatureCollection"
   };

var map = L.map('map').fitBounds([[34.1995508059065,39.151200914031406],[34.199696966261726,39.15145937135462]]);

var timeDimension = new L.TimeDimension({
        period: "PT1H",
    });
map.timeDimension = timeDimension; 

var player = new L.TimeDimension.Player({
    transitionTime: 100, 
    loop: false,
    startOver:true
}, timeDimension);
var timeDimensionControlOptions = {
    player:        player,
    timeDimension: timeDimension,
    position:      'bottomleft',
    autoPlay:      true,
    minSpeed:      1,
    speedStep:     1,
    maxSpeed:      15,
    timeSliderDragUpdate: true
};
var timeDimensionControl = new L.Control.TimeDimension(timeDimensionControlOptions);

map.addControl(timeDimensionControl);

function getColor(d) {
    return d > 420 ? 'rgba(215,25,28,1.0)' :
        d > 360  ? 'rgba(237,110,67,1.0)' :
        d > 300  ? 'rgba(254,186,110,1.0)' :
        d > 240  ? 'rgba(255,232,164,1.0)' :
        d > 180   ? 'rgba(231,245,203,1.0)' :
        d > 120   ? 'rgba(183,223,227,1.0)' :
        d > 60   ? 'rgba(117,177,211,1.0)' :
              'rgba(44,123,182,1.0)';
  }

function style(feature) {
    return {
      weight: 2,
      opacity: 1,
      color: 'rgba(35,35,35,1.0)',
      dashArray: '',
      fillOpacity: 1,
      fillColor: getColor(feature.properties.insol)
    };
  }

var timeSeriesLayer = L.geoJSON(timeSeriesGeoJSON, {style: style});

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, 60, 120, 180, 240, 300, 360, 420],
    labels = ['Values in Wh/m<sup>2</sup>'],
    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);
  • I changed the data format to 2006-03-11T09:00:00 and still no go. I even tried adding a Z at the end with no result. It must be something else. Any other ideas? – Techie_Gus Apr 9 at 4:48
  • This definitely was a problem. I tested it with your fiddle code and data, first with your date format (failed) and then with the two date formats I proposed (success). – TomazicM Apr 9 at 5:44
  • I can't figure out what might be wrong since my fiddle code seems to work on your end. Could it be something in my HTML? I have used the same base code to display one interval data subset and just added the needed JS libraries for TimeDimension. Would you mind sharing the HTML part or even the whole thing if it's possible? – Techie_Gus Apr 9 at 5:58
  • I'll publish my code this evening when I come home from my job. By the way, your fiddle is not complete, GeoJSON load part (march_32 layer) is missing. Problem might be hiding there. – TomazicM Apr 9 at 6:07
  • I'm loading the data from an external JS file. It's the GeoJSON file with a var = march_32 at the beginning. Like I mentioned earlier, the map is showing when I take out the TimeDimension code, so the problem must be either with the dependencies or hiding somewhere else. I'll wait for your code this evening. – Techie_Gus Apr 9 at 6:36

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.