Add Map panes

Author: davidbrochart

ipyleaflet/leaflet.py

@@ -80,6 +80,11 @@ def get_value(change):
     return future
 
 
+class PaneException(TraitError):
+    """Custom PaneException class."""
+    pass
+
+
 class LayerException(TraitError):
     """Custom LayerException class."""
     pass
@@ -112,6 +117,8 @@ class Layer(Widget, InteractMixin):
         Custom name for the layer, which will be used by the LayersControl.
     popup: object
         Interactive widget that will be shown in a Popup when clicking on the layer.
+    pane: string
+        Name of the pane to use for the layer.
     """
 
     _view_name = Unicode('LeafletLayerView').tag(sync=True)
@@ -129,6 +136,7 @@ class Layer(Widget, InteractMixin):
     popup_min_width = Int(50).tag(sync=True)
     popup_max_width = Int(300).tag(sync=True)
     popup_max_height = Int(default_value=None, allow_none=True).tag(sync=True)
+    pane = Unicode('').tag(sync=True)
 
     options = List(trait=Unicode()).tag(sync=True)
 
@@ -2181,6 +2189,7 @@ def _default_options(self):
     right = Float(0, read_only=True).tag(sync=True)
     left = Float(9007199254740991, read_only=True).tag(sync=True)
 
+    panes = Dict().tag(sync=True)
     layers = Tuple().tag(trait=Instance(Layer), sync=True, **widget_serialization)
 
     @default('layers')
@@ -2243,6 +2252,19 @@ def observe_attribution_control(self, change):
             if self.attribution_control_instance is not None and self.attribution_control_instance in self.controls:
                 self.remove(self.attribution_control_instance)
 
+    @validate('panes')
+    def _validate_panes(self, proposal):
+        '''Validate panes.
+        '''
+        error_msg = "Panes should look like: {'pane_name': {'zIndex': 650, 'pointerEvents': 'none'}, ...}"
+        for k1, v1 in proposal.value.items():
+            if not isinstance(k1, str) or not isinstance(v1, dict):
+                raise PaneException(error_msg)
+            for k2, v2 in v1.items():
+                if not isinstance(k2, str) or not isinstance(v2, (str, int, float)):
+                    raise PaneException(error_msg)
+        return proposal.value
+
     _layer_ids = List()
 
     @validate('layers')

js/src/Map.js

@@ -73,6 +73,7 @@ export class LeafletMapModel extends widgets.DOMWidgetModel {
       right: 0,
       left: 9007199254740991,
       options: [],
+      panes: {},
       layers: [],
       controls: [],
       crs: {
@@ -165,6 +166,17 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
     this.dirty = false;
   }
 
+  create_panes() {
+    const panes = this.model.get('panes');
+    for (let name in panes) {
+      const pane = this.obj.createPane(name);
+      const styles = panes[name];
+      for (let key in styles) {
+        pane.style[key] = styles[key];
+      }
+    }
+  }
+
   remove_layer_view(child_view) {
     this.obj.removeLayer(child_view.obj);
     child_view.remove();
@@ -229,6 +241,7 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
 
   render_leaflet() {
     this.create_obj().then(() => {
+      this.create_panes();
       this.layer_views.update(this.model.get('layers'));
       this.control_views.update(this.model.get('controls'));
       this.leaflet_events();

js/src/layers/Layer.js

@@ -23,7 +23,8 @@ export class LeafletLayerModel extends widgets.WidgetModel {
       popup: null,
       popup_min_width: 50,
       popup_max_width: 300,
-      popup_max_height: null
+      popup_max_height: null,
+      pane: ''
     };
   }
 }
@@ -58,6 +59,10 @@ export class LeafletLayerView extends utils.LeafletWidgetView {
       this.listenTo(this.model, 'change:popup', function(model, value) {
         this.bind_popup(value);
       });
+      const pane = this.model.get('pane');
+      if (pane !== '') {
+        L.setOptions(this.obj, {pane});
+      }
     });
   }