diff --git a/examples/Velocity_with_colormap.ipynb b/examples/Velocity_with_colormap.ipynb new file mode 100644 index 000000000..33046d17e --- /dev/null +++ b/examples/Velocity_with_colormap.ipynb @@ -0,0 +1,153 @@ +{ + "cells": [ + { + "cell_type": "markdown", + "metadata": {}, + "source": [ + "You will need to install the following packages:\n", + "- `ipyleaflet`\n", + "- `requests`\n", + "- `xarray`\n", + "- `netcdf4`" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "# Set up for JupyterLite\n", + "try:\n", + " import piplite\n", + " await piplite.install('ipyleaflet')\n", + "except ImportError:\n", + " pass" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "import ipyleaflet\n", + "from ipyleaflet.velocity import Velocity\n", + "import xarray as xr\n", + "from branca.colormap import linear" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "center = [44.33956524809713, -130.60546875000003]\n", + "zoom = 3\n", + "m = ipyleaflet.Map(\n", + " center=center,\n", + " zoom=zoom,\n", + " interpolation=\"nearest\",\n", + " basemap=ipyleaflet.basemaps.CartoDB.DarkMatter,\n", + ")" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "import os\n", + "\n", + "if not os.path.exists(\"wind-global.nc\"):\n", + " url = \"https://github.com/benbovy/xvelmap/raw/master/notebooks/wind-global.nc\"\n", + " import requests\n", + "\n", + " r = requests.get(url)\n", + " wind_data = r.content\n", + " with open(\"wind-global.nc\", \"wb\") as f:\n", + " f.write(wind_data)" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "ds = xr.open_dataset(\"wind-global.nc\")" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "display_options = {\n", + " \"velocityType\": \"Global Wind\",\n", + " \"displayPosition\": \"bottomleft\",\n", + " \"displayEmptyString\": \"No wind data\",\n", + "}\n", + "wind = Velocity(\n", + " data=ds,\n", + " zonal_speed=\"u_wind\",\n", + " meridional_speed=\"v_wind\",\n", + " latitude_dimension=\"lat\",\n", + " longitude_dimension=\"lon\",\n", + " velocity_scale=0.01,\n", + " max_velocity=20,\n", + " colormap = linear.viridis,\n", + " display_options=display_options\n", + ")" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [ + "colormap_control = ipyleaflet.ColormapControl(\n", + " colormap=wind.colormap,\n", + " value_min=wind.min_velocity,\n", + " value_max=wind.max_velocity,\n", + " position='topright',\n", + " transparent_bg=False,\n", + ")\n", + "m.add(wind)\n", + "m" + ] + }, + { + "cell_type": "code", + "execution_count": null, + "metadata": {}, + "outputs": [], + "source": [] + } + ], + "metadata": { + "kernelspec": { + "display_name": "Python 3 (ipykernel)", + "language": "python", + "name": "python3" + }, + "language_info": { + "codemirror_mode": { + "name": "ipython", + "version": 3 + }, + "file_extension": ".py", + "mimetype": "text/x-python", + "name": "python", + "nbconvert_exporter": "python", + "pygments_lexer": "ipython3", + "version": "3.9.12" + } + }, + "nbformat": 4, + "nbformat_minor": 4 +} diff --git a/ipyleaflet/leaflet.py b/ipyleaflet/leaflet.py index 6489f4af4..c397ea335 100644 --- a/ipyleaflet/leaflet.py +++ b/ipyleaflet/leaflet.py @@ -2049,8 +2049,6 @@ class ColormapControl(WidgetControl): Attributes ---------- - caption : str, default 'caption' - The caption of the colormap. colormap: branca.colormap.ColorMap instance, default linear.OrRd_06 The colormap used for the effect. value_min : float, default 0.0 @@ -2058,7 +2056,6 @@ class ColormapControl(WidgetControl): value_max : float, default 1.0 The maximal value taken by the data to be represented by the colormap. """ - caption = Unicode('caption') colormap = Instance(ColorMap, default_value=linear.OrRd_06) value_min = CFloat(0.0) value_max = CFloat(1.0) @@ -2068,7 +2065,6 @@ def _default_widget(self): widget = Output(layout={'height': '40px', 'width': '520px', 'margin': '0px -19px 0px 0px'}) with widget: colormap = self.colormap.scale(self.value_min, self.value_max) - colormap.caption = self.caption display(colormap) return widget diff --git a/ipyleaflet/velocity.py b/ipyleaflet/velocity.py index 3197ce9f5..f82dce2cb 100644 --- a/ipyleaflet/velocity.py +++ b/ipyleaflet/velocity.py @@ -3,10 +3,10 @@ # from traittypes import Dataset -from traitlets import Unicode, Bool, Dict, Float, List - -from .leaflet import Layer +from traitlets import Unicode, Bool, Dict, Float, List, Any, default +from .leaflet import Layer, ColormapControl from .xarray_ds import ds_x_to_json +from branca.colormap import linear class Velocity(Layer): @@ -38,49 +38,61 @@ class Velocity(Layer): Used to align color scale. velocity_scale: float, 0.005 To be modified for particle animations. - color_scale: array, default [] - Array of hex/rgb colors for user-specified color scale. + branca.colormap.LinearColorMap instance, default linear.OrRd_06 + The colormap used for displaying the Velocity data + _color_scale: array, default [] + Array of hex/rgb colors for user-specified color scale, it is private and defined from the colormap. + """ - _view_name = Unicode('LeafletVelocityView').tag(sync=True) - _model_name = Unicode('LeafletVelocityModel').tag(sync=True) + _view_name = Unicode("LeafletVelocityView").tag(sync=True) + _model_name = Unicode("LeafletVelocityModel").tag(sync=True) - zonal_speed = Unicode('', help='Name of the zonal speed in the dataset') - meridional_speed = Unicode('', help='Name of the meridional speed in the dataset') - latitude_dimension = Unicode('latitude', help='Name of the latitude dimension in the dataset') - longitude_dimension = Unicode('longitude', help='Name of the longitude dimension in the dataset') + zonal_speed = Unicode("", help="Name of the zonal speed in the dataset") + meridional_speed = Unicode("", help="Name of the meridional speed in the dataset") + latitude_dimension = Unicode( + "latitude", help="Name of the latitude dimension in the dataset" + ) + longitude_dimension = Unicode( + "longitude", help="Name of the longitude dimension in the dataset" + ) units = Unicode(None, allow_none=True) data = Dataset().tag(dtype=None, sync=True, to_json=ds_x_to_json) # Options display_values = Bool(True).tag(sync=True, o=True) - display_options = Dict({ - 'velocityType': 'Global Wind', - 'position': 'bottomleft', - 'emptyString': 'No velocity data', - 'angleConvention': 'bearingCW', - 'displayPosition': 'bottomleft', - 'displayEmptyString': 'No velocity data', - 'speedUnit': 'kt' - }).tag(sync=True) + display_options = Dict( + { + "velocityType": "Global Wind", + "position": "bottomleft", + "emptyString": "No velocity data", + "angleConvention": "bearingCW", + "displayPosition": "bottomleft", + "displayEmptyString": "No velocity data", + "speedUnit": "kt", + } + ).tag(sync=True) min_velocity = Float(0).tag(sync=True, o=True) max_velocity = Float(10).tag(sync=True, o=True) velocity_scale = Float(0.005).tag(sync=True, o=True) - color_scale = List([ - "rgb(36,104, 180)", - "rgb(60,157, 194)", - "rgb(128,205,193)", - "rgb(151,218,168)", - "rgb(198,231,181)", - "rgb(238,247,217)", - "rgb(255,238,159)", - "rgb(252,217,125)", - "rgb(255,182,100)", - "rgb(252,150,75)", - "rgb(250,112,52)", - "rgb(245,64,32)", - "rgb(237,45,28)", - "rgb(220,24,32)", - "rgb(180,0,35)" - ]).tag(sync=True, o=True) + colormap = Any(linear.OrRd_06) + color_scale = List([]).tag(sync=True, o=True) + + @default("color_scale") + def _default_color_scale(self): + return [ + f"rgba{tuple(int(x * 255) for x in color)}" + for color in self.colormap.colors + ] + + @default("subitems") + def _default_subitems(self): + colormap_control = ColormapControl( + colormap=self.colormap, + value_min=self.min_velocity, + value_max=self.max_velocity, + position="topright", + transparent_bg=False, + ) + return (colormap_control,)