From ef30ceed211603a98fcdc5d72784c5c4447daea0 Mon Sep 17 00:00:00 2001 From: Hidde Wieringa Date: Sat, 27 Jul 2024 12:27:11 +0200 Subject: [PATCH] show icons in search results and popup --- proxy/js/ui.js | 55 +++++++++++++++++++++++++++++++++----------------- 1 file changed, 36 insertions(+), 19 deletions(-) diff --git a/proxy/js/ui.js b/proxy/js/ui.js index 9ea803a4..b658d84a 100644 --- a/proxy/js/ui.js +++ b/proxy/js/ui.js @@ -13,6 +13,24 @@ const backgroundRasterUrlControl = document.getElementById('backgroundRasterUrl' const legend = document.getElementById('legend') const legendMapContainer = document.getElementById('legend-map') +const icons = { + railway: { + station: '', + halt: '', + tram_stop: '', + service_station: '', + yard: '', + junction: '', + spur_junction: '', + crossover: '', + site: '', + milestone: '', + level_crossing: '', + crossing: '', + }, + edit: '', +} + function registerLastSearchResults(results) { const data = { type: 'FeatureCollection', @@ -51,9 +69,14 @@ function searchForFacilities(type, term) { const queryString = facilitySearchQuery(type, term) fetch(`${location.origin}/api/facility?${queryString}`) .then(result => result.json()) + .then(result => result.map(item => ({ + ...item, + label: item.name, + icon: icons.railway[item.railway] ?? null, + }))) .then(result => { console.info('facility search result', result) - showSearchResults(result, item => item.name) + showSearchResults(result) }) .catch(error => { hideSearchResults(); @@ -69,9 +92,14 @@ function searchForMilestones(ref, position) { } else { fetch(`${location.origin}/api/milestone?ref=${encodeURIComponent(ref)}&position=${encodeURIComponent(position)}`) .then(result => result.json()) + .then(result => result.map(item => ({ + ...item, + label: `Line ${item.ref} @ ${item.position}`, + icon: icons.railway[item.railway] ?? null, + }))) .then(result => { console.info('milestone search result', result) - showSearchResults(result, item => `Ref: ${item.ref}, KM: ${item.position}`) + showSearchResults(result) }) .catch(error => { hideSearchResults(); @@ -81,7 +109,7 @@ function searchForMilestones(ref, position) { } } -function showSearchResults(results, renderItem) { +function showSearchResults(results) { registerLastSearchResults(results); const bounds = results.length > 0 @@ -113,7 +141,8 @@ function showSearchResults(results, renderItem) {
${results.map(result => ` - ${renderItem(result)} + ${result.icon ? `${result.icon}` : ''} + ${result.label} ` ).join('')}
@@ -559,23 +588,11 @@ map.on('click', 'search', (e) => { const feature = e.features[0]; const coordinates = feature.geometry.coordinates.slice(); const properties = feature.properties; - const icon = properties.railway ? { - station: '(s)', - halt: '(h)', - tram_stop: '(t)', - service_station: '(ss)', - yard: '(y)', - junction: '(j)', - spur_junction: '', - crossover: '', - site: '', - }[properties.railway] : null; - const editIcon = ''; const content = `
- ${icon ? `${icon}` : ''} - ${properties.name} - ${editIcon} + ${properties.icon ? `${properties.icon}` : ''} + ${properties.label} + ${icons.edit}
${properties.railway_ref ? `reference: ${properties.railway_ref}` : ''}