implement popup on click

proxy/js/ui.js

@@ -584,8 +584,8 @@ 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', (e) => {
-  const feature = e.features[0];
+map.on('click', 'search', event => {
+  const feature = event.features[0];
   const coordinates = feature.geometry.coordinates.slice();
   const properties = feature.properties;
   const content = `
@@ -609,12 +609,49 @@ map.on('click', 'search', (e) => {
     .addTo(map);
 });
 
-// Change the cursor to a pointer when the mouse is over the places layer.
 map.on('mouseenter', 'search', () => {
   map.getCanvas().style.cursor = 'pointer';
 });
-
-// Change it back to a pointer when it leaves.
 map.on('mouseleave', 'search', () => {
   map.getCanvas().style.cursor = '';
 });
+
+map.on('mousehover', event => {
+  const features = map.queryRenderedFeatures(event.point);
+  if (features.length > 0) {
+    map.getCanvas().style.cursor = 'pointer';
+  } else {
+    map.getCanvas().style.cursor = '';
+  }
+});
+
+map.on('click', event => {
+  const features = map.queryRenderedFeatures(event.point);
+  if (features.length > 0) {
+    const feature = features[0];
+    console.info(event, feature)
+    const coordinates = feature.geometry === 'Point'
+      ? feature.geometry.coordinates
+      : event.lngLat;
+    const properties = feature.properties;
+
+    const content = `
+      <h6>
+        ${properties.icon ? `<span title="${properties.railway}">${properties.icon}</span>` : ''}
+        <a title="View" href="https://www.openstreetmap.org/node/${properties.osm_id}" target="_blank">${properties.label}</a> 
+        <a title="Edit" href="https://www.openstreetmap.org/edit?node=${properties.osm_id}" target="_blank">${icons.edit}</a>
+      </h6>
+      <h6>
+        ${properties.railway_ref ? `<span class="badge badge-pill badge-light">reference: <span class="text-monospace">${properties.railway_ref}</span></span>` : ''} 
+        ${properties.ref ? `<span class="badge badge-pill badge-light">reference: <span class="text-monospace">${properties.ref}</span></span>` : ''} 
+        ${properties.uic_ref ? `<span class="badge badge-pill badge-light">UIC reference: <span class="text-monospace">${properties.uic_ref}</span></span>` : ''}
+        ${properties.position ? `<span class="badge badge-pill badge-light">position: ${properties.position}</span>` : ''}
+        ${properties.operator ? `<span class="badge badge-pill badge-light">operator: ${properties.operator}</span>` : ''}
+      </h6>
+    `;
+    new maplibregl.Popup()
+      .setLngLat(coordinates)
+      .setHTML(content)
+      .addTo(map);
+  }
+});