From acda2ca2d69c219a9c7c66a55b4498bed636fe40 Mon Sep 17 00:00:00 2001
From: Laura Eckman <laura@factual.com>
Date: Thu, 3 Oct 2019 11:40:38 -0700
Subject: [PATCH] make clusters clickable hurricane-response/response-theme#22

---
 _layouts/home.html | 32 +++++++++++++++++++++++++-------
 _layouts/pod.html  | 34 +++++++++++++++++++++++++++-------
 2 files changed, 52 insertions(+), 14 deletions(-)

diff --git a/_layouts/home.html b/_layouts/home.html
index 1988f9c..812588c 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -12,7 +12,7 @@
 	>
 		<div class="wrapper">
 			{% include header.html %}
-			
+
 			<main class="content">
             {% include txtbot.html %}
 			<div class="map-header">
@@ -23,7 +23,7 @@ <h3>Shelter Locations</h3>
     					<div id="map">
     					</div>
                         <div id='geocoder' class='geocoder'></div>
-    
+
 					</div>
 					<div class="map-legend">
     					<h3>Legend</h3>
@@ -50,7 +50,7 @@ <h3>Legend</h3>
 						</div>
 						 Shelter
 						</p>
-						</div>	
+						</div>
 					</div>
                     <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.min.js'></script>
 <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-geocoder/v4.3.0/mapbox-gl-geocoder.css' type='text/css' />
@@ -61,7 +61,7 @@ <h3>Legend</h3>
 
     //TODO: move this to config.
     const MAP_LOAD_CENTER = [{{ site.shelter_map_center }}];
-    const ZOOM = [{{ site.shelter_zoom }}];
+    const INITIAL_ZOOM = [{{ site.shelter_zoom }}];
 
     var map = new mapboxgl.Map({
         // container id specified in the HTML
@@ -70,8 +70,7 @@ <h3>Legend</h3>
         style: 'mapbox://styles/miklb-c4tb/cjnozdzs41qlx2rqvf7mwfztt',
         // initial position in [lon, lat] format
         center: MAP_LOAD_CENTER,
-        // initial zoom
-        zoom: ZOOM
+        zoom: INITIAL_ZOOM
     });
 
 
@@ -128,6 +127,25 @@ <h3>Legend</h3>
             "text-size": 12
         }
     });
+
+    // on mouseover, make it obvious that clusters are interactive
+    map.on('mouseenter', 'clusters', () => {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+    map.on('mouseleave', 'clusters', () => {
+        map.getCanvas().style.cursor = '';
+    });
+
+    map.on('click', 'clusters', e => {
+        const cluster = map.queryRenderedFeatures(e.point, { layers: ['clusters'] })[0];
+        const clusterId = cluster.properties.cluster_id;
+        const center = cluster.geometry.coordinates;
+        map.getSource('shelters').getClusterExpansionZoom(clusterId, (err, zoom) => {
+            err || map.easeTo({ center, zoom });
+        });
+    });
+
+
     map.loadImage("{{site.baseurl}}/assets/images/shelter-icon.png", (error, img) => {
         map.addImage("shelter", img);
         map.addLayer({
@@ -152,7 +170,7 @@ <h3>Legend</h3>
         map.on('mouseenter', 'unclustered-point', function () {
             map.getCanvas().style.cursor = 'pointer';
         });
-        
+
         // Change it back to a pointer when it leaves.
         map.on('mouseleave', 'unclustered-point', function () {
             map.getCanvas().style.cursor = '';
diff --git a/_layouts/pod.html b/_layouts/pod.html
index b843897..256e9d2 100644
--- a/_layouts/pod.html
+++ b/_layouts/pod.html
@@ -12,7 +12,7 @@
 	>
 		<div class="wrapper">
 			{% include header.html %}
-			
+
 			<main class="content">
 			{% include txtbot.html %}
 			<div class="map-header">
@@ -22,7 +22,7 @@ <h3>Points of Distribution and Food Locations</h3>
 					<div id="map-container" class="shelter-map_container">
     					<div id="map">
     					</div>
-    
+
 					</div>
 					<div class="map-legend">
     					<h3>Legend</h3>
@@ -49,14 +49,14 @@ <h3>Legend</h3>
 						</div>
 						 Shelter
 						</p>
-						</div>	
+						</div>
 					</div>
 <script>
     // Load access token from config
     mapboxgl.accessToken = '{{site.mapbox_access_token}}';
 
     const MAP_LOAD_CENTER = [{{ site.pod_map_center }}];
-    const ZOOM = [{{ site.pod_zoom }}];
+    const INITIAL_ZOOM = [{{ site.pod_zoom }}];
 
     var map = new mapboxgl.Map({
         // container id specified in the HTML
@@ -65,8 +65,7 @@ <h3>Legend</h3>
         style: 'mapbox://styles/miklb-c4tb/cjnozdzs41qlx2rqvf7mwfztt',
         // initial position in [lon, lat] format
         center: MAP_LOAD_CENTER,
-        // initial zoom
-        zoom: ZOOM
+        zoom: INITIAL_ZOOM
     });
 map.on('load', function() {
     // Add a new source from our GeoJSON data and set the
@@ -110,6 +109,7 @@ <h3>Legend</h3>
             ]
         }
     });
+
     map.addLayer({
         id: "cluster-count",
         type: "symbol",
@@ -121,6 +121,26 @@ <h3>Legend</h3>
             "text-size": 14
         }
     });
+
+    // on mouseover, make it obvious that clusters are interactive
+    map.on('mouseenter', 'clusters', () => {
+        map.getCanvas().style.cursor = 'pointer';
+    });
+
+    // Change it back to a pointer when it leaves.
+    map.on('mouseleave', 'clusters', () => {
+        map.getCanvas().style.cursor = '';
+    });
+
+    map.on('click', 'clusters', e => {
+        const cluster = map.queryRenderedFeatures(e.point, { layers: ['clusters'] })[0];
+        const clusterId = cluster.properties.cluster_id;
+        const center = cluster.geometry.coordinates;
+        map.getSource('pods').getClusterExpansionZoom(clusterId, (err, zoom) => {
+            err || map.easeTo({ center, zoom });
+        });
+    });
+
     map.loadImage("{{site.baseurl}}/assets/images/shelter-icon.png", (error, img) => {
         map.addImage("shelter", img);
         map.addLayer({
@@ -145,7 +165,7 @@ <h3>Legend</h3>
         map.on('mouseenter', 'unclustered-point', function () {
             map.getCanvas().style.cursor = 'pointer';
         });
-        
+
         // Change it back to a pointer when it leaves.
         map.on('mouseleave', 'unclustered-point', function () {
             map.getCanvas().style.cursor = '';