grass.jupyter: Add legend support to InteractiveMap (#5468)

[saurabh12nxf]

Added raster legend support to grass.jupyter.InteractiveMap as requested in #5468.

Changes

• Created legend.py module with parse_colors() and generate_legend_html()
• Added add_legend() method to InteractiveMap class
• Supports both folium and ipyleaflet backends
• Automatically detects categorical vs continuous rasters
• Professional CSS styling matching Leaflet native controls

Usage

import grass.jupyter as gj

m = gj.InteractiveMap()
m.add_raster("elevation")
m.add_legend("elevation", title="Elevation (m)")
m.show()

Map without legend

Map with legend

[petrasovaa]

Please include one or more screenshots, thank you.

[saurabh12nxf]

Hi @petrasovaa I have updated the description with the screenshots where i have shown the map without legend and map with legend

[veroandreo]

Map with legend

Hey @saurabh12nxf, thanks for your contribution! Just a comment and question: the elevation map has continuous data, as you can see from the values; however, the legend appears as categories. Is that a default behaviour the user needs to change? d.legend in GRASS automatically creates a continuous bar for continuous data and categories for integer data. Why does the elevation map in your screenshot has a categorical legend?

[saurabh12nxf]

Good catch, thank you! @veroandreo
Currently the legend implementation interprets color rules from r.colors.out as discrete categories, which works correctly for integer rasters but incorrectly for floating point rasters like elevation.
I will update the implementation to detect raster datatype (CELL vs FCELL/DCELL) using raster_info() and render a continuous gradient legend for floating point rasters, similar to d.legend behavior in GRASS.

I will push an update shortly.

[saurabh12nxf]

Thanks for the feedback @veroandreo @petrasovaa

I updated the implementation to detect raster datatype using raster_info() and now the legend behaves like d.legend

• elevation (FCELL/DCELL) - continuous gradient
• landclass96 (CELL) - categorical classes

I also updated the screenshots in the PR description.

Please let me know if anything else should be adjusted .

And I have updated PR description which includes screenshots .

[saurabh12nxf]

Hi @petrasovaa and @veroandreo,

Thank you again for all the helpful feedback during this PR! Seeing the legend feature come to life in the notebooks has been really satisfying.

While looking at the codebase, I noticed that since

legend.py
is a brand new module, it doesn't currently have any unit tests covering the HTML generation or the continuous/categorical logic. To ensure this feature remains stable in the future, I would love to write a comprehensive test suite for it using pytest!

I also noticed that the "Improve GRASS user experience in Jupyter Notebook" GSoC 2026 project idea has a Test of Skills that involves writing tests for grass.jupyter. I am planning to apply for this project, and writing test_legend.py feels like the perfect way to add genuine value to the codebase while also fulfilling that requirement.

Would it be okay with you if I open a new PR dedicated to adding the pytest test suite for the legend
module? Let me know if you have any specific testing strategies in mind for grass.jupyter!

[petrasovaa]

Sorry for the late reply... The gradient legend in the screenshot looks incorrect.

Yes, the PR should have a pytest testing the new functionality.

[github-actions]

[pre-commit] _{reported by reviewdog 🐶}

Suggested change

[github-actions]

[pre-commit] _{reported by reviewdog 🐶}

Suggested change

	# To ensure cross-frontend compatibility, we manually interpolate the
	# To ensure cross-frontend compatibility, we manually interpolate the

[github-actions]

[pre-commit] _{reported by reviewdog 🐶}

Suggested change

	val = max_val - (i / max(1, steps - 1)) * val_range
	val = max_val - (i / max(1, steps - 1)) * val_range

[github-actions]

[ruff] _{reported by reviewdog 🐶}

Suggested change

	'display: flex; flex-direction: column; '
	"display: flex; flex-direction: column; "

[saurabh12nxf]

Hi @petrasovaa, thanks for pointing that out!

The issue was that Jupyter’s ipywidgets.HTML sanitizes CSS and strips linear-gradient() from inline styles, which caused the continuous legend to render as a solid color.

To fix this, I moved the gradient generation to Python and render it as a stack of small <div> blocks with solid rgb() backgrounds. This avoids the sanitizer and produces a smooth gradient that works with both folium and ipyleaflet.

I also added a pytest suite (legend_test.py) covering categorical and continuous legend HTML, routing logic, edge cases, and an integration test for parse_colors() using a real GRASS raster.

All tests passes locally, and I have updated the PR description with the screenshot.