[Feat] grass.jupyter.InteractiveMap needs a legend

[petrasovaa]

Is your feature request related to a problem? Please describe.
grass.jupyter.InteractiveMap needs a raster legend, there is no way to display it.

Describe the solution you'd like
One way would be to use d.legend and display that, but I think it will be nicer to get the color values with r.colors.out and use some html/javascript magic to create a legend.

Describe alternatives you've considered
Render d.legend into a file and display that on top of the map.

[ayushsharma1657940]

You can modify the interactive map by adding a legend using Folium

import grass.jupyter as gj
import folium

Create an interactive map

mymap = gj.InteractiveMap()
mymap.add_raster("elevation")

Get the underlying folium map

fmap = mymap.show()

Define a legend HTML

legend_html = """

Elevation Legend
Low Elevation
Medium Elevation
High Elevation

"""

Add the legend to the folium map

fmap.get_root().html.add_child(folium.Element(legend_html))

fmap

[wenzeslaus]

Asking AI is a good start, but did you run the code? Screenshot of the result would really tell everyone if that's a good start for a pull request. You can start by running it in binder. Link is in the release notes.

[Aterg264]

As an initial solution, I propose rendering d.legend to display the legend first. This will provide an immediate way to visualize raster legends within Jupyter Notebook.
Once that works, I can explore a more dynamic and interactive approach using r.colors.out combined with HTML and JavaScript to create a fully integrated legend. This should enhance usability and allow for better customization.
Would this approach work for you?

[petrasovaa]

As an initial solution, I propose rendering d.legend to display the legend first. This will provide an immediate way to visualize raster legends within Jupyter Notebook. Once that works, I can explore a more dynamic and interactive approach using r.colors.out combined with HTML and JavaScript to create a fully integrated legend. This should enhance usability and allow for better customization. Would this approach work for you?

Well, that's what the issue is already describing, so yes, that works, although I would consider going with the second approach right away.

[saurabh12nxf]

Hi @petrasovaa

I’d like to work on adding legend support to InteractiveMap.

I agree that the HTML/JavaScript approach makes more sense than rendering d.legend as an image, since it should be more flexible and integrate better with the notebook UI.

My current idea is:

Use r.colors.out to get the raster color table (JSON output)

Generate a simple HTML legend from the color/value pairs

Display it as an overlay (or adjacent element) for folium / ipyleaflet maps

Keep it configurable (position, size, optional on/off)

I recently worked on the r.colors test suite, so I’m familiar with r.colors.out and its JSON structure.

Does this sound like a reasonable direction? I’m happy to start with a small proof-of-concept and iterate based on feedback.

[petrasovaa]

Does this sound like a reasonable direction? I’m happy to start with a small proof-of-concept and iterate based on feedback.

Yes, that sounds good, maybe just don't open a PR today (maintainers need the CI free for today release preparation).

[saurabh12nxf]

@petrasovaa I have raised PR please once review it and if any changes or features are required tell me i will do it.