From 8e7708018def303db2ccc6936b163c21a0143eb8 Mon Sep 17 00:00:00 2001
From: Bob <r-beer.1@onu.edu>
Date: Tue, 27 Jan 2026 17:02:56 -0500
Subject: [PATCH] Add feature to map.html

Now you can click on a quake in the map and it will highlight the quake in the table and vice versa.
---
 docs/gallery/map.html | 46 ++++++++++++++++++++++++++++++++++---------
 1 file changed, 37 insertions(+), 9 deletions(-)

diff --git a/docs/gallery/map.html b/docs/gallery/map.html
index 9123dd74..d539cd90 100644
--- a/docs/gallery/map.html
+++ b/docs/gallery/map.html
@@ -71,7 +71,7 @@ <h5 id="sp-station-quake-map">&lt;sp-station-quake-map&gt;</h5>
             map.removeColorClass("customcolor");
             map.colorClass("quakecolor", "yellow");
 
-            //map.stationRemoveClass(allStations[0], "customcolor");
+            // map.stationRemoveClass(allStations[0], "customcolor");
           });
         });
 
@@ -79,12 +79,12 @@ <h5 id="sp-station-quake-map">&lt;sp-station-quake-map&gt;</h5>
         const infoList = document.querySelectorAll("sp-quake-table");
         infoList.forEach((it) => {
           it.quakeList = ds.catalog;
-          it.addStyle(`
-            table tbody tr.${SELECTED_ROW} td {
-              background-color: green;
-              color: white;
-            }
-          `);
+          // it.addStyle(`
+          //   table tbody tr.${SELECTED_ROW} td {
+          //     background-color: green;
+          //     color: white;
+          //   }
+          // `);
           it.addEventListener("quakeclick", (ce) => {
             mapList.forEach((map) => {
               map.quakeList.forEach((q) => {
@@ -98,13 +98,41 @@ <h5 id="sp-station-quake-map">&lt;sp-station-quake-map&gt;</h5>
               let allRows = quakeRow.parentNode.querySelectorAll(`tbody tr`);
               console.log(`num rows: ${Array.from(allRows).length}`);
               allRows.forEach((r) => {
-                console.log(`${r.classList.contains(SELECTED_ROW)}`);
-                r.classList.remove(SELECTED_ROW);
+                if (r.classList.contains(SELECTED_ROW)) {
+                  console.log(`${r.classList.contains(SELECTED_ROW)}`);
+                  r.removeAttribute("style");
+                  r.classList.remove(SELECTED_ROW);
+                }
               });
               quakeRow.classList.add(SELECTED_ROW);
+              quakeRow.setAttribute("style", "background-color: green");
               //ce.detail.mouseevent.currentTarget.setAttribute("style", "background-color: green");
             });
           });
+          // Click on a quake map circle
+          mapList.forEach((map) => {
+            map.addEventListener("quakeclick", (me) => {
+              map.quakeList.forEach((q) => {
+                map.removeColorClass(sp.leafletutil.cssClassForQuake(q));
+                map.colorClass(
+                  sp.leafletutil.cssClassForQuake(me.detail.quake),
+                  "green",
+                );
+              });
+              // console.log(`mEvent: ${me.detail.quake}`);
+              const SELECTED_ROW = "SelectedRow";
+              let quakeRow = it.findRowForQuake(me.detail.quake);
+              let allRows = quakeRow.parentNode.querySelectorAll(`tbody tr`);
+              allRows.forEach((r) => {
+                if (r.classList.contains(SELECTED_ROW)) {
+                  r.removeAttribute("style");
+                  r.classList.remove(SELECTED_ROW);
+                }
+              });
+              quakeRow.classList.add(SELECTED_ROW);
+              quakeRow.setAttribute("style", "background-color: green");
+            });
+          });
         });
         console.log(
           `${ds.catalog.length}  ${Array.from(sp.stationxml.allStations(ds.inventory)).length}`,