Change color_scale into a private attribute, listen to its change in in Velocity.js, change default colormap to OrRd_06 to fit other default values in ipyleaflet, update docstrings.

Author: HaudinFlorence

examples/Velocity_with_colormap.ipynb

@@ -20,7 +20,7 @@
     "# Set up for JupyterLite\n",
     "try:\n",
     "    import piplite\n",
-    "    await piplite.install('ipyleaflet')\n",
+    "    await piplite.install(['ipyleaflet')\n",
     "except ImportError:\n",
     "    pass"
    ]
@@ -80,15 +80,6 @@
     "ds = xr.open_dataset(\"wind-global.nc\")"
    ]
   },
-  {
-   "cell_type": "code",
-   "execution_count": null,
-   "metadata": {},
-   "outputs": [],
-   "source": [
-    "colormap = linear.viridis"
-   ]
-  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -108,7 +99,7 @@
     "    longitude_dimension=\"lon\",\n",
     "    velocity_scale=0.01,\n",
     "    max_velocity=20,\n",
-    "    colormap = colormap,\n",
+    "    colormap = linear.viridis,\n",
     "    display_options=display_options,\n",
     ")"
    ]
@@ -121,7 +112,7 @@
    "source": [
     "colormap_control = ipyleaflet.ColormapControl(\n",
     "    caption='Unemployment rate',\n",
-    "    colormap=colormap,\n",
+    "    colormap=wind.colormap,\n",
     "    value_min=wind.min_velocity,\n",
     "    value_max=wind.max_velocity,\n",
     "    position='topright',\n",

ipyleaflet/velocity.py

@@ -38,8 +38,11 @@ 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)
@@ -67,45 +70,16 @@ class Velocity(Layer):
     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)
-    colormap = Any(linear.YlOrRd_04)
-    #color_scale = List([]).tag(sync=True, o=True)
-    colors = [
-        "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)"
-    ]
-    color_scale = List(colors).tag(sync=True, o=True)
+    colormap = Any(linear.OrRd_06)
+    _color_scale = List([]).tag(sync=True, o=True)
 
-    @default('color_scale')
+    @default('_color_scale')
     def _default_color_scale(self):
-        self.color_scale = []
-
-        for color in self.colormap.colors:
-            rgb_tuple = tuple(int(x * 256) for x in color[:3])
-            rgb_str = f"rgb{rgb_tuple}"
-            self.color_scale.append(rgb_str)
-
-        return self.color_scale
-
-    @default('colormap')
-    def _default_colormap(self):
-
+        self._color_scale = []
 
         for color in self.colormap.colors:
             rgb_tuple = tuple(int(x * 256) for x in color[:3])
             rgb_str = f"rgb{rgb_tuple}"
-            self.color_scale.append(rgb_str)
+            self._color_scale.append(rgb_str)
 
-        return self.color_scale
+        return self._color_scale

js/src/layers/Velocity.js

@@ -25,7 +25,7 @@ export class LeafletVelocityModel extends layer.LeafletLayerModel {
       minVelocity: 0,
       maxVelocity: 10,
       velocityScale: 0.005,
-      colorScale: []
+      _colorScale: []
     };
   }
 }
@@ -60,5 +60,13 @@ export class LeafletVelocityView extends layer.LeafletLayerView {
       },
       this
     );
+    this.listenTo(
+      this.model,
+      'change:_colorScale',
+      function () {
+        this.layer_views.update(this.model.get('_colorScale'));
+      },
+      this
+    );
   }
 }