Add click to show city

src/js/setUpSite.js

@@ -186,15 +186,17 @@ const setMapToCity = (map, cityId, cityProperties) => {
 const setUpCitiesLayer = async (map) => {
   const cities = {};
   const cityBoundariesData = await import("../../data/city-boundaries.geojson");
-  geoJSON(cityBoundariesData, {
+  const test = geoJSON(cityBoundariesData, {
     style() {
       return STYLES.cities;
     },
     onEachFeature(feature, layer) {
       const cityId = feature.properties.id;
       cities[cityId] = { layer, ...scoreCardsData[cityId] };
     },
-  }).addTo(map);
+  });
+
+  test.addTo(map);
 
   // Set up map to update when city selection changes.
   const cityToggleElement = document.getElementById("city-choice");
@@ -203,6 +205,13 @@ const setUpCitiesLayer = async (map) => {
     setMapToCity(map, cityId, cities[cityId]);
   });
 
+  // Set up map to update when user clicks within a city's boundary
+  test.addEventListener("click", (e) => {
+    const cityId = e.sourceTarget.feature.properties.id;
+    cityToggleElement.value = cityId;
+    setMapToCity(map, cityId, cities[cityId]);
+  });
+
   // Load initial city.
   const cityId = cityToggleElement.value;
   setMapToCity(map, cityId, cities[cityId]);