Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Celtics33 opened this issue Jul 3, 2024 · 5 comments

Comments

@Celtics33
Copy link

Celtics33 commented Jul 3, 2024

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
Copy link
Author

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
Copy link
Author

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
Copy link
Contributor

r1m commented Jul 10, 2024

@Celtics33
Copy link
Author

Celtics33 commented Jul 19, 2024

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
Copy link
Contributor

r1m commented Jul 23, 2024

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants