Reuse maps as a jupyter notebook (ipy)widget

[benbovy]

Very nice tool!

I agree with @TomNicholas (https://twitter.com/TEGNicholasCode/status/1442932691960139776) that it would be great if we could create this kind of highly responsive maps directly in jupyter notebooks. Ideally, this would just work with any Xarray DataArray or Dataset (or a DataTree) and it would be tightly integrated with the jupyter (or holoviz) widgets ecosystem.

One possible (pretty straightforward?) solution might be:

• Create a custom jupyter widget (e.g., using this template or the js version) as a lightweight wrapper around this front-end application.

• Use xpublish to dynamically serve the Xarray objects via its zarr-compatible API. On a related note, we briefly discussed in Feature/xyz routes xpublish-community/xpublish#88 (comment) about the possibility of using xpublish internally in xarray-leaflet for serving image tiles.

• Pyramids could be created using ndpyramid just before serving the data (we would need to add support in xpublish for DataTree), or within an xpublish custom API router (possibly reusing xpublish's application cache), or maybe on-the-fly via a custom "index" when xarray will support explicit indexes.

[jhamman]

Thanks @benbovy for opening this issue. Certainly seems like there would be interest in this use case so would love to see someone try this out. The template approach seems promising.

We're already starting to prototype connecting our approach in carbonplan/maps with xpublish/datatree and on-the-fly tile generation. We actually have some questions for you on this topic so expect us to ping you tomorrow on that subject.

[benbovy]

I took a stab at wrapping maps as a jupyter widget: https://github.com/benbovy/ipymaps

It's currently based on the demo dataset and it already has some basic integration with ipywidgets:

Oct-01-2021.16-25-18.mp4

It still has rough edges and it's not actually working yet without a dirty edit in zarr-js (for some reason this webpack config doesn't seem to work here).

Some other issues or painful points:

• It is the first time I use React :-). Unfortunately I couldn't find much (up-to-date) examples of jupyter widgets based on react components but I think I'm slowly starting to understand how it works (it was a good opportunity to learn).
• I had to recreate another Map top-level component with some custom style properties in order to show it properly in a notebook cell output
• theme-ui is conflicting a bit with jupyterlab themes, but I guess it's possible to make it work together
• the mapbox canvas is not sized properly when first displaying it.