Collapsible map legend element

[IndigoWizard]

Main issue gist

please make a PR to the dev branch where it would be merged if approved.

Implementing a collapsible map legend.
The current branca element based legend is just draggable but not collapsible, it would be great to implement such a feature to minimize the space it takes up on while navigating the map.

Make sure the legend stays draggable when implementing the collapse feature.

map-legend.mp4

Info

The project is using Folium and earthengine-api to generate the map and the raster/vector layers. By default, Folium creates a map in a separate HTML file wildfire-burn-severity/webmap.html from the main python app wildfire-burn-severity/webmap.py .

Even though the project is python based, it generates Leaflet.js based maps through the output html file, the legend is pure HTML/CSS/JS that can be injected in the main python source using Branca library.

I put the branca element based legend in a separate python file wildfire-burn-severity/uilegend.py. You can extract it and treat as just HTML so you get an easier time coding and seeing the results locally as in opposite to running the python app which requires a validated Google Earth Engine account (it takes long time to be accepted and validated).

The css is of course in the src/css

NOTE:

Make sure you put a preview (gif/mp4) of your result in the Pull Request so I can check what it looks like and how it behaves.

[sfrunza13]

Hello, can I try working on this? I can do it! The watermark is from compressing video through a website.

2022-10-24-00-55-04_mp6RvmmD.mp4

[IndigoWizard]

@sfrunza13 Hello there!
Your model seems interesting, could you though make something like the collapsible/accordion we find in a FAQ website section? The ones where the toggle is part of the body and would fold/unfold on click?

Also don't forget to check the live website to know where the rest of the elements are (without having to run the app on locally). The zoom button is at the top left position so your toggle button would overlap, that's why I'm suggesting something like what we find in a FAQ.

PS:

There are tons of examples/resources in here but I just failed and don't have the time to implement them, it could be helpful for future use anyway (search collapsible or accordion): https://freefrontend.com

If you're up for it then fork the project and work on it and I'll assign you to the issue.

[sfrunza13]

Yes, I'd like to try

[IndigoWizard]

@sfrunza13 I asigned you the issue to work on.
Something comes up to mind, when it comes to testing:
If you want to test your code and don't have the google earth engine account, you can past the new code in the webmap.html thus replacing code from Line 41 to Line 137 .

PS:
webmap.html file is rewritten every time the python script is run, thus calling the html code from uilegend.py into webmap.py using branca. That's why it's just used for testing when you don't have a gee account.

[sfrunza13]

This is better?

test2.mp4

[IndigoWizard]

@sfrunza13 Looks great!
You can go ahead and open a PR if it's all setup!

[IndigoWizard]

@sfrunza13 there are other repos here that are up for hacktoberfest if interested or you can check https://github.com/House-of-M for more.
Thanks for your contribution!