jupyter-widgets / ipyleaflet

A Jupyter - Leaflet.js bridge
https://ipyleaflet.readthedocs.io
MIT License
1.49k stars 363 forks source link

There's no way to add a colorbar #706

Open tkarna opened 4 years ago

tkarna commented 4 years ago

As far as I can tell, currently there's no way to add a colorbar or legend to layers. Without a legend, the visualization is not meaningful.

martinRenou commented 4 years ago

ipyleaflet could indeed have this built-in.

Although you can put anything you want in a WidgetControl, if you find a library that makes nice colorbars for you (branca?) simply put this colorbar in an Output widget and put it in a WidgetControl :)

davidbrochart commented 4 years ago

Linking with https://github.com/davidbrochart/xarray_leaflet/issues/14, in case you want to use xarray-leaflet.

giswqs commented 3 years ago

Yes, this would be nice to add https://github.com/giswqs/geemap/issues/223

giswqs commented 3 years ago

I have implemented the colorbar in geemap.

Notebook: https://geemap.org/notebooks/55_raster_vis Source code:https://github.com/giswqs/geemap/blob/master/geemap/geemap.py#L2382

giswqs commented 3 years ago

Here are two examples for creating collarbars and colormaps in leafmap with a few lines of code.

https://leafmap.org/notebooks/07_colorbar

https://leafmap.org/notebooks/23_colormaps

mangecoeur commented 3 years ago

I was trying to acheive something similar using BqPlot color scale - the advantage of BqPlot is that is has better native support for widgets (so for example you get live updating of widget properties as you change them). However I still have some styling problems because BqPlot assumes you want the color bar to be part of a figure so it ends up a bit weirdly shrunk.

mangecoeur commented 3 years ago

Update @davidbrochart @giswqs - I gave up on the BqPlot approach b/c I couldn't fix the issues I was having and I used a modifed version of the approach in xarray_leaflet and geemap and possibly found some issues (although I tested with code I copied not the actual package so it might not be a real issue). The problems I found are:

My solution (which might be useful for others) is to store the file in-memory in BytesIO and pass this directly as the Image widget data by specifying the format:


            fig = plt.figure(figsize=(8, 3))
            ax = fig.add_axes([0.05, 0.8, 0.5, 0.07])
            cmap = mpl.cm.get_cmap(self.colormap)
            cbar = mpl.colorbar.ColorbarBase(ax, cmap=cmap, norm=norm, orientation='horizontal')
            f = io.BytesIO()
            output = Output()
            plt.savefig(f, bbox_inches='tight', format='png')
            f.seek(0)
            image = f.getvalue()
            with output:
                display(Image(value=image, format='png',))

            self.colorbar = WidgetControl(widget=output, position=self.colorbar_position, transparent_bg=True)
            self.m.add_control(self.colorbar)
            plt.close()

EDIT: Since the Image can be instantiated directly with the bytes value, and the Image is itself a Widget, we can further simplify:

            fig = plt.figure(figsize=(8, 3))
            ax = fig.add_axes([0.05, 0.8, 0.5, 0.07])
            cmap = mpl.cm.get_cmap(self.colormap)
            cbar = mpl.colorbar.ColorbarBase(ax, cmap=cmap, norm=norm, orientation='horizontal')
            f = io.BytesIO()
            plt.savefig(f, bbox_inches='tight', format='png')
            image = f.getvalue()
            output = Image(value=image, format='png',)
            self.colorbar = WidgetControl(widget=output, position=self.colorbar_position, transparent_bg=True)
            self.m.add_control(self.colorbar)
            plt.close()
HaudinFlorence commented 2 years ago

Related to this issue, recently a ColormapControlhas been added to ipyleaflet https://github.com/jupyter-widgets/ipyleaflet/pull/1010. It can be used with layers displaying data with a color mapping (Choropleth, Velocity, Heatmap). It is built as a WidgetControl and relies on Branca Colormap. Some changes have been proposed to customize the rendering of the colormap to look closer to Foliums'one (adapt its size, add a caption, add label ticks) (https://github.com/python-visualization/branca/pull/110)