From ba67eb220c8bb33bc88e75397cb5a683d432fe52 Mon Sep 17 00:00:00 2001
From: Kevin Ford <kevin.ford@logicmonitor.com>
Date: Wed, 16 Sep 2026 10:24:16 -0500
Subject: [PATCH] Clusters now prevent zoom for same location items

---
 src/Better_Map_Widget-Full.html | 33 +++++++++++++++++++++++++--------
 src/Better_Map_Widget.css       |  7 ++++++-
 src/Better_Map_Widget.js        | 26 +++++++++++++++++++-------
 3 files changed, 50 insertions(+), 16 deletions(-)

diff --git a/src/Better_Map_Widget-Full.html b/src/Better_Map_Widget-Full.html
index d15b9f0..3a3c3c8 100644
--- a/src/Better_Map_Widget-Full.html
+++ b/src/Better_Map_Widget-Full.html
@@ -65,10 +65,14 @@
 		registry.pendingDefaults = registry.pendingDefaults || [];
 		var defaults = {};
 
-		defaults.version = "3.70";
+		defaults.version = "3.71";
 		defaults.releaseNotes = `
 			<h2>Release Notes</h2>
 			<p>Latest releases can be found at <a href="https://github.com/logicmonitor/custom_widgets" target="_blank">https://github.com/logicmonitor/custom_widgets</a></p>
+			<h3>Version 3.71</h3>
+			<ul>
+				<li>If all items in a cluster are at the same location then the cluster's popup now displays a message to that fact explaining why the cluster cannot be zoomed in.</li>
+			</ul>
 			<h3>Version 3.70</h3>
 			<ul>
 				<li>The loading indicator now shows geocoding progress (&quot;Geocoding x of y&quot;) when addresses are being resolved, so you can see the map is still working when many new locations need coordinates.</li>
@@ -1225,10 +1229,15 @@ <h3>Version 3.12</h3>
 		transition: background 0.2s;
 	}
 
-	.cluster-zoom-btn:hover {
+	.cluster-zoom-btn:hover:not(:disabled) {
 		background: #1557b0;
 	}
 
+	.cluster-zoom-btn:disabled {
+		background: #9aa0a6;
+		cursor: default;
+	}
+
 	.cluster-stats {
 		display: grid;
 		gap: 8px;
@@ -5662,18 +5671,26 @@ <h3>Version 3.12</h3>
 					clusterBounds.extend(device.position);
 				});
 
-				return `
-					<div class="mapInfoPopupWindow">
-						<div class="cluster-header">
-							<div class="cluster-title">Cluster Summary</div>
-							<button class="cluster-zoom-btn" data-sw-lat="${clusterBounds.getSouthWest().lat()}" data-sw-lng="${clusterBounds.getSouthWest().lng()}" data-ne-lat="${clusterBounds.getNorthEast().lat()}" data-ne-lng="${clusterBounds.getNorthEast().lng()}">
+				// When every clustered item sits on the exact same point the bounds collapse to that point,
+				// so zooming in can never break the cluster apart. Flag it so the popup can disable the zoom
+				// button and call out why the cluster will not split...
+				const allSameLocation = clusterBounds.getSouthWest().equals(clusterBounds.getNorthEast());
+
+				const zoomBtnInner = allSameLocation ? `All have same location` : `
 								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
 									<circle cx="11" cy="11" r="8"/>
 									<line x1="21" y1="21" x2="16.65" y2="16.65"/>
 									<line x1="11" y1="8" x2="11" y2="14"/>
 									<line x1="8" y1="11" x2="14" y2="11"/>
 								</svg>
-								Zoom into Cluster
+								Zoom into Cluster`;
+
+				return `
+					<div class="mapInfoPopupWindow">
+						<div class="cluster-header">
+							<div class="cluster-title">Cluster Summary</div>
+							<button class="cluster-zoom-btn"${allSameLocation ? ' disabled' : ''} data-sw-lat="${clusterBounds.getSouthWest().lat()}" data-sw-lng="${clusterBounds.getSouthWest().lng()}" data-ne-lat="${clusterBounds.getNorthEast().lat()}" data-ne-lng="${clusterBounds.getNorthEast().lng()}">
+								${zoomBtnInner}
 							</button>
 						</div>
 						<div class="cluster-stats">
diff --git a/src/Better_Map_Widget.css b/src/Better_Map_Widget.css
index c6db484..3b168e4 100644
--- a/src/Better_Map_Widget.css
+++ b/src/Better_Map_Widget.css
@@ -824,10 +824,15 @@ body {
 	transition: background 0.2s;
 }
 
-.cluster-zoom-btn:hover {
+.cluster-zoom-btn:hover:not(:disabled) {
 	background: #1557b0;
 }
 
+.cluster-zoom-btn:disabled {
+	background: #9aa0a6;
+	cursor: default;
+}
+
 .cluster-stats {
 	display: grid;
 	gap: 8px;
diff --git a/src/Better_Map_Widget.js b/src/Better_Map_Widget.js
index 2018c2a..a212f49 100644
--- a/src/Better_Map_Widget.js
+++ b/src/Better_Map_Widget.js
@@ -14,10 +14,14 @@
 // * Use hyphen-minus (-) instead of em/en dashes, straight ' and " for quotes, and ... for ellipsis.
 
 // ------------------------------------------------------------
-var version = "3.70 CDN";
+var version = "3.71 CDN";
 var releaseNotes = `
 	<h2>Release Notes</h2>
 	<p>Latest releases can be found at <a href="https://github.com/logicmonitor/custom_widgets" target="_blank">https://github.com/logicmonitor/custom_widgets</a></p>
+	<h3>Version 3.71</h3>
+	<ul>
+		<li>If all items in a cluster are at the same location then the cluster's popup now displays a message to that fact explaining why the cluster cannot be zoomed in.</li>
+	</ul>
 	<h3>Version 3.70</h3>
 	<ul>
 		<li>The loading indicator now shows geocoding progress (&quot;Geocoding x of y&quot;) when addresses are being resolved, so you can see the map is still working when many new locations need coordinates.</li>
@@ -4698,18 +4702,26 @@ var renderer = {
 				clusterBounds.extend(device.position);
 			});
 
-			return `
-				<div class="mapInfoPopupWindow">
-					<div class="cluster-header">
-						<div class="cluster-title">Cluster Summary</div>
-							<button class="cluster-zoom-btn" data-sw-lat="${clusterBounds.getSouthWest().lat()}" data-sw-lng="${clusterBounds.getSouthWest().lng()}" data-ne-lat="${clusterBounds.getNorthEast().lat()}" data-ne-lng="${clusterBounds.getNorthEast().lng()}">
+			// When every clustered item sits on the exact same point the bounds collapse to that point,
+			// so zooming in can never break the cluster apart. Flag it so the popup can disable the zoom
+			// button and call out why the cluster will not split...
+			const allSameLocation = clusterBounds.getSouthWest().equals(clusterBounds.getNorthEast());
+
+			const zoomBtnInner = allSameLocation ? `All have same location` : `
 							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
 								<circle cx="11" cy="11" r="8"/>
 								<line x1="21" y1="21" x2="16.65" y2="16.65"/>
 								<line x1="11" y1="8" x2="11" y2="14"/>
 								<line x1="8" y1="11" x2="14" y2="11"/>
 							</svg>
-							Zoom into Cluster
+							Zoom into Cluster`;
+
+			return `
+				<div class="mapInfoPopupWindow">
+					<div class="cluster-header">
+						<div class="cluster-title">Cluster Summary</div>
+							<button class="cluster-zoom-btn"${allSameLocation ? ' disabled' : ''} data-sw-lat="${clusterBounds.getSouthWest().lat()}" data-sw-lng="${clusterBounds.getSouthWest().lng()}" data-ne-lat="${clusterBounds.getNorthEast().lat()}" data-ne-lng="${clusterBounds.getNorthEast().lng()}">
+							${zoomBtnInner}
 						</button>
 					</div>
 					<div class="cluster-stats">