How to save html with data embeded?

[zxdawn]

I see we can export html files like this:

import leafmap

dem_url = ('https://drive.google.com/file/d/1vRkAWQYsLWCi6vcTMk8vLxoXMFbdMFn8/view?usp=sharing')
leafmap.download_file(dem_url, 'dem.tif', unzip=False)

m = leafmap.Map()
m.add_raster( 'dem.tif', colormap='terrain', layer_name='DEM')

m.save('sem.html')

However, once I close the notebook and open the html in browser, it only shows the background map without layers and widgets:

[zxdawn]

Another related question is how to save markers we make on the map to html.

[zxdawn]

According to this question, ipyleaflet doesn't support this, and swtiching to folium is the temporary solution.

[zxdawn]

Well. Using folium doesn't work:

import leafmap.foliumap as leafmap

dem_url = ('https://drive.google.com/file/d/1vRkAWQYsLWCi6vcTMk8vLxoXMFbdMFn8/view?usp=sharing')
leafmap.download_file(dem_url, 'dem.tif', unzip=False)

m = leafmap.Map()
m.add_raster( 'dem.tif', colormap='terrain', layer_name='DEM')

# m.save('sem.html')

with open('sem.html', 'w') as f:
    f.write(m.get_root().render())

I checked sem.html code and see

            var tile_layer_83c76cb2aad4c18fbd5bd23d7d6cad80 = L.tileLayer(
                "http://127.0.0.1:57322/api/tiles/{z}/{x}/{y}.png?\u0026filename=%2FUsers%2Fxinz%2FDocuments%2Fdem.tif\u0026n_colors=255\u0026projection=EPSG%3A3857",
                {"attribution": "Raster file served by \u003ca href=\u0027https://github.com/banesullivan/localtileserver\u0027 target=\u0027_blank\u0027\u003elocaltileserver\u003c/a\u003e.", "colormap": "terrain", "detectRetina": false, "maxNativeZoom": 100, "maxZoom": 100, "minZoom": 0, "noWrap": false, "opacity": 1, "showLoading": false, "subdomains": "abc", "tms": false}
            ).addTo(map_9527602bbe515945c1a84fb1a94b2960);

So, the html just read the local Tiff file as a tileLayer ...

[zxdawn]

Find out the solution based on this notebook. We can add it using folium.raster_layers.ImageOverlay:

import folium
import leafmap.foliumap as leafmap
import xarray as xr

dem_url = ('https://drive.google.com/file/d/1vRkAWQYsLWCi6vcTMk8vLxoXMFbdMFn8/view?usp=sharing')
leafmap.download_file(dem_url, 'dem.tif', unzip=False)

data = xr.open_dataset('dem.tif')['band_data'].isel(band=0)
lon = data.x.to_numpy()
lat = data.y.to_numpy()

m = leafmap.Map(location=[lat.mean(), lon.mean()])

folium.raster_layers.ImageOverlay(data.to_numpy(),
                     [[lat.min(), lon.min()], [lat.max(), lon.max()]],
                     opacity=0.7,
                     name='test').add_to(m)
folium.LayerControl().add_to(m)

m.fit_bounds(m.get_bounds(), padding=(30, 30))

m.save('sem.html')

[zxdawn]

@giswqs I see add_raster actually adds a cog layer. Maybe that's why the exported HTML contains the related link. Is it possible to add a param like embed to embed the layer as an overlay that can be exported to HTML?

[giswqs]

Note that this is not a good solution for large image files. The html file will be huge. It will be slow too load the page

[zxdawn]

Ha, is the slow loading caused by the ImageOverlay method?

[giswqs]

The html file size. See how big your file.

[zxdawn]

Yes, but it's useful to share html directly with others privately for one specific region.