Add loading indicator

This commit is contained in:
Stefan Siegl 2021-03-22 20:54:11 +01:00
parent 1b60d9af73
commit 45b8b40ce8
No known key found for this signature in database
GPG key ID: 73942AF5642F3DDA
4 changed files with 41 additions and 15 deletions

View file

@ -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({
overpassFrontend: this.overpassFrontend,
query: query,
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>',
markerSymbol: null,
},
});
return Object.assign(
new OverpassLayer({
overpassFrontend: this.overpassFrontend,
query: query,
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>',
markerSymbol: null,
},
}),
{
onLoadStart: this._showOverpassLoadingIndicator.bind(this),
onLoadEnd: this._hideOverpassLoadingIndicator.bind(this),
}
);
},
createLayer: function (layerData) {