Add visible attribute to GeoJSON layer

Author: davidbrochart

examples/CountriesGeoJSON.ipynb

@@ -50,7 +50,18 @@
    "execution_count": null,
    "metadata": {},
    "outputs": [],
-   "source": []
+   "source": [
+    "layer.visible = False"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "layer.visible = True"
+   ]
   }
  ],
  "metadata": {
@@ -69,7 +80,7 @@
    "name": "python",
    "nbconvert_exporter": "python",
    "pygments_lexer": "ipython3",
-   "version": "3.9.7"
+   "version": "3.10.5"
   }
  },
  "nbformat": 4,

ipyleaflet/leaflet.py

@@ -1236,6 +1236,7 @@ class GeoJSON(FeatureGroup):
 
     data = Dict().tag(sync=True)
     style = Dict().tag(sync=True)
+    visible = Bool(True).tag(sync=True)
     hover_style = Dict().tag(sync=True)
     point_style = Dict().tag(sync=True)
     style_callback = Any()

js/src/layers/GeoJSON.js

@@ -12,6 +12,7 @@ export class LeafletGeoJSONModel extends featuregroup.LeafletFeatureGroupModel {
       _model_name: 'LeafletGeoJSONModel',
       data: {},
       style: {},
+      visible: true,
       hover_style: {},
       point_style: {}
     };
@@ -82,5 +83,17 @@ export class LeafletGeoJSONView extends featuregroup.LeafletFeatureGroupView {
       },
       this
     );
+    this.listenTo(
+      this.model,
+      'change:visible',
+      function() {
+        if (this.model.get('visible')) {
+          this.obj.addData(this.model.get('data'));
+        } else {
+          this.obj.clearLayers();
+        }
+      },
+      this
+    );
   }
 }