Render map and widgets in HTML web page

[lorenae]

Hi!
I'm new to ipyleaflet and it's really a great tool!!

I have a map similar to the WealthOfNations map. I'd like to export the map and the controls and embed in an HTML page.

Following the suggestions from this issue I've saved the map, but this not includes the controls.

I've also obtained HTML using the "Embed widgets" option in the notebook. This produces the map and the widgets, but not the behavior (it doesn't refresh the graphics according to on_hover).

Any suggestions?
thanks in advance!
Lorena

[giswqs]

As far as I know, customized ipywidgets are not supported in the exported HTML. It would be nice if it can be supported in the future. The geemap package built upon ipyleaflet can also export HTML with a GUI. Again, customized ipywidgets are not supported as this moment.

[martinRenou]

Following the suggestions from this issue I've saved the map, but this not includes the controls.

This is a bug, it should work.

[martinRenou]

I've also obtained HTML using the "Embed widgets" option in the notebook. This produces the map and the widgets, but not the behavior (it doesn't refresh the graphics according to on_hover).

This will never be fixed though. The custom on_hover logic relies on Python callbacks that are executed in the kernel, server side. Using a static HTML page, the Python kernel is not there anymore and cannot execute this logic. I would recommend looking at Voila though, which allows you to serve a page with widgets in it, and the Python kernel is still alive server side.See this demo for an example of ipyleaflet with Voila.

[deeplook]

I'm trying to save a map with a GeoJSON layer on it as HTML. I can see the GeoJSON inside the saved HTML, but when I open the HTML in a browser I see only the basemap but no GeoJSON. Should this work? I've tried other MIME type for the GeoJSON inside the HTML, but in vain. See code below.

import requests
from ipyleaflet import Map, GeoJSON

url = "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json"
m = Map(zoom=1)
m += GeoJSON(data=requests.get(url).json())
m.save('my_map.html', title='My Map')

[martinRenou]

@deeplook yes this should work. This looks like a bug. It might be related to the issue with the controls.

[scottyhq]

Just came across this while trying to save the map example with linked ipywidgets https://ipyleaflet.readthedocs.io/en/latest/api_reference/widget_control.html

m.save() only shows the basemap. A partial workaround is going through embed_minimal_html but then the slider widget ends up below the map instead of it's upper right position. This is an example where linked widgets could be nice to save without needing python running via Voila:

from ipyleaflet import Map, basemaps, WidgetControl
from ipywidgets import IntSlider, jslink

m = Map(center=(46.01, 6.16), zoom=12, basemap=basemaps.Stamen.Terrain)
zoom_slider = IntSlider(description='Zoom level:', min=0, max=15, value=7)
jslink((zoom_slider, 'value'), (m, 'zoom'))
widget_control1 = WidgetControl(widget=zoom_slider, position='topright')
m.add_control(widget_control1)

# Two approaches to saving
# 1) no visible slider
#m.save('ipyleaflet_widgets.html', title='Widgets export')

# 2) functioning linked slider, but under map instead of in topright
from ipywidgets.embed import embed_minimal_html
embed_minimal_html('ipyleaflet_widgets1.html', views=[m,zoom_slider], title='Widgets export')

cc @davidbrochart in case you're aware of other workarounds?