Multi-bench pop-up on unsplit cluster

Addresses #374 almost
openbenches · Oct 28, 2024 · 55f0db2 · 55f0db2
1 parent 62548dd
commit 55f0db2
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 15 deletions.
diff --git a/www/public/css/style.css b/www/public/css/style.css
@@ -623,4 +623,8 @@ td.count {
 
 #counter {
 	font-variant-numeric: tabular-nums;
+}
+
+maplibregl-popup-content {
+	font-size: 1.5em;
 }
diff --git a/www/src/Twig/AppExtension.php b/www/src/Twig/AppExtension.php
@@ -231,7 +231,7 @@ public function map_javascript(
 				type: 'geojson',
 				data: benches_data,
 				cluster: true,
-				clusterMaxZoom: 15, // Max zoom to cluster points on
+				clusterMaxZoom: 17, // Max zoom to cluster points on
 				clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50)
 			});
 		}
@@ -318,16 +318,34 @@ public function map_javascript(
 
 		//	Inspect a cluster on click
 		map.on('click', 'clusters', async (e) => {
-				const features = map.queryRenderedFeatures(e.point, {
-					layers: ['clusters']
-				});
-				const clusterId = features[0].properties.cluster_id;
-				const zoom = await map.getSource('benches').getClusterExpansionZoom(clusterId);
-				map.easeTo({
-					center: features[0].geometry.coordinates,
-					zoom
-				});
+			const features = map.queryRenderedFeatures(e.point, {
+				layers: ['clusters']
 			});
+			const clusterId = features[0].properties.cluster_id;
+			const zoom = await map.getSource('benches').getClusterExpansionZoom(clusterId);
+			console.log("Zoom " + zoom);
+			//	Items in the cluster
+			const leaves = await map.getSource('benches').getClusterLeaves(clusterId, 10, 0);
+			map.easeTo({
+				center: features[0].geometry.coordinates,
+				zoom
+			});
+
+			//	If at a high zoom the cluster hasn't split, the benches may have the exact same co-ordinates.
+			if ( zoom >= 17 ) {
+				//	Generate a pop-up with all the benches' information & links
+				var html = "<h3>Multiple Benches</h3><hr>";
+				leaves.forEach(function(leaf) {
+        			html +=	leaf.properties.popupContent;
+        			html +=	"<br><a href='https://openbenches.org/bench/" +	leaf.id	+ "'>openbenches.org/bench/" + leaf.id + "</a><hr>";
+				});
+
+				new maplibregl.Popup({closeButton: false})
+					.setLngLat( features[0].geometry.coordinates.slice() )
+					.setHTML( html )
+					.addTo(map);
+			}
+		});
 
 		// When a click event occurs on a feature in
 		// the unclustered-point layer, open a popup at
@@ -338,7 +356,7 @@ public function map_javascript(
 		
 			inscription = e.features[0].properties.popupContent;
 			link = e.features[0].id
-			link = "https://openbenches.org/bench/" + link;
+			link = "openbenches.org/bench/" + link;
 
 			// Ensure that if the map is zoomed out such that
 			// multiple copies of the feature are visible, the
@@ -347,10 +365,9 @@ public function map_javascript(
 				coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360;
 			}
 
-			new maplibregl.Popup()
+			new maplibregl.Popup({closeButton: false})
 				.setLngLat(coordinates)
-				.setHTML( inscription + '<br><a href="' + link + '">' + link + '</a>'
-				)
+				.setHTML( inscription + '<br><a href="https://' + link + '">' + link + '</a>')
 				.addTo(map);
 		});
 

diff --git a/www/templates/base.html.twig b/www/templates/base.html.twig
@@ -41,7 +41,7 @@
 		<meta                            property="fb:app_id"                content="{{ app.request.server.get("FACEBOOK_APP_ID") }}">
 
 		<link rel="stylesheet" href="/css/picnic.css?cache=2023-04-09T16:06">
-		<link rel="stylesheet" href="/css/style.css?cache=2024-10-27T08:11">
+		<link rel="stylesheet" href="/css/style.css?cache=2024-10-27T18:11">
 
 		<script src="/js/maplibre-gl-4.7.1/maplibre-gl.js"></script>
 		<link  href="/js/maplibre-gl-4.7.1/maplibre-gl.css" rel="stylesheet" />