Add loading indicator

css/style.css

@@ -224,11 +224,14 @@ input#trackname:focus:invalid {
     /* map click/drag selects text in controls in Firefox because of display flex */
     -moz-user-select: none;
 }
-.leaflet-control-container,
+.leaflet-control-container {
-#message .alert {
     -moz-user-select: text;
 }
-#message {
+#notification_jar .alert {
+    -moz-user-select: text;
+    margin-bottom: 10px;
+}
+#notification_jar {
     position: absolute;
     margin: 10px 46px; /* 10 + 26 + 10 */
     z-index: 3001;

index.html

@@ -847,7 +847,10 @@
 
             <div class="leaflet-sidebar-flex-row flexgrow">
                 <div id="map" class="leaflet-sidebar-map">
-                    <div id="message"></div>
+                    <div id="notification_jar">
+                        <div id="message"></div>
+                        <div id="overpass_loading_indicator"></div>
+                    </div>
                     <div id="preview" hidden data-i18n="map.preview">Preview</div>
                 </div>
 

js/LayersConfig.js

@@ -10,6 +10,8 @@ BR.LayersConfig = L.Class.extend({
 
     initialize: function (map) {
         this._map = map;
+        this._overpassLoadingIndicator = new BR.Message('overpass_loading_indicator', { alert: false });
+        this._overpassActiveRequestCount = 0;
 
         this._addLeafletProvidersLayers();
         this._customizeLayers();
@@ -172,18 +174,35 @@ BR.LayersConfig = L.Class.extend({
         return result;
     },
 
+    _showOverpassLoadingIndicator: function () {
+        this._overpassActiveRequestCount++;
+        this._overpassLoadingIndicator.showInfo(i18next.t('layers.overpass-loading-indicator'));
+    },
+
+    _hideOverpassLoadingIndicator: function () {
+        if (--this._overpassActiveRequestCount === 0) {
+            this._overpassLoadingIndicator.hide();
+        }
+    },
+
     createOverpassLayer: function (query) {
-        return new OverpassLayer({
+        return Object.assign(
-            overpassFrontend: this.overpassFrontend,
+            new OverpassLayer({
-            query: query,
+                overpassFrontend: this.overpassFrontend,
-            minZoom: 12,
+                query: query,
-            feature: {
+                minZoom: 12,
-                title: '{{ tags.name }}',
+                feature: {
-                body:
+                    title: '{{ tags.name }}',
-                    '<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:
-                markerSymbol: null,
+                        '<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,
-        });
+                },
+            }),
+            {
+                onLoadStart: this._showOverpassLoadingIndicator.bind(this),
+                onLoadEnd: this._hideOverpassLoadingIndicator.bind(this),
+            }
+        );
     },
 
     createLayer: function (layerData) {

locales/en.json

@@ -78,6 +78,7 @@
     "custom-layer-url-label": "Custom layer URL/Query",
     "customize": "Customize layers",
     "opacity-slider": "Opacity slider",
+    "overpass-loading-indicator": "Running Overpass API query ...",
     "remove-selection": "Remove selection"
   },
   "loadNogos": {