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`

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();
     },