Show search results on map (#75)

![image](https://github.com/user-attachments/assets/f7e6ec35-ae4f-4a2c-a546-a02387222a8c)

Author: hiddewie

proxy/css/ui.css

@@ -27,9 +27,6 @@ body {
 #search-results, #search-milestones-form {
   display: none;
 }
-#search-results .no-results {
-  text-align: center;
-}
 
 #legend {
   position: absolute;

proxy/index.html

@@ -92,7 +92,7 @@ <h5 class="modal-title">Search</h5>
               </div>
             </div>
         </form>
-        <div class="list-group" id="search-results"></div>
+        <div id="search-results"></div>
       </div>
     </div>
   </div>

proxy/js/styles.mjs

@@ -889,6 +889,13 @@ const sources = {
     tileSize: 256,
     attribution: '<a href="https://www.openstreetmap.org/about" target="_blank">&copy; OpenStreetMap contributors</a>'
   },
+  search: {
+    type: 'geojson',
+    data: {
+      type: 'FeatureCollection',
+      features: [],
+    },
+  },
   openrailwaymap_low: {
     type: 'vector',
     url: `${origin}/railway_line_low`,
@@ -954,6 +961,18 @@ const backgroundMap = {
   }
 };
 
+const searchResults = {
+  id: 'search',
+  type: 'circle',
+  source: 'search',
+  paint: {
+    'circle-radius': 8,
+    'circle-color': 'rgba(183, 255, 0, 0.7)',
+    'circle-stroke-width': 2,
+    'circle-stroke-color': 'black',
+  }
+};
+
 // TODO remove all [switch, [zoom]] to ensure legend displays only visible features
 const layers = {
   standard: [
@@ -1838,6 +1857,7 @@ const layers = {
         'text-padding': 10,
       },
     },
+    searchResults,
   ],
 
   speed: [
@@ -2011,6 +2031,7 @@ const layers = {
         'symbol-spacing': 100,
       },
     },
+    searchResults,
   ],
 
   signals: [
@@ -2303,6 +2324,7 @@ const layers = {
         ],
       }
     },
+    searchResults,
   ],
 
   electrification: [
@@ -2562,6 +2584,7 @@ const layers = {
         'symbol-spacing': 100,
       },
     },
+    searchResults,
   ],
 
   gauge: [
@@ -2839,6 +2862,7 @@ const layers = {
         'symbol-spacing': 100,
       },
     },
+    searchResults,
   ],
 };
 

proxy/js/ui.js

@@ -13,6 +13,20 @@ const backgroundRasterUrlControl = document.getElementById('backgroundRasterUrl'
 const legend = document.getElementById('legend')
 const legendMapContainer = document.getElementById('legend-map')
 
+function registerLastSearchResults(results) {
+  const data = {
+    type: 'FeatureCollection',
+    features: results.map(result => ({
+      type: 'Feature',
+      geometry: {
+        type: 'Point',
+        coordinates: [result.latitude, result.longitude],
+      },
+    })),
+  };
+  map.getSource('search').setData(data);
+}
+
 function facilitySearchQuery(type, term) {
   const encoded = encodeURIComponent(term)
 
@@ -67,20 +81,48 @@ function searchForMilestones(ref, position) {
 }
 
 function showSearchResults(results, renderItem) {
-  let content = '';
-  if (results.length === 0) {
-    content += `<div class="list-group-item no-results"><i>No results</i></div>`
-  } else {
-    results.forEach(result => {
-      content += `<a class="list-group-item list-group-item-action" href="javascript:hideSearchResults(); map.easeTo({center: [${result.latitude}, ${result.longitude}], zoom: 15}); hideSearch()">${renderItem(result)}</a>`
-    })
-  }
-  searchResults.innerHTML = content;
+  registerLastSearchResults(results);
+
+  const bounds = results.length > 0
+    ? JSON.stringify(results.reduce(
+      (bounds, result) =>
+        bounds.extend({lat: result.longitude, lon: result.latitude}),
+      new maplibregl.LngLatBounds({lat: results[0].longitude, lon: results[0].latitude})
+    ).toArray())
+    : null;
+
+  searchResults.innerHTML = results.length === 0
+    ? `
+      <div class="mb-1 d-flex align-items-center">
+        <span class="flex-grow-1">
+          <span class="badge badge-light">0 results</span>
+        </span>
+      </div>
+    `
+    : `
+      <div class="mb-1 d-flex align-items-center">
+        <span class="flex-grow-1">
+          <span class="badge badge-light">${results.length} results</span>
+        </span>
+        <button class="btn btn-sm btn-primary" type="button" style="vertical-align: text-bottom" onclick="viewSearchResultsOnMap(${bounds})">
+          <svg width="auto" height="16" viewBox="-4 0 36 36" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><path d="M14 0c7.732 0 14 5.641 14 12.6C28 23.963 14 36 14 36S0 24.064 0 12.6C0 5.641 6.268 0 14 0Z" fill="white"/><circle fill="var(--primary)" fill-rule="nonzero" cx="14" cy="14" r="7"/></g></svg>
+          Show on map
+        </button>
+      </div>
+      <div class="list-group">
+        ${results.map(result =>
+          `<a class="list-group-item list-group-item-action" href="javascript:hideSearchResults(); map.easeTo({center: [${result.latitude}, ${result.longitude}], zoom: 15}); hideSearch()">
+            ${renderItem(result)}
+          </a>`
+        ).join('')}
+      </div>
+    `;
   searchResults.style.display = 'block';
 }
 
 function hideSearchResults() {
   searchResults.style.display = 'none';
+  registerLastSearchResults([]);
 }
 
 function showSearch() {
@@ -118,6 +160,13 @@ function searchMilestones() {
   hideSearchResults();
 }
 
+function viewSearchResultsOnMap(bounds) {
+  hideSearch();
+  map.fitBounds(bounds, {
+    padding: 40,
+  });
+}
+
 function showConfiguration() {
   backgroundSaturationControl.value = configuration.backgroundSaturation ?? defaultConfiguration.backgroundSaturation;
   backgroundOpacityControl.value = configuration.backgroundOpacity ?? defaultConfiguration.backgroundOpacity;