socib / Leaflet.TimeDimension

Add time dimension capabilities on a Leaflet map.
MIT License
436 stars 138 forks source link

Extract time from time dimension player to display on the map as a dynamic html label #233

Open Celtics33 opened 3 months ago

Celtics33 commented 3 months ago

Is there a way to extract the time from the time dimension player to display somewhere else on the leaflet.js map ? I have not found much documentation to extract this. For instance, if the time dimension player is at 2017-03 from reading the times property in a geojson, how can I extract the 2017-03 to display on the map in the lower right as a dynamic html label? Thus, for every frame the player updates the map with the time, the label is also updated. Or can I create a custom dynamic html element that is on the leaflet.js map that is read directly from the geojson based on the when the user clicks play ? If this is in documentation somewhere, I do apologize to access certain elements.

Celtics33 commented 3 months ago
let text_ = map.timeDimension.on('timeload', function() { 
    //console.log(map.timeDimension.getAvailableTimes());
    console.log(map.timeDimension.getCurrentTime()) ; 
});

This appears to get the time from the player when the player is playing the time sequence, but how to take this information and update a label on the map, dynamically?

Celtics33 commented 3 months ago

This creates a textbox via leaflet but how to pass the value from the code above to the textbox ? If I copy the code below inside of the timeload function above, it then creates multiple textboxes -

let textbox   = L.Control.extend({
    onAdd: function() {

    var text = L.DomUtil.create('div');
    text.id = "info_text"; 
    text.innerHTML = "<h2>" +  123 + "</h2>";
    return text;
    },

});

new textbox({ position: 'topleft' }).addTo(map);
r1m commented 2 months ago

https://github.com/socib/Leaflet.TimeDimension/blob/master/examples/js/example10.js#L279

Celtics33 commented 2 months ago

This does help, but I would like to see somewhere on socib site an example with multipolygons. There is one basic geojson example but multipolygons are more complex to get it to work with timeDimension. Many of the examples are not loading properly either. I have gotten multipolygons with Python's Folium API but getting it work with leaflet a bit different.

r1m commented 2 months ago

Did you see this one ? https://apps.socib.es/Leaflet.TimeDimension/examples/example15.html