allow to add custom overpass queries

This commit is contained in:
Stefan Siegl 2020-08-01 21:14:38 +02:00
parent 275b0f75a5
commit 06f0be719d
No known key found for this signature in database
GPG key ID: 73942AF5642F3DDA
4 changed files with 71 additions and 26 deletions

View file

@ -172,6 +172,21 @@ BR.LayersConfig = L.Class.extend({
return result;
},
createOverpassLayer: function (query) {
return new OverpassLayer({
overpassFrontend: this.overpassFrontend,
query: query,
minZoom: undefined,
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:
'<img anchorX="13" anchorY="42" width="25" height="42" signAnchorX="0" signAnchorY="-30" src="dist/images/marker-icon.png">',
},
});
},
createLayer: function (layerData) {
var props = layerData.properties;
var url = props.url;
@ -255,18 +270,7 @@ BR.LayersConfig = L.Class.extend({
layer.subdomains = props.subdomains;
}
} else if (props.dataSource === 'OverpassAPI') {
layer = new OverpassLayer({
overpassFrontend: this.overpassFrontend,
query: props.query,
minZoom: undefined,
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:
'<img anchorX="13" anchorY="42" width="25" height="42" signAnchorX="0" signAnchorY="-30" src="dist/images/marker-icon.png">',
},
});
layer = this.createOverpassLayer(props.query);
} else {
// JOSM
var josmUrl = url;

View file

@ -5,7 +5,7 @@ BR.Layers = L.Class.extend({
if (BR.Util.localStorageAvailable()) {
var layers = JSON.parse(localStorage.getItem('map/customLayers'));
for (a in layers) {
this._addLayer(a, layers[a].layer, layers[a].isOverlay);
this._addLayer(a, layers[a].layer, layers[a].isOverlay, layers[a].dataSource);
}
}
},
@ -13,14 +13,22 @@ BR.Layers = L.Class.extend({
_loadTable: function () {
var layersData = [];
for (layer in this._customLayers) {
var isOverlay = this._customLayers[layer].isOverlay;
layersData.push([
layer,
this._customLayers[layer].layer._url,
isOverlay
? i18next.t('sidebar.layers.table.type_overlay')
: i18next.t('sidebar.layers.table.type_layer'),
]);
if (this._customLayers[layer].dataSource === 'OverpassAPI') {
layersData.push([
layer,
this._customLayers[layer].layer.options.query,
i18next.t('sidebar.layers.table.type_overpass_query'),
]);
} else {
var isOverlay = this._customLayers[layer].isOverlay;
layersData.push([
layer,
this._customLayers[layer].layer._url,
isOverlay
? i18next.t('sidebar.layers.table.type_overlay')
: i18next.t('sidebar.layers.table.type_layer'),
]);
}
}
if (this._layersTable != null) {
this._layersTable.destroy();
@ -51,6 +59,7 @@ BR.Layers = L.Class.extend({
L.DomUtil.get('custom_layers_add_base').onclick = L.bind(this._addBaseLayer, this);
L.DomUtil.get('custom_layers_add_overlay').onclick = L.bind(this._addOverlay, this);
L.DomUtil.get('custom_layers_add_overpass').onclick = L.bind(this._addOverpassQuery, this);
L.DomUtil.get('custom_layers_remove').onclick = L.bind(this._remove, this);
this._loadLayers();
@ -83,10 +92,10 @@ BR.Layers = L.Class.extend({
}
},
_addFromInput: function (isOverlay) {
_addFromInput: function (isOverlay, dataSource) {
var layer_name = L.DomUtil.get('layer_name').value;
var layer_url = L.DomUtil.get('layer_url').value;
if (layer_name.length > 0 && layer_url.length > 0) this._addLayer(layer_name, layer_url, isOverlay);
if (layer_name.length > 0 && layer_url.length > 0) this._addLayer(layer_name, layer_url, isOverlay, dataSource);
},
_addBaseLayer: function (evt) {
@ -95,18 +104,28 @@ BR.Layers = L.Class.extend({
_addOverlay: function (evt) {
this._addFromInput(true);
},
_addOverpassQuery: function (evt) {
this._addFromInput(true, 'OverpassAPI');
},
_addLayer: function (layerName, layerUrl, isOverlay) {
_addLayer: function (layerName, layerUrl, isOverlay, dataSource) {
if (layerName in this._layers) return;
if (layerName in this._customLayers) return;
try {
var layer = L.tileLayer(layerUrl);
var layer;
if (dataSource === 'OverpassAPI') {
layer = this._layersControl.layersConfig.createOverpassLayer(layerUrl);
} else {
layer = L.tileLayer(layerUrl);
}
this._customLayers[layerName] = {
layer: layer,
isOverlay: isOverlay,
dataSource: dataSource,
};
if (isOverlay) {
@ -128,6 +147,18 @@ BR.Layers = L.Class.extend({
localStorage.setItem(
'map/customLayers',
JSON.stringify(this._customLayers, function (k, v) {
if (v === undefined) {
return undefined;
}
if (v.dataSource === 'OverpassAPI') {
return {
dataSource: 'OverpassAPI',
isOverlay: true,
layer: v.layer.options.query,
};
}
// dont write Leaflet.Layer in localStorage; simply keep the URL
return v._url || v;
})