Load GeoJSON polygon time series with Leaflet Time Dimension plug-in? The 2019 Stack Overflow Developer Survey Results Are In Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)Show time series data with non-contiguous times using Leaflet TimeDimension pluginGetting GeoJSON formatted properly for Leaflet?Convert WKT to GeoJSON with leafletActivating Search Plugin with JS LeafletSeparating two GeoJSON files, one with properties and another with geometry?Leaflet GeoJSON with projected coordinates (3857)Passing values for a geojson filter in LeafletMarkerCluster don't work with geojson layer in leafletLoading geojson via ajax in leaflet using bboxTime Enabled Polygon Shapefiles in ArcGIS OnlineUsing Leaflet Search plugin with GeoJSON layer (L.Control.Search)

Semisimplicity of the category of coherent sheaves?

What are these Gizmos at Izaña Atmospheric Research Center in Spain?

Is every episode of "Where are my Pants?" identical?

Can smartphones with the same camera sensor have different image quality?

How to pronounce 1ターン?

Simulating Exploding Dice

Is there a writing software that you can sort scenes like slides in PowerPoint?

Install many applications using one command

Why is superheterodyning better than direct conversion?

What information about me do stores get via my credit card?

Would an alien lifeform be able to achieve space travel if lacking in vision?

Arduino Pro Micro - switch off LEDs

Didn't get enough time to take a Coding Test - what to do now?

Did God make two great lights or did He make the great light two?

How to grep and cut numbers from a file and sum them

Match Roman Numerals

Single author papers against my advisor's will?

What can I do if neighbor is blocking my solar panels intentionally?

Does the AirPods case need to be around while listening via an iOS Device?

Segmentation fault output is suppressed when piping stdin into a function. Why?

Why can't wing-mounted spoilers be used to steepen approaches?

The following signatures were invalid: EXPKEYSIG 1397BC53640DB551

Am I ethically obligated to go into work on an off day if the reason is sudden?

Road tyres vs "Street" tyres for charity ride on MTB Tandem



Load GeoJSON polygon time series with Leaflet Time Dimension plug-in?



The 2019 Stack Overflow Developer Survey Results Are In
Announcing the arrival of Valued Associate #679: Cesar Manara
Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)Show time series data with non-contiguous times using Leaflet TimeDimension pluginGetting GeoJSON formatted properly for Leaflet?Convert WKT to GeoJSON with leafletActivating Search Plugin with JS LeafletSeparating two GeoJSON files, one with properties and another with geometry?Leaflet GeoJSON with projected coordinates (3857)Passing values for a geojson filter in LeafletMarkerCluster don't work with geojson layer in leafletLoading geojson via ajax in leaflet using bboxTime Enabled Polygon Shapefiles in ArcGIS OnlineUsing Leaflet Search plugin with GeoJSON layer (L.Control.Search)



.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;








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?










share|improve this question






























    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?










    share|improve this question


























      0












      0








      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?










      share|improve this question
















      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?







      leaflet geojson time-series timeslider






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Apr 9 at 9:38









      nmtoken

      8,12542866




      8,12542866










      asked Apr 7 at 20:48









      Techie_GusTechie_Gus

      1,378612




      1,378612




















          1 Answer
          1






          active

          oldest

          votes


















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





          share|improve this answer

























          • 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








          StackExchange.ready(function()
          var channelOptions =
          tags: "".split(" "),
          id: "79"
          ;
          initTagRenderer("".split(" "), "".split(" "), channelOptions);

          StackExchange.using("externalEditor", function()
          // Have to fire editor after snippets, if snippets enabled
          if (StackExchange.settings.snippets.snippetsEnabled)
          StackExchange.using("snippets", function()
          createEditor();
          );

          else
          createEditor();

          );

          function createEditor()
          StackExchange.prepareEditor(
          heartbeatType: 'answer',
          autoActivateHeartbeat: false,
          convertImagesToLinks: false,
          noModals: true,
          showLowRepImageUploadWarning: true,
          reputationToPostImages: null,
          bindNavPrevention: true,
          postfix: "",
          imageUploader:
          brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
          contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
          allowUrls: true
          ,
          onDemand: true,
          discardSelector: ".discard-answer"
          ,immediatelyShowMarkdownHelp:true
          );



          );













          draft saved

          draft discarded


















          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f318054%2fload-geojson-polygon-time-series-with-leaflet-time-dimension-plug-in%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown

























          1 Answer
          1






          active

          oldest

          votes








          1 Answer
          1






          active

          oldest

          votes









          active

          oldest

          votes






          active

          oldest

          votes









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





          share|improve this answer

























          • 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















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





          share|improve this answer

























          • 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













          1












          1








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





          share|improve this answer















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






          share|improve this answer














          share|improve this answer



          share|improve this answer








          edited Apr 10 at 20:22

























          answered Apr 8 at 21:08









          TomazicMTomazicM

          1,7281416




          1,7281416












          • 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

















          • 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
















          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





          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





          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 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'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





          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

















          draft saved

          draft discarded
















































          Thanks for contributing an answer to Geographic Information Systems Stack Exchange!


          • Please be sure to answer the question. Provide details and share your research!

          But avoid


          • Asking for help, clarification, or responding to other answers.

          • Making statements based on opinion; back them up with references or personal experience.

          To learn more, see our tips on writing great answers.




          draft saved


          draft discarded














          StackExchange.ready(
          function ()
          StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgis.stackexchange.com%2fquestions%2f318054%2fload-geojson-polygon-time-series-with-leaflet-time-dimension-plug-in%23new-answer', 'question_page');

          );

          Post as a guest















          Required, but never shown





















































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown

































          Required, but never shown














          Required, but never shown












          Required, but never shown







          Required, but never shown







          Popular posts from this blog

          រឿង រ៉ូមេអូ និង ហ្ស៊ុយលីយេ សង្ខេបរឿង តួអង្គ បញ្ជីណែនាំ

          Crop image to path created in TikZ? Announcing the arrival of Valued Associate #679: Cesar Manara Planned maintenance scheduled April 17/18, 2019 at 00:00UTC (8:00pm US/Eastern)Crop an inserted image?TikZ pictures does not appear in posterImage behind and beyond crop marks?Tikz picture as large as possible on A4 PageTransparency vs image compression dilemmaHow to crop background from image automatically?Image does not cropTikzexternal capturing crop marks when externalizing pgfplots?How to include image path that contains a dollar signCrop image with left size given

          Romeo and Juliet ContentsCharactersSynopsisSourcesDate and textThemes and motifsCriticism and interpretationLegacyScene by sceneSee alsoNotes and referencesSourcesExternal linksNavigation menu"Consumer Price Index (estimate) 1800–"10.2307/28710160037-3222287101610.1093/res/II.5.31910.2307/45967845967810.2307/2869925286992510.1525/jams.1982.35.3.03a00050"Dada Masilo: South African dancer who breaks the rules"10.1093/res/os-XV.57.1610.2307/28680942868094"Sweet Sorrow: Mann-Korman's Romeo and Juliet Closes Sept. 5 at MN's Ordway"the original10.2307/45957745957710.1017/CCOL0521570476.009"Ram Leela box office collections hit massive Rs 100 crore, pulverises prediction"Archived"Broadway Revival of Romeo and Juliet, Starring Orlando Bloom and Condola Rashad, Will Close Dec. 8"Archived10.1075/jhp.7.1.04hon"Wherefore art thou, Romeo? To make us laugh at Navy Pier"the original10.1093/gmo/9781561592630.article.O006772"Ram-leela Review Roundup: Critics Hail Film as Best Adaptation of Romeo and Juliet"Archived10.2307/31946310047-77293194631"Romeo and Juliet get Twitter treatment""Juliet's Nurse by Lois Leveen""Romeo and Juliet: Orlando Bloom's Broadway Debut Released in Theaters for Valentine's Day"Archived"Romeo and Juliet Has No Balcony"10.1093/gmo/9781561592630.article.O00778110.2307/2867423286742310.1076/enst.82.2.115.959510.1080/00138380601042675"A plague o' both your houses: error in GCSE exam paper forces apology""Juliet of the Five O'Clock Shadow, and Other Wonders"10.2307/33912430027-4321339124310.2307/28487440038-7134284874410.2307/29123140149-661129123144728341M"Weekender Guide: Shakespeare on The Drive""balcony"UK public library membership"romeo"UK public library membership10.1017/CCOL9780521844291"Post-Zionist Critique on Israel and the Palestinians Part III: Popular Culture"10.2307/25379071533-86140377-919X2537907"Capulets and Montagues: UK exam board admit mixing names up in Romeo and Juliet paper"Istoria Novellamente Ritrovata di Due Nobili Amanti2027/mdp.390150822329610820-750X"GCSE exam error: Board accidentally rewrites Shakespeare"10.2307/29176390149-66112917639"Exam board apologises after error in English GCSE paper which confused characters in Shakespeare's Romeo and Juliet""From Mariotto and Ganozza to Romeo and Guilietta: Metamorphoses of a Renaissance Tale"10.2307/37323537323510.2307/2867455286745510.2307/28678912867891"10 Questions for Taylor Swift"10.2307/28680922868092"Haymarket Theatre""The Zeffirelli Way: Revealing Talk by Florentine Director""Michael Smuin: 1938-2007 / Prolific dance director had showy career"The Life and Art of Edwin BoothRomeo and JulietRomeo and JulietRomeo and JulietRomeo and JulietEasy Read Romeo and JulietRomeo and Julieteeecb12003684p(data)4099369-3n8211610759dbe00d-a9e2-41a3-b2c1-977dd692899302814385X313670221313670221