From e8acb3c8561348a964fb973265c54f453a3d4738 Mon Sep 17 00:00:00 2001
From: Marwin Hochfelsner <50826859+hlfan@users.noreply.github.com>
Date: Wed, 23 Jul 2025 12:40:35 +0200
Subject: [PATCH] Make search show multiple markers

---
 app/assets/javascripts/index/search.js | 48 ++++++++++++++------------
 app/assets/stylesheets/common.scss     | 11 ++++++
 2 files changed, 36 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/index/search.js b/app/assets/javascripts/index/search.js
index 4f5bd8a64..e556b82d3 100644
--- a/app/assets/javascripts/index/search.js
+++ b/app/assets/javascripts/index/search.js
@@ -33,11 +33,10 @@ OSM.Search = function (map) {
 
   $("#sidebar_content")
     .on("click", ".search_more a", clickSearchMore)
-    .on("click", ".search_results_entry a.set_position", clickSearchResult)
-    .on("mouseover", "li.search_results_entry:has(a.set_position)", showSearchResult)
-    .on("mouseout", "li.search_results_entry:has(a.set_position)", hideSearchResult);
+    .on("click", ".search_results_entry a.set_position", clickSearchResult);
 
   const markers = L.layerGroup().addTo(map);
+  let processedResults = 0;
 
   function clickSearchMore(e) {
     e.preventDefault();
@@ -58,30 +57,32 @@ OSM.Search = function (map) {
     })
       .then(response => response.text())
       .then(html => {
-        $target.replaceWith(html);
+        const result = $(html);
+        $target.replaceWith(result);
+        result.filter("ul").children().each(showSearchResult);
       });
   }
 
   function showSearchResult() {
-    let marker = $(this).data("marker");
-
-    if (!marker) {
-      const data = $(this).find("a.set_position").data();
-
-      marker = L.marker([data.lat, data.lon], { icon: OSM.getMarker({}) });
-
-      $(this).data("marker", marker);
-    }
-
+    const index = processedResults++;
+    const listItem = $(this);
+    const inverseGoldenAngle = (Math.sqrt(5) - 1) * 180;
+    const color = `hwb(${(index * inverseGoldenAngle) % 360}deg 5% 5%)`;
+    listItem.css("--marker-color", color);
+    const anchor = $("<a>").attr("href", listItem.find("a.set_position").attr("href"));
+    const data = listItem.find("a.set_position").data();
+    const marker = L.marker([data.lat, data.lon], { icon: OSM.getMarker({ color }) });
+    marker.on("mouseover", () => listItem.addClass("bg-body-secondary"));
+    marker.on("mouseout", () => listItem.removeClass("bg-body-secondary"));
+    marker.on("add", function () {
+      $(this.getElement()).replaceWith(anchor).appendTo(anchor);
+    });
+    marker.on("remove", function () {
+      anchor.remove();
+    });
     markers.addLayer(marker);
-  }
-
-  function hideSearchResult() {
-    const marker = $(this).data("marker");
-
-    if (marker) {
-      markers.removeLayer(marker);
-    }
+    listItem.on("mouseover", () => $(marker.getElement()).addClass("active"));
+    listItem.on("mouseout", () => $(marker.getElement()).removeClass("active"));
   }
 
   function panToSearchResult(data) {
@@ -117,7 +118,7 @@ OSM.Search = function (map) {
   };
 
   page.load = function () {
-    $(".search_results_entry").each(function (index) {
+    $(".search_results_entry[data-href]").each(function (index) {
       const entry = $(this);
       fetchReplace(this.dataset, entry.children().first())
         .then(() => {
@@ -136,6 +137,7 @@ OSM.Search = function (map) {
 
   page.unload = function () {
     markers.clearLayers();
+    processedResults = 0;
   };
 
   return page;
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 85e87e302..fc7c9f91b 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -564,6 +564,17 @@ header .search_forms,
   } 
 }
 
+/* Rules for search results */
+
+.search_results_entry li.list-group-item {
+  border-right: 1em solid var(--marker-color);
+}
+
+.leaflet-marker-icon:is(.active, :hover) > svg {
+  transform: scale(1.5);
+  transform-origin: bottom;
+}
+
 /* Rules for routing */
 
 td.distance {
-- 
2.39.5