Make Layer.pane and Map.panes reactive, add notebook example

Author: davidbrochart

examples/MapPanes.ipynb

@@ -0,0 +1,107 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "cbcccab4-2d48-4ed2-9a01-3aebef7a3f2e",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "import os\n",
+    "import json\n",
+    "import requests\n",
+    "from ipyleaflet import Map, GeoJSON, Heatmap"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "d6a05f27-4740-4561-9164-fbf7cdd627a3",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "if not os.path.exists('europe_110.geo.json'):\n",
+    "    url = 'https://github.com/jupyter-widgets/ipyleaflet/raw/master/examples/europe_110.geo.json'\n",
+    "    r = requests.get(url)\n",
+    "    with open('europe_110.geo.json', 'w') as f:\n",
+    "        f.write(r.content.decode(\"utf-8\"))\n",
+    "\n",
+    "with open('europe_110.geo.json', 'r') as f:\n",
+    "    data = json.load(f)\n",
+    "\n",
+    "data['features'] = [data['features'][0]] # Trim to one country so printing layers is readable\n",
+    "\n",
+    "m = Map(center=(40.9964, 19.9851), zoom=6, panes={\"heatmap_down\": {\"zIndex\": 350}, \"heatmap_top\": {\"zIndex\": 650}})\n",
+    "\n",
+    "geo_json = GeoJSON(\n",
+    "    data=data,\n",
+    "    style={\n",
+    "        'opacity': 1, 'dashArray': '9', 'fillOpacity': 0.9, 'weight': 1, 'fillColor': 'white',\n",
+    "    },\n",
+    ")\n",
+    "\n",
+    "heatmap = Heatmap(\n",
+    "    locations=[[41.327,19.819],[40.73,19.562]],\n",
+    "    radius=5,\n",
+    "    blur=1,\n",
+    "    min_opacity=1,\n",
+    ")\n",
+    "\n",
+    "m.add_layer(heatmap)\n",
+    "\n",
+    "m.add_layer(geo_json)"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "7ae14f1e-203a-4622-8d6f-7f112d28c63c",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "m"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "4ce8c2df-156c-40d0-9123-b1e905c13b03",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "heatmap.pane = \"heatmap_top\""
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "id": "bb558261-3bdf-45d9-964a-52314fdf87cb",
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "heatmap.pane = \"heatmap_down\""
+   ]
+  }
+ ],
+ "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.10.5"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 5
+}

js/src/Map.js

@@ -168,10 +168,10 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
 
   create_panes() {
     const panes = this.model.get('panes');
-    for (let name in panes) {
+    for (const name in panes) {
       const pane = this.obj.createPane(name);
       const styles = panes[name];
-      for (let key in styles) {
+      for (const key in styles) {
         pane.style[key] = styles[key];
       }
     }
@@ -222,7 +222,7 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
     this.el.classList.add('jupyter-widgets');
     this.el.classList.add('leaflet-widgets');
     this.map_container = document.createElement('div');
-    this.el.appendChild(this.map_container);
+    this.map_child = this.el.appendChild(this.map_container);
     if (this.get_options().interpolation == 'nearest') {
       this.map_container.classList.add('crisp-image');
     }
@@ -266,6 +266,11 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
     });
   }
 
+  rerender() {
+    this.el.removeChild(this.map_child);
+    this.render();
+  }
+
   leaflet_events() {
     this.obj.on('moveend', e => {
       if (!this.dirty) {
@@ -330,6 +335,12 @@ export class LeafletMapView extends utils.LeafletDOMWidgetView {
       );
     }
     this.listenTo(this.model, 'msg:custom', this.handle_msg, this);
+    this.listenTo(
+      this.model,
+      'change:panes',
+      this.rerender,
+      this
+    );
     this.listenTo(
       this.model,
       'change:layers',

js/src/layers/Layer.js

@@ -59,13 +59,17 @@ 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});
-      }
+      this.update_pane();
     });
   }
 
+  update_pane() {
+    const pane = this.model.get('pane');
+    if (pane !== '') {
+      L.setOptions(this.obj, {pane});
+    }
+  }
+
   leaflet_events() {
     // If the layer is interactive
     if (this.obj.on) {
@@ -116,6 +120,15 @@ export class LeafletLayerView extends utils.LeafletWidgetView {
       this.update_popup,
       this
     );
+    this.listenTo(
+      this.model,
+      'change:pane',
+      function() {
+        this.update_pane(),
+        this.map_view.rerender();
+      },
+      this
+    );
   }
 
   remove() {