Save to HTML

[martinRenou]

It looks like one feature that is really missing compared to Folium is the ability to save the map to HTML. It seems to be searched the most in the documentation, according the the readthedocs search analytics.

It might be better implemented in ipywidgets directly though. As it might be a common request across widgets libraries. What do you think @maartenbreddels @jasongrout @SylvainCorlay ?

[giswqs]

I was searching for this feature as well. It would be a great addition to ipyleaflet. Here is a relevant post on stackoverflow.

[martinRenou]

Thanks for the link :) I hate that the answer to "How to save the ipyleaflet map to HTML?" is "Use Folium" :P

[giswqs]

The pydeck package has a to_html() function (link), which might be worth looking into.

r = pydeck.Deck(layers=[polygon, geojson], initial_view_state=INITIAL_VIEW_STATE)
r.to_html("geojson_layer.html", notebook_display=False)

[maartenbreddels]

I don't think pydeck is using the widget machinery here for the to_html. https://ipywidgets.readthedocs.io/en/latest/embedding.html#python-interface should do the job, which is an upstream port of what ipyvolume did, but a bit more low level.

https://github.com/maartenbreddels/ipyvolume/blob/159d0e3416734a6736fafe3fa8b3280ea3bc6501/ipyvolume/embed.py#L121 is much simpler to use (slightly ipyvolume specific), and can even download the js files next to it (so it is completely standalone).

I'd love to see a some_dom_widget.to_html(...)!

[martinRenou]

I did not know about the embed_minimal_html, thanks a lot Maarten.

[maartenbreddels]

I answered it at https://stackoverflow.com/questions/44800396/python-ipyleaflet-export-map-as-png-or-jpg-or-svg/61538586#61538586
for html and png

[martinRenou]

Thanks a lot! We could either document this properly in ipyleaflet, or add a .save method like in Folium.

I would actually be in favor of adding the .save method, for feature parity with Folium,

[maartenbreddels]

just assign to DOMWidget.save :-D

[martinRenou]

:P I mean in ipyleaflet for now. But we could upstream it later if everybody agrees.

[giswqs]

It works like a charm!! Is it possible to specify the width and height (e.g., 100%) when saving the map to html? It seems the default height takes roughly 2/3 of the screen height.

[martinRenou]

It is possible. I wasn't sure if it was a good idea to expose it to the .save method.

But you can definitely do that changing the layout of the map: m.layout.height = '100%' or m.layout.height = '1000px'. I am not sure if the 100% will work, the map might be in a fixed-height container. I agree it should take the entire screen though. I will give it a bit more thought.

[AyrtonB]

Hi @martinRenou, I can confirm that using m.layout.height = '100%' unfortunately doesn't work. Are there any workarounds you know of to solve this?

[martinRenou]

As far as I know, there is no proper way that for doing this.

You can always modify the output HTML and include the proper CSS in the page that allows implement this behavior, but it's not great.

You can also use the fullscreen control to allow making the map fullscreen with a click.

[AyrtonB]

I've added full-screen control so will test automatically modifying the HTML afterwards. Thanks!

[AlexeyPechnikov]

I successfully saved the map, and the hover feature works as expected, but the popups don’t appear when I click on a feature. Is there a way to enable the popups? Without them, we’re losing significant interactivity with the map.

# Define the GeoJSON layer with embedded styles
geo_json = GeoJSON(
    data=geojson,
    style_callback=lambda feature: feature['properties']['style'],
    hover_style={'fillOpacity': 1},
    point_style={'weight': 0.5, 'fillOpacity': 0.5},
    ...
)
geo_json.on_click(on_click)