From a116b23f69964d1abfef968d6130147e2572a260 Mon Sep 17 00:00:00 2001
From: gjmooney <gjmooney@asu.edu>
Date: Tue, 5 Dec 2023 17:35:08 +0100
Subject: [PATCH] Add visibility to MarkerCluster

---
 ipyleaflet/leaflet.py          |  2 ++
 js/src/jupyter-leaflet.css     |  4 +++
 js/src/layers/MarkerCluster.js | 49 +++++++++++++++++++++++++++++++++-
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/ipyleaflet/leaflet.py b/ipyleaflet/leaflet.py
index e5a430411..c465346ff 100644
--- a/ipyleaflet/leaflet.py
+++ b/ipyleaflet/leaflet.py
@@ -1226,6 +1226,8 @@ class MarkerCluster(Layer):
     _model_name = Unicode('LeafletMarkerClusterModel').tag(sync=True)
 
     markers = Tuple().tag(trait=Instance(Layer), sync=True, **widget_serialization)
+    visible = Bool(True).tag(sync=True)
+
     # Options
     disable_clustering_at_zoom = Int(18).tag(sync=True, o=True)
     max_cluster_radius = Int(80).tag(sync=True, o=True)
diff --git a/js/src/jupyter-leaflet.css b/js/src/jupyter-leaflet.css
index ae0e744f4..615b46fc0 100644
--- a/js/src/jupyter-leaflet.css
+++ b/js/src/jupyter-leaflet.css
@@ -181,3 +181,7 @@ applied to the map container */
   border-radius: 50%;
   -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
+
+.test-icon {
+  opacity: 1;
+}
diff --git a/js/src/layers/MarkerCluster.js b/js/src/layers/MarkerCluster.js
index b9815cce1..54194d99d 100644
--- a/js/src/layers/MarkerCluster.js
+++ b/js/src/layers/MarkerCluster.js
@@ -34,6 +34,30 @@ export class LeafletMarkerClusterView extends layer.LeafletLayerView {
       },
       this
     );
+    this.listenTo(
+      this.model,
+      'change:opacity',
+      function () {
+        if (this.model.get('visible')) {
+          document.querySelector('.test-icon').style.opacity =
+            this.model.get('opacity');
+        }
+      },
+      this
+    );
+    this.listenTo(
+      this.model,
+      'change:visible',
+      function () {
+        if (this.model.get('visible')) {
+          document.querySelector('.test-icon').style.opacity =
+            this.model.get('opacity');
+        } else {
+          document.querySelector('.test-icon').style.opacity = 0;
+        }
+      },
+      this
+    );
   }
 
   remove_layer_view(child_view) {
@@ -52,12 +76,35 @@ export class LeafletMarkerClusterView extends layer.LeafletLayerView {
 
   create_obj() {
     var options = this.get_options();
-    this.obj = L.markerClusterGroup(options);
+    this.obj = L.markerClusterGroup({
+      disableClusteringAtZoom: options['disableClusteringAtZoom'],
+      maxClusterRadius: options['maxClusterRadius'],
+      iconCreateFunction: function (cluster) {
+        var childCount = cluster.getChildCount();
+
+        var c = ' marker-cluster-';
+        if (childCount < 10) {
+          c += 'small';
+        } else if (childCount < 100) {
+          c += 'medium';
+        } else {
+          c += 'large';
+        }
+
+        return new L.DivIcon({
+          html: '<div><span>' + childCount + '</span></div>',
+          className: 'test-icon marker-cluster' + c,
+          iconSize: new L.Point(40, 40),
+        });
+      },
+    });
+
     this.marker_views = new widgets.ViewList(
       this.add_layer_model,
       this.remove_layer_view,
       this
     );
+
     this.marker_views.update(this.model.get('markers'));
   }
 }