Merge pull request #389 from nrenner/polish-overpass

Polish POI layer

config.template.js

@@ -127,4 +127,6 @@
 
     // regex needs to be in sync with server, see ServerHandler.getTrackName()
     BR.conf.tracknameAllowedChars = 'a-zA-Z0-9 \\._\\-';
+
+    BR.conf.overpassBaseUrl = 'https://overpass.kumi.systems/api/interpreter';
 })();

index.html

@@ -171,7 +171,11 @@
                             <dd data-i18n="[html]credits.boundaries">
                                 Administrative Boundaries:
                                 <a href="https://osm-boundaries.com" target="_blank">OSM-Boundaries</a>,
-                                <a href="https://overpass-api.de/" target="_blank">Overpass API</a>
+                                <a href="https://overpass-api.de/" class="overpass-url" target="_blank">Overpass API</a>
+                            </dd>
+                            <dd data-i18n="[html]credits.pois">
+                                Locations (POIs):
+                                <a href="https://overpass-api.de/" class="overpass-url" target="_blank">Overpass API</a>
                             </dd>
                             <dt data-i18n="credits.elevation-data">Elevation data</dt>
                             <dd>

js/LayersConfig.js

@@ -1,7 +1,5 @@
 BR.LayersConfig = L.Class.extend({
-    overpassFrontend: new OverpassFrontend(
+    overpassFrontend: new OverpassFrontend(BR.conf.overpassBaseUrl || '//overpass-api.de/api/interpreter'),
-        (BR.conf.overpassBaseUrl || '//overpass-api.de/api/interpreter').replace('?data=', '')
-    ),
     defaultBaseLayers: BR.confLayers.defaultBaseLayers,
     defaultOverlays: BR.confLayers.defaultOverlays,
     legacyNameToIdMap: BR.confLayers.legacyNameToIdMap,
@@ -176,7 +174,7 @@ BR.LayersConfig = L.Class.extend({
 
     _showOverpassLoadingIndicator: function () {
         this._overpassActiveRequestCount++;
-        this._overpassLoadingIndicator.showInfo(i18next.t('layers.overpass-loading-indicator'));
+        this._overpassLoadingIndicator.showLoading(i18next.t('layers.overpass-loading-indicator'));
     },
 
     _hideOverpassLoadingIndicator: function () {
@@ -196,6 +194,9 @@ BR.LayersConfig = L.Class.extend({
                     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>',
                     markerSymbol: null,
+                    style: function (overpassObject) {
+                        return this.defaultBaseLayers?.[0] === 'cyclosm' ? { color: 'darkorange' } : {};
+                    }.bind(this),
                 },
             }),
             {

js/Map.js

@@ -56,6 +56,10 @@ BR.Map = {
 
         $('#credits').on('show.bs.modal', function (event) {
             BR.Map._renderLayerCredits(layersControl._layers);
+            const overpassUrl = new URL(BR.conf.overpassBaseUrl || 'https://overpass-api.de').origin;
+            for (const link of document.getElementsByClassName('overpass-url')) {
+                link.href = overpassUrl;
+            }
         });
 
         new L.Control.PermalinkAttribution().addTo(map);

js/control/Message.js

@@ -24,6 +24,10 @@ BR.Message = L.Class.extend({
                 iconClass = 'fa-exclamation-triangle';
                 alertClass = 'alert-warning';
                 break;
+            case 'loading':
+                iconClass = 'fa-spinner fa-pulse';
+                alertClass = 'alert-secondary';
+                break;
             default:
             case 'info':
                 iconClass = 'fa-info-circle';
@@ -83,6 +87,10 @@ BR.Message = L.Class.extend({
     showInfo: function (msg) {
         this._show(msg, 'info');
     },
+
+    showLoading: function (msg) {
+        this._show(msg, 'loading');
+    },
 });
 
 // static instance as global control

js/plugin/CircleGoArea.js

@@ -11,7 +11,7 @@ BR.CircleGoArea = L.Control.extend({
     options: {
         countriesUrl: BR.conf.countriesUrl || 'dist/boundaries/countries.topo.json',
         statesUrl: BR.conf.statesUrl || 'dist/boundaries/germany-states.topo.json',
-        overpassBaseUrl: BR.conf.overpassBaseUrl || 'https://overpass-api.de/api/interpreter?data=',
+        overpassDataUrl: (BR.conf.overpassBaseUrl || 'https://overpass-api.de/api/interpreter') + '?data=',
         shortcut: {
             draw: {
                 enable: 73, // char code for 'i'
@@ -137,7 +137,7 @@ BR.CircleGoArea = L.Control.extend({
             query += '(area.a[admin_level="' + adminLevelFallback + '"];)->.p; relation(pivot.p); out geom;';
         }
 
-        var url = this.options.overpassBaseUrl + encodeURIComponent(query);
+        var url = this.options.overpassDataUrl + encodeURIComponent(query);
 
         this.marker.setIcon(this.iconSpinner);
         BR.Util.getJson(

js/plugin/leaflet-fullHash.js

@@ -129,6 +129,11 @@
                     L.bind(function (obj, index, array) {
                         if (obj) {
                             layersControl.activateLayer(obj);
+                            if (obj.layer instanceof OverpassLayer) {
+                                // hack to select overlay (mark checked) in the layers control
+                                // (OverpassLayer._layerAdd does not fire 'add' event)
+                                layersControl._update();
+                            }
                             if (obj && !obj.overlay) {
                                 added = true;
                             }

locales/en.json

@@ -15,7 +15,7 @@
     "tooltip": "Show more information about BRouter-Web"
   },
   "credits": {
-    "boundaries": "Administrative Boundaries: <a href=\"https://osm-boundaries.com\" target=\"_blank\">OSM-Boundaries</a>, <a href=\"https://overpass-api.de/\" target=\"_blank\">Overpass API</a>",
+    "boundaries": "Administrative Boundaries: <a href=\"https://osm-boundaries.com\" target=\"_blank\">OSM-Boundaries</a>, <a href=\"https://overpass-api.de/\" class=\"overpass-url\" target=\"_blank\">Overpass API</a>",
     "brouter": "BRouter",
     "brouter-license": "<a target=\"_blank\" href=\"https://brouter.de/brouter\">BRouter</a> &copy; Arndt Brenschede",
     "elevation-data": "Elevation data",
@@ -25,6 +25,7 @@
     "map-tiles": "Map tiles",
     "nominatim": "Search by <a href=\"https://wiki.openstreetmap.org/wiki/Nominatim\" target=\"_blank\" data-i18n=\"credits.nominatim\">Nominatim</a>",
     "openstreetmap": "&copy; <a target=\"_blank\" href=\"https://www.openstreetmap.org/copyright\" >OpenStreetMap contributors</a> under <a target=\"_blank\" href=\"https://opendatacommons.org/licenses/odbl/\" >ODbL</a>",
+    "pois": "Locations (POIs): <a href=\"https://overpass-api.de/\" class=\"overpass-url\" target=\"_blank\">Overpass API</a>",
     "title": "Credits"
   },
   "export": {
@@ -236,6 +237,7 @@
         "europe": "Europe",
         "europe-monolingual": "Europe monolingual",
         "overlays": "Overlays",
+        "overpass": "Locations (POIs)",
         "worldwide": "Worldwide",
         "worldwide-international": "Worldwide international",
         "worldwide-monolingual": "Worldwide monolingual"

locales/keys.js

@@ -61,4 +61,5 @@ i18next.t('sidebar.layers.category.overlays', 'Overlays');
 i18next.t('sidebar.layers.category.worldwide', 'Worldwide');
 i18next.t('sidebar.layers.category.worldwide-international', 'Worldwide international');
 i18next.t('sidebar.layers.category.worldwide-monolingual', 'Worldwide monolingual');
+i18next.t('sidebar.layers.category.overpass', 'Locations (POIs)');
 i18next.t('sidebar.layers.tooltip');