diff --git a/proxy/js/ui.js b/proxy/js/ui.js index 8e338198..a8efc23f 100644 --- a/proxy/js/ui.js +++ b/proxy/js/ui.js @@ -579,20 +579,12 @@ const onStylesheetChange = styleSheet => { onMapZoom(map.getZoom()); } -map.on('load', () => onMapZoom(map.getZoom())); -map.on('zoomend', () => onMapZoom(map.getZoom())); - -// When a click event occurs on a feature in the places layer, open a popup at the -// location of the feature, with description HTML from its properties. -map.on('click', 'search', event => { - const feature = event.features[0]; - const coordinates = feature.geometry.coordinates.slice(); - const properties = feature.properties; - const content = ` +function popupContent(properties) { + return `
${properties.icon ? `${properties.icon}` : ''} - ${properties.label} - ${icons.edit} + ${properties.label ? `${properties.osm_id ? `` : ''}${properties.label}${properties.osm_id ? `` : ''}` : ''} + ${properties.osm_id ? `${icons.edit}` : ''}
${properties.railway_ref ? `reference: ${properties.railway_ref}` : ''} @@ -602,19 +594,10 @@ map.on('click', 'search', event => { ${properties.operator ? `operator: ${properties.operator}` : ''}
`; +} - new maplibregl.Popup() - .setLngLat(coordinates) - .setHTML(content) - .addTo(map); -}); - -map.on('mouseenter', 'search', () => { - map.getCanvas().style.cursor = 'pointer'; -}); -map.on('mouseleave', 'search', () => { - map.getCanvas().style.cursor = ''; -}); +map.on('load', () => onMapZoom(map.getZoom())); +map.on('zoomend', () => onMapZoom(map.getZoom())); map.on('mousehover', event => { const features = map.queryRenderedFeatures(event.point); @@ -667,26 +650,10 @@ map.on('click', event => { : feature.geometry.type === 'LineString' ? closestPointOnLine(event.lngLat, feature.geometry.coordinates) : event.lngLat; - const properties = feature.properties; - - const content = ` -
- ${properties.icon ? `${properties.icon}` : ''} - ${properties.label} - ${icons.edit} -
-
- ${properties.railway_ref ? `reference: ${properties.railway_ref}` : ''} - ${properties.ref ? `reference: ${properties.ref}` : ''} - ${properties.uic_ref ? `UIC reference: ${properties.uic_ref}` : ''} - ${properties.position ? `position: ${properties.position}` : ''} - ${properties.operator ? `operator: ${properties.operator}` : ''} -
- `; new maplibregl.Popup() .setLngLat(coordinates) - .setHTML(content) + .setHTML(popupContent(feature.properties)) .addTo(map); } });