allow to add custom overpass queries

index.html

@@ -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"

js/LayersConfig.js

@@ -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({
+            layer = this.createOverpassLayer(props.query);
-                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">',
-                },
-            });
         } else {
             // JOSM
             var josmUrl = url;

js/control/Layers.js

@@ -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;
+            if (this._customLayers[layer].dataSource === 'OverpassAPI') {
-            layersData.push([
+                layersData.push([
-                layer,
+                    layer,
-                this._customLayers[layer].layer._url,
+                    this._customLayers[layer].layer.options.query,
-                isOverlay
+                    i18next.t('sidebar.layers.table.type_overpass_query'),
-                    ? i18next.t('sidebar.layers.table.type_overlay')
+                ]);
-                    : i18next.t('sidebar.layers.table.type_layer'),
+            } 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;
                 })

locales/en.json

@@ -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"