Query on click-to-zoom feature

[ishraqrayeedbp]

I am trying to create a dashboard in Streamlit where I will have multiple layers for a three-level drill-down map e.g. State to County to City. I was able to add a dropdown to filter and zoom, but I am interested in click-to-zoom for quick filtering.

Does Leafmap support click-to-zoom feature?

[giswqs]

Streamlit for folium lacks bidrectional communication functionality. Once the map is deplayed, it is a done deal. There is no way to pass information programmatically back to the map.

For web apps with directional functionality, you need to use Solara with leafmap. It has native support for ipywidgets. Try out my example: https://huggingface.co/spaces/giswqs/solara-geospatial

[ishraqrayeedbp]

Thanks for your response. That's a good idea. Follow up on this: Solara supports ipywidgets, and I was able to use on_click to enable click-to-zoom. But now I can't display info on hover/tooltip. Is that something not supported by ipyleaflet / leafmap?

[giswqs]

The Map.add_vector() function should have the popup automatically.
https://leafmap.org/notebooks/10_add_vector/

[ishraqrayeedbp]

Thank you so much for your guidance and for maintaining this amazing library. I'm currently using ipyleaflet directly within Solara, which has been great for implementing interactivity like click-to-zoom using the on_click handler.

However, I’m running into a challenge: once I introduce custom click behavior, I seem to lose the automatic tooltip or popup functionality on hover. On the other hand, leafmap provides those popups out of the box with Map.add_vector(), but I haven’t found a straightforward way to enable click-driven zoom behavior there.

In short, I haven’t been able to get both click-to-zoom and hover-based tooltip/popup working together seamlessly in either approach. I’d really appreciate any suggestions or best practices you might have for achieving this balance between interactivity and informative display.

Thanks again for your support and the incredible tools you’ve built!

[ishraqrayeedbp]

Even though the underlying ipyleaflet supports event handlers like on_click, those don't seem to be easily exposed or customizable when working through the leafmap interface. Please correct me if I am mistaken.

[giswqs]

You can create a new Map class that inherits leafmap.Map, then use Map.on_interaction() to implement the click-to-zoom feature. This is only needed if you want to use your custom Map class with Solara. Otherwise, you can just use leafmap.Map and write a Map.on_interaction() to implement the click-to-zoom feature. `

See this exmaple

leafmap/leafmap/leafmap.py

Line 1256 in 7fc7230

def handle_interaction(**kwargs):

[ishraqrayeedbp]

Thanks for the tip! I tried overriding on_interaction() with a custom leafmap.Map in Solara. The click-to-zoom works, but the problem is tooltip support - unlike Streamlit, Solara (via ipywidgets) doesn't handle DOM-based tooltips or JS injection as smoothly. So while both features work separately, combining them cleanly in Solara has been tricky.

[giswqs]

See this example: https://huggingface.co/spaces/giswqs/solara-maxar/blob/main/pages/02_libya.py#L198