allow to add custom overpass queries
This commit is contained in:
Stefan Siegl
parent
275b0f75a5
commit
06f0be719d
4 changed files with 71 additions and 26 deletions
|
|
@ -238,6 +238,14 @@
|
|||
>
|
||||
Add overlay
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="custom_layers_add_overpass"
|
||||
class="btn btn-success"
|
||||
data-i18n="layers.add-overpass"
|
||||
>
|
||||
Add overpass query
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
id="custom_layers_remove"
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
})
|
||||
|
|
|
|||
|
|
@ -70,6 +70,7 @@
|
|||
"layers": {
|
||||
"add-base": "Add base layer",
|
||||
"add-overlay": "Add overlay",
|
||||
"add-overpass": "Add overpass query",
|
||||
"customize": "Customize layers",
|
||||
"opacity-slider": "Opacity slider",
|
||||
"placeholder-layer-name": "Custom layer name. (ex: OpenStreetMap)",
|
||||
|
|
@ -248,7 +249,8 @@
|
|||
"name": "Name",
|
||||
"type": "Type",
|
||||
"type_layer": "Layer",
|
||||
"type_overlay": "Overlay"
|
||||
"type_overlay": "Overlay",
|
||||
"type_overpass_query": "Overpass Query"
|
||||
},
|
||||
"title": "Layers",
|
||||
"tooltip": "Select layers"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue