Adding an example of toggling hex layer on/off and moved the fix around

examples/hexbins/advanced.html

@@ -35,6 +35,7 @@
 
 	<h2>Leaflet d3 Hexbin Example</h2>
 	<p>Demonstrates advanced functionality</p>
+	<button onclick="toggleLayer()">Toggle Hexbins Layer</button>
 
 	<!-- The map element -->
 	<div id="map" style="width: 600px; height: 400px; border: 1px solid #ccc"></div>
@@ -66,8 +67,6 @@ <h2>Leaflet d3 Hexbin Example</h2>
 				]
 			}));
 
-		hexLayer.addTo(map);
-
 		// Set up events
 		hexLayer.dispatch()
 			.on('mouseover', function(d, i) {
@@ -95,6 +94,17 @@ <h2>Leaflet d3 Hexbin Example</h2>
 			hexLayer.data(data);
 		}
 
+		var layerVisible = false;
+		function toggleLayer() {
+			if (layerVisible) {
+				map.removeLayer(hexLayer);
+			}
+			else {
+				map.addLayer(hexLayer);
+			}
+			layerVisible = !layerVisible;
+		}
+
 		generateData();
 
 	</script>

package.json

@@ -3,9 +3,9 @@
 	"artifactName": "leaflet-d3",
 	"moduleName": "leafletD3",
 	"description": "Custom d3 layers for leaflet",
-	"version": "4.4.0",
-	"author": "Asymmetrik, Ltd.",
-	"copyright": "Copyright (c) 2007-2019 Asymmetrik Ltd, a Maryland Corporation",
+	"version": "4.4.1",
+	"author": "Asymmetrik, Ltd. a BlueHalo Company",
+	"copyright": "Copyright (c) 2007-2022 Asymmetrik Ltd, a BlueHalo Company",
 	"license": "MIT",
 	"scripts": {
 		"build": "npm run bundle",

src/js/hexbin/HexbinLayer.js

@@ -126,11 +126,6 @@ L.HexbinLayer = L.SVG.extend({
 
 		this._map = null;
 
-		d3.select(this._container).remove();
-
-		// Explicitly will leave the data array alone in case the layer will be shown again
-		//this._data = [];
-
 	},
 
 	/**
@@ -148,9 +143,7 @@ L.HexbinLayer = L.SVG.extend({
 	 * @private
 	 */
 	_destroyContainer: function() {
-
-		// Don't do anything
-
+		d3.select(this._container).remove();
 	},
 
 	/**