Improves rendering of Overpass data; add OSM link to Overpass popups (see #467) (#574)

- add some styling to the Overpass data table (alternating row colors; text alignment)
- add link to OSM object below the Overpass data table
- add 4 new entries in `en.json`

css/style.css

@@ -50,10 +50,48 @@ table.dataTable {
     font-size: 1.2rem;
 }
 
-.overpass-tags th {
+.overpass-tags th,
+.overpass-tags td {
+    padding: 0.25em 0.5em;
     vertical-align: top;
 }
 
+.overpass-tags thead {
+    text-transform: uppercase;
+    color: #666;
+}
+
+.overpass-tags thead tr {
+    background-color: #ddd;
+}
+
+.overpass-tags thead th.overpass-label-key {
+    text-align: right;
+}
+
+.overpass-tags tbody tr:nth-child(even) {
+    background-color: #eee;
+}
+
+.overpass-tags tbody tr:last-child {
+    border-bottom: 1px solid #eee;
+}
+
+.overpass-tags tbody th {
+    text-align: right;
+    font-weight: normal;
+}
+
+.overpass-osm-link {
+    margin-top: 0.5rem;
+    text-align: right;
+    font-size: 80%;
+}
+.overpass-osm-link::before {
+    content: '🔎';
+    margin-right: 0.25em;
+}
+
 .overpass-layer-icon .sign > * {
     position: absolute;
     top: -34px;

js/LayersConfig.js

@@ -216,7 +216,7 @@ BR.LayersConfig = L.Class.extend({
                 minZoom: 12,
                 feature: {
                     title: '{{ tags.name }}',
-                    body: '<table class="overpass-tags">{% for k, v in tags %}{% if k[:5] != "addr:" %}<tr><th>{{ k }}</th><td>{% if k matches "/email/" %}<a href="mailto:{{ v }}">{{ v }}</a>{% elseif v matches "/^http/" %}<a href="{{ v }}">{{ v }}</a>{% elseif v matches "/^www/" %}<a href="http://{{ v }}">{{ v }}</a>{% else %}{{ v }}{% endif %}</td></tr>{% endif %}{% endfor %}</table>',
+                    body: this.renderOverpassPopupBody,
                     markerSymbol:
                         '<svg width="25px" height="41px" anchorX="12" anchorY="41" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z" fill="#436978"></path></svg>',
                     markerSign,
@@ -240,6 +240,61 @@ BR.LayersConfig = L.Class.extend({
         );
     },
 
+    renderOverpassPopupBody: function (overpassData) {
+        let output = '';
+
+        output += '<table class="overpass-tags">';
+
+        output += '<thead>';
+        output +=
+            '<tr><th class="overpass-label-key">' +
+            i18next.t('layers.overpass-table-key') +
+            '</th><th class="overpass-label-value">' +
+            i18next.t('layers.overpass-table-value') +
+            '</th></tr>';
+        output += '</thead>';
+
+        output += '<tbody>';
+        for (const key in overpassData.tags) {
+            if (key.substring(0, 5) === 'addr:') {
+                continue;
+            }
+            // `new Option().innerHTML` escapes HTML entities for XSS protection
+            let value = new Option(overpassData.tags[key]).innerHTML;
+            if (key.match(/email/)) {
+                value = '<a href="mailto:' + value + '">' + value + '</a>';
+            }
+            if (value.match(/^https?:\/\//)) {
+                value = '<a href="' + value + '">' + value + '</a>';
+            }
+            if (value.match(/^www/)) {
+                value = '<a href="https://' + value + '">' + value + '</a>';
+            }
+            output += '<tr>';
+            output += '<th>' + key + '</th>';
+            output += '<td>' + value + '</td>';
+            output += '</tr>';
+        }
+        output += '</tbody>';
+
+        output += '</table>';
+
+        output += '<div class="overpass-osm-link">';
+        output +=
+            '<a href="https://www.openstreetmap.org/' +
+            overpassData.type +
+            '/' +
+            overpassData.osm_id +
+            '" target="_blank" title="' +
+            i18next.t('layers.overpass-inspect-at-openstreetmap') +
+            '">';
+        output += i18next.t('layers.overpass-osm');
+        output += '</a>';
+        output += '</div>';
+
+        return output;
+    },
+
     createOpenStreetMapNotesLayer: function () {
         return new leafletOsmNotes();
     },

locales/en.json

@@ -81,6 +81,10 @@
     "customize": "Customize layers",
     "opacity-slider": "Opacity slider",
     "overpass-loading-indicator": "Running Overpass API query ...",
+    "overpass-table-key": "Key",
+    "overpass-table-value": "Value",
+    "overpass-inspect-at-openstreetmap": "Inspect Object at OpenStreetMap",
+    "overpass-osm": "OSM",
     "remove-selection": "Remove selection"
   },
   "loadNogos": {