diff --git a/css/style.css b/css/style.css
index 4614093..367b101 100644
--- a/css/style.css
+++ b/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;
diff --git a/js/LayersConfig.js b/js/LayersConfig.js
index 4eb6a20..142bfe5 100644
--- a/js/LayersConfig.js
+++ b/js/LayersConfig.js
@@ -216,7 +216,7 @@ BR.LayersConfig = L.Class.extend({
minZoom: 12,
feature: {
title: '{{ tags.name }}',
- body: '
',
+ body: this.renderOverpassPopupBody,
markerSymbol:
'',
markerSign,
@@ -240,6 +240,61 @@ BR.LayersConfig = L.Class.extend({
);
},
+ renderOverpassPopupBody: function (overpassData) {
+ let output = '';
+
+ output += '';
+
+ output += '';
+
+ return output;
+ },
+
createOpenStreetMapNotesLayer: function () {
return new leafletOsmNotes();
},
diff --git a/locales/en.json b/locales/en.json
index c0e8ed4..91f728d 100644
--- a/locales/en.json
+++ b/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": {