Scorecard updates to city in view or closest to center of map (#143)

Resolves #112

---------

Co-authored-by: tunglinn <tunglin@yahoo.com>

src/js/setUpSite.js

@@ -166,9 +166,11 @@ const generateScorecard = (scoreCardEntry) => {
  * @param cityProperties: An object with a `layout` key (Leaflet value) and keys
  *    representing the score card properties stored in `score-cards.json`.
  */
-const setMapToCity = (map, cityId, cityProperties) => {
+const setMapToCity = (map, cityId, cityProperties, toFitBounds = true) => {
   const { layer } = cityProperties;
-  map.fitBounds(layer.getBounds());
+  if (toFitBounds) {
+    map.fitBounds(layer.getBounds());
+  }
   const scorecard = generateScorecard(cityProperties);
   setUpShareUrlClickListener(cityId);
   const popup = new Popup({
@@ -179,6 +181,27 @@ const setMapToCity = (map, cityId, cityProperties) => {
   layer.bindPopup(popup).openPopup();
 };
 
+const setUpAutoScorecard = (map, cities) => {
+  map.on("moveend", () => {
+    let centralCityDistance = null;
+    let centralCity;
+    Object.entries(cities).forEach((city) => {
+      const [cityName, details] = city;
+      const bounds = details.layer.getBounds();
+
+      if (map.getBounds().intersects(bounds)) {
+        const diff = map.getBounds().getCenter().distanceTo(bounds.getCenter());
+        if (centralCityDistance == null || diff < centralCityDistance) {
+          centralCityDistance = diff;
+          centralCity = cityName;
+        }
+      }
+    });
+    document.getElementById("city-choice").value = centralCity;
+    setMapToCity(map, centralCity, cities[centralCity], false);
+  });
+};
+
 /**
  * Load the cities from GeoJson and set up an event listener to change cities when the user
  * toggles the city selection.
@@ -221,6 +244,7 @@ const setUpCitiesLayer = async (map) => {
   // Load initial city.
   const cityId = cityToggleElement.value;
   setMapToCity(map, cityId, cities[cityId]);
+  setUpAutoScorecard(map, cities);
 };
 
 const setUpParkingLotsLayer = async (map) => {

tests/app/setUpSite.test.js

@@ -155,6 +155,15 @@ test.describe("the share feature", () => {
   });
 });
 
+const dragMap = async (page, distance) => {
+  await page.waitForTimeout(1000);
+  await page.mouse.move(600, 500);
+  await page.mouse.down();
+  await page.mouse.move(600 + distance, 500, { steps: 5 });
+  await page.mouse.up();
+  await page.waitForTimeout(2000);
+};
+
 test.describe("auto-focus city", () => {
   test("clicking on city boundary close view", async ({ page }) => {
     await page.goto("");
@@ -173,13 +182,10 @@ test.describe("auto-focus city", () => {
     // Zoom out.
     await page
       .locator(".leaflet-control-zoom-out")
-      .click({ clickCount: 7, delay: 300 });
+      .click({ clickCount: 6, delay: 300 });
+
     // Drag map to bring Birmingham into view.
-    await page.locator("#atlanta-ga").hover();
-    await page.mouse.move(-300, 0); // Avoid clicking on Atlanta boundary.
-    await page.mouse.down();
-    await page.mouse.move(500, 0);
-    await page.mouse.up();
+    await dragMap(page, 200);
     // Click on Birmingham boundary.
     const city = await page.locator("#birmingham-al");
     await city.click({ force: true });
@@ -216,3 +222,27 @@ test.describe("auto-focus city", () => {
     await expect(scorecard).toEqual("Atlanta, GA");
   });
 });
+
+test("scorecard pulls up city closest to center", async ({ page }) => {
+  await page.goto("");
+
+  // Wait a second to make sure the site is fully loaded.
+  await page.waitForTimeout(1000);
+
+  // Zoom out.
+  await page
+    .locator(".leaflet-control-zoom-out")
+    .click({ clickCount: 6, delay: 300 });
+
+  // Drag map to Birgminham
+  await dragMap(page, 300);
+  const [scoreCardTitle, cityToggleValue] = await page.evaluate(() => {
+    const title = document.querySelector(
+      ".leaflet-popup-content .title"
+    ).textContent;
+    const cityToggle = document.querySelector("#city-choice").value;
+    return [title, cityToggle];
+  });
+  await expect(scoreCardTitle).toEqual("Birmingham, AL");
+  await expect(cityToggleValue).toEqual("birmingham-al");
+});