Rebase with master and update to include the logics of subitems, namely a colormap subitem attached to the velocity layer.

Author: HaudinFlorence

examples/Velocity_with_colormap.ipynb

@@ -116,12 +116,18 @@
     "    value_min=wind.min_velocity,\n",
     "    value_max=wind.max_velocity,\n",
     "    position='topright',\n",
-    "    transparent_bg=False\n",
+    "    transparent_bg=False,\n",
     ")\n",
     "m.add(wind)\n",
-    "m.add(colormap_control)\n",
     "m"
    ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": []
   }
  ],
  "metadata": {
@@ -140,7 +146,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.13"
+   "version": "3.9.12"
   }
  },
  "nbformat": 4,

ipyleaflet/velocity.py

@@ -4,7 +4,7 @@
 
 from traittypes import Dataset
 from traitlets import Unicode, Bool, Dict, Float, List, Any, default
-from .leaflet import Layer
+from .leaflet import Layer, ColormapControl
 from .xarray_ds import ds_x_to_json
 from branca.colormap import linear
 
@@ -45,35 +45,42 @@ class Velocity(Layer):
 
     """
 
-    _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)
     colormap = Any(linear.OrRd_06)
     color_scale = List([]).tag(sync=True, o=True)
+    caption = Unicode("").tag(sync=True, o=True)
 
-    @default('color_scale')
+    @default("color_scale")
     def _default_color_scale(self):
         self.color_scale = []
 
@@ -83,3 +90,16 @@ def _default_color_scale(self):
             self.color_scale.append(rgb_str)
 
         return self.color_scale
+
+    @default("subitems")
+    def _default_subitems(self):
+        colormap_control = ColormapControl(
+            caption=self.caption,
+            colormap=self.colormap,
+            value_min=self.min_velocity,
+            value_max=self.max_velocity,
+            position="topright",
+            transparent_bg=False,
+        )
+        self.subitems = (colormap_control,)
+        return self.subitems

js/src/layers/Velocity.js

@@ -25,7 +25,8 @@ export class LeafletVelocityModel extends layer.LeafletLayerModel {
       minVelocity: 0,
       maxVelocity: 10,
       velocityScale: 0.005,
-      colorScale: []
+      colorScale: [],
+      caption:''
     };
   }
 }