Hi, In example 6, the layer is smoothing (areafill style) Example 1: contour lines I have found that there are other filters for ncWMS. How I can install these filters in Thredds? Only exist in the file ImageProducer.java "BOXFILL, VECTOR, CONTOUR, BARB, STUMPVEC, TRIVEC, LINEVEC, FANCYVEC, PRETTYVEC" Thanks

How can I change the marker of the 'current position' without overwriting the marker-icon.png :) ?

BTW: I'm speaking of the addlastPoint: true option

Somehow one needs to replace this with e.g. a custom marker:

var marker = L.marker([lat, lon]);
var icon = L.icon({
    iconUrl: './path-to-im/test.png',            
    iconSize: [24, 24],
    iconAnchor: [10, 10]
});
marker.setIcon(icon);
marker.addTo(vrpMap);

I was wondering if anything in the TimeDimension API will allow an automatic refresh of WMS images. I have a radar loop using the NOAA nowCOAST WMS reflectivity images. The loop loads in an hour's worth of images great. The problem is that they do not update as new images are available from the WMS service. I was hoping the "cache" or "cacheForward" options would help. Will either of these do the trick or there another API option that would work? If not, what would you suggest? Thanks in advance.

Mike

Hello again,

I'm using npm to instantiate my projects, and not bower.

There isn't any npm package published yet, I think it could be nice.

But, with npm, we can install a package directly from his github URL, for example

npm install socib/Leaflet.TimeDimension#d579118

I encounter some errors :

npm ERR! Linux 4.4.0-47-generic
npm ERR! argv "/home/mdartic/.nvm/versions/node/v4.4.7/bin/node" "/home/mdartic/.nvm/versions/node/v4.4.7/bin/npm" "install" "socib/Leaflet.TimeDimension#d579118"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/iso8601-js-period
npm ERR! 404 
npm ERR! 404 'iso8601-js-period' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of 'leaflet-timedimension'
npm ERR! 404 
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

This is due to the iso8601-js-period that is not declared into npmjs registry.

Several questions :

• what do you think about publishing this plugin in npm ?
• do you agree i make a PR to update package.json and add iso8601-js-period in dependency ?

Hey, I've got another question regarding your plugin. I would like to extend the L.Control.TimeDimension._update method, without touching your library. I thought about doing it like this: https://gist.github.com/trillerpfeife/f1c29c8c958b6be221289c6c069d7796 but this way is somehow not working. Do you have any idea?

Have a nice day :sunny:, trillerpfeife

Hi would it be possible to make example9 work with a GEOjson file? This is because usually, other than the animated path (polyline, loaded from gpx or kml), it would be useful to show a overlay layer with the single points (each one with popup enabled to show date,location and fix number)...and it seems possible only with geoJson (or not?). I'm thinking to convert my gpx file in a geoJson (like attached, adding datetime values..) and then use:

var jsonLayer = L.geoJson(null, { onEachFeature: function (feature, layer) {layer.bindPopup(feature.properties.Luogo);} }); $.getJSON("data/tr.geojson", function(json) { jsonLayer.addData(json); }); .. and then

var overlayMaps = { "GPX Layer": gpxTimeLayer, "pt": jsonLayer };

...but then i'll have 2 similar file with coords in my projects...and is not a good solution. All gps data should be in a single file, that serve both animated path overlay and single points layer (usr can choose if enable both or each one) Another solution would be to find a way to extract single points from the gpx file you use and base my extra overlay layer on this...but is it possible? tr.zip

Hi @bielfrontera, you can at the time, load the various steps of a GeoJSON, as with a WMS layer?

I'll explain: I have a GeoJSON that contains a lot of data (tens of MB). You can load a file (eg index.json) containing an array of dates (eg ["20151202T220000Z","20151202T230000Z"]), and then load the various GeoJSON necessary (eg 20151202T220000Z.geojson, 20151202T230000Z.geojson, etc.)?

At the moment I figured out, we can add time as a property for point and polygons. Works great but for line strings we need to add times as many times as coordinates or else just the last point is displayed. This is cumbersome. Does anyone have a different approach?

Point Sample

   "type":"FeatureCollection",
   "crs":{  
      "type":"name",
      "properties":{  
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[  
      {  
         "type":"Feature",
         "properties":{  
            "ID":1,
            "Category":null,
            "Type":"Test",
            "Date":"20180101000000",
            "time":"2015-03-08T00:00:00.000Z"
         }
      }
   ]
}

Linestring Sample

   "type":"FeatureCollection",
   "crs":{  
      "type":"name",
      "properties":{  
         "name":"urn:ogc:def:crs:OGC:1.3:CRS84"
      }
   },
   "features":[  
      {  
         "type":"Feature",
         "properties":{  
            "ID":1,
            "Category":null,
            "Type":"Bike",
            "Date":"20181201000000",
            "time":"2017-09-08T00:00:00.000Z",
            "times":[  
               "2017-03-08T00:00:00.000Z",
               "2018-03-08T00:00:00.000Z",
               "2019-03-08T00:00:00.000Z",
               "2020-03-08T00:00:00.000Z",
               "2021-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2019-03-08T00:00:00.000Z",
               "2020-03-08T00:00:00.000Z",
               "2020-04-08T00:00:00.000Z",
               "2020-06-08T00:00:00.000Z",
               "2022-9-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z",
               "2022-03-08T00:00:00.000Z"
            ]
         },
         "geometry":{  
            "type":"LineString",
            "coordinates":[  
               [  
                  144.66611709854402,
                  -37.900577963091273
               ],
               [  
                  144.66602796949803,
                  -37.900442408518742
               ],
               [  
                  144.66590379717303,
                  -37.900365586305668
               ],
               [  
                  144.66576112853602,
                  -37.900303624206259
               ],
               [  
                  144.66554465611304,
                  -37.900240128116373
               ],
               [  
                  144.66534036753902,
                  -37.900183918893688
               ],
               [  
                  144.66518118427402,
                  -37.90013647945878
               ],
               [  
                  144.66505050724803,
                  -37.900103552184376
               ],
               [  
                  144.66491364621902,
                  -37.900062765214692
               ],
               [  
                  144.66482396021803,
                  -37.900032461346385
               ],
               [  
                  144.66469208573804,
                  -37.8999824054616
               ],
               [  
                  144.66459597229104,
                  -37.899951376409859
               ],
               [  
                  144.66444721577102,
                  -37.89989803638057
               ],
               [  
                  144.66430606349104,
                  -37.899865072139342
               ],
               [  
                  144.66412351145203,
                  -37.89982319766478
               ],
               [  
                  144.66386013259702,
                  -37.89946918323816
               ],
               [  
                  144.66362211228403,
                  -37.899210914901786
               ],
               [  
                  144.66348071296702,
                  -37.89899193259587
               ],
               [  
                  144.66323273213405,
                  -37.898545654643044
               ]
            ]
         }
      }
   ]
}

i have several issues with the plugin

1. i do have a wms service with time dimension enabled, but the control shows "no time available"

2. when i set some options i got javascript-error "ReferenceError: nezasa is not defined

if (nezasa === undefined) {"

my javascript code:

    var mapOptions = {
        center: L.latLng(52.022501, 4.438992),
        zoom: 12,
        timeDimension: true,
        timeDimensionControl: true,
        timeDimensionOptions: {
            timeInterval: "2015-04-29/2015-05-01"
            }
    };
var map = L.map('map', mapOptions);

var tileLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

var mywms = L.tileLayer.wms("http://localhost:8080/geoserver/Mannus/wms", {
    layers: 'Mannus:meetdata',
    format: 'image/png',
    transparent: true
});
map.addLayer(mywms);

var testTimeLayer = L.timeDimension.layer.wms(mywms);
testTimeLayer.addTo(map);

I am trying to use leaflet method bringToBack( ) for polygons in order to place them behind points and lines.

It does work in the first instance of time but overtime the polygon features with future dates overlap on top of points and lines. Is this because we are adding the features on map based on time and not as one complete layer? I did look into layer.geojson.js to check if there a way to handle this but couldn't find much info atm.

Any help is appreciated.

This is a new implementation of the player. No jqueryUI dependencies , works on mobiles.

• Added possibility to change animation limits with new knobs limitSliders=true
• Now the player emits animation related events (play, pause, loop,...), timedimension emits events related to time loading/changing. This allows to create custom control

As this is breaking change I changed version to 1.0.0-beta. I also updated examples pages to use the latest 0.7.7 version.

Tested on 0.7.7 and 1.0.0b

I really appreciate this Leaflet plugin to offer time dimension controls. Congratulations. I am wondering if there is a similar code to control the vertical dimension ?

I'm trying to get the plugin work for a small project of mine. I download satellite images of my area and run them through some processing. I would like to display them through Leaflet. I have set up a MapServer instance and it works in QGIS but I can't get it to work in Leaflet. Becaause the images are in irregular intervals, my server gives a list of available times rather than a range - like this: <Dimension name="time" units="ISO8601" default="2022-11-15T15:57:30Z" nearestValue="0">2022-10-22T04:42:09Z,2022-10-22T15:57:31Z,2022-10-27T04:50:17Z,2022-11-03T04:42:09Z,2022-11-03T15:57:30Z,2022-11-08T04:50:16Z,2022-11-15T15:57:30Z</Dimension>

My leaflet code looks like this:

var map = L.map('map', {
    zoom: 12,
    center: [61.2712,24.0333],
    timeDimension: true,
    timeDimensionControl: true,
});

var baseLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '© OpenStreetMap contributors'
}).addTo(map);

var satLayer = L.tileLayer.wms("https://mapserver.gofferje.net/?map=sat", {
    tileSize: 1024,
    layers: 'Sentinel-1-VVVH-ratio',
    format: 'image/png',
    transparent: true,
    attribution: 'VLK radar'
});

var tsatLayer = L.timeDimension.layer.wms(satLayer, {
    requestTimeFromCapabilities: true,
    updateTimeDimension: true,
//    updateTimeDimensionMode: "replace",
//    setDefaultTime: true,
    //wmsVersion: "1.3.0"
});
tsatLayer.addTo(map);
var marker = L.marker([61.2712,24.0333]).addTo(map);

I have tried setting the time dimension extent in the map section but to no avail. I just can't make it work.

Hi I have a simple geojson file like that:

  "type": "FeatureCollection",
  "metadata": {
    "total": 2073,
    "name": "BEAL",
    "event": "birth"
  },
  "features": [
    {
      "type": "Feature",
      "properties": {
        "time": "1920-03-15"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          4.866667,
          45.516667
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "time": "1941-06-14"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          3.683333,
          45.616667
        ]
      }
    },
    {
      "type": "Feature",
      "properties": {
        "time": "1949-07-16"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          4.866667,
          45.516667
        ]
      }
    },

And I want to use it as a heatmap like the example 12 but it's too complicate with the SODA API thing.

Is there somewhere an simple example of a dynamic heatmap based on a single geojson file?

Thanks

Hello and first of all thanks for this great plugin, I have been using it for a few years without issues. However, I came across an use case that requires a modification that I can't really wrap my head around to implementing.

Basically, I need to limit, by user input, how "early" information should start showing up on the viewer page from a GeoJSON file that already has a whole day's track info in it.

The closest I could get to my goal was enabling the limitSliders. However, it is my understanding that this is not how this function is supposed to be used - they only control the animated range that is played. Dragging the start limit slider makes the animation start from that state, with all the prior markers already shown and that makes sense for the original intended use.

Is there a way to make this feature behave as I described or could anyone kindly point me to the file / code section that governs the limit sliders and "point/track progress" selection/filtering so that I can attempt to implement the change myself?

Thank you very much in advance!

I'm using this plugin on my work and I realized that this code doesn't have a documentation for it's functions. So I decided to help with that.

There are 7 commits, each one for a single file, so it beacame more easy to track the changes across the files.

I know some documentations have a lack of clarity but I'll improve them across the time.

In the end I hope I can help to update and improve your package. See ya.

I read README and I used the form "String formed by start date/end date/period " But It isn't work! How do I make the features have their own period? (Ex. One feature show up at 2015-08-01 and hide at 2016-08-02, and another feature show up and hide not the same period! )

My code :

{ "id": "0", "type": "Feature", "properties": { "nuts_id": "ES", "levl_code": 0, "cntr_code": "ES", "nuts_name": "ESPAÑA", "fid": "ES", "name": "ESPAÑA", "value": 279.1763000488281, "times": "2015-08-01/2016-08-02/P1D" //--->Not Work! },