Add (Overpass based) POI layer

README.md

@@ -130,3 +130,5 @@ Copyright (c) 2018 Norbert Renner and [contributors](https://github.com/nrenner/
     Copyright (c) 2014-2021 Denis Pushkarev; [MIT License](https://github.com/zloirock/core-js/blob/master/LICENSE)
 -   [regenerator-runtime](https://github.com/facebook/regenerator/tree/master/packages/regenerator-runtime)  
     Copyright (c) 2014-present, Facebook, Inc.; [MIT License](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/LICENSE)
+-   [overpass-layer](https://github.com/plepe/overpass-layer)
+    Copyright (c) 2020 Stephan Bösch-Plepelits; [MIT License](https://github.com/plepe/overpass-layer/blob/master/LICENSE)

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    presets: [['@babel/preset-env', {}]],
+    sourceType: 'script',
+    exclude: [/node_modules\/(?!overpass-layer\/).*/],
+};

css/style.css

@@ -45,6 +45,25 @@ table.dataTable {
     flex: auto;
 }
 
+/* reduce title font size in overpass popups */
+.leaflet-popup-content h1 {
+    font-size: 1.2rem;
+}
+
+.overpass-tags th {
+    vertical-align: top;
+}
+
+.overpass-layer-icon i {
+    position: absolute;
+    top: 7px;
+    left: 7px;
+    color: white;
+    margin: auto;
+    display: inline-block;
+    font-size: 11px;
+}
+
 /* wrap toolbar controls */
 .leaflet-top.leaflet-left {
     bottom: 0;

index.html

@@ -238,6 +238,14 @@ <h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
                         >
                             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

@@ -1,4 +1,7 @@
 BR.LayersConfig = L.Class.extend({
+    overpassFrontend: new OverpassFrontend(
+        (BR.conf.overpassBaseUrl || '//overpass-api.de/api/interpreter').replace('?data=', '')
+    ),
     defaultBaseLayers: BR.confLayers.defaultBaseLayers,
     defaultOverlays: BR.confLayers.defaultOverlays,
     legacyNameToIdMap: BR.confLayers.legacyNameToIdMap,
@@ -169,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:
+                    '<svg width="25px" height="41px" anchorX="12" anchorY="41" viewBox="0 0 32 52" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M16,1 C7.7146,1 1,7.65636364 1,15.8648485 C1,24.0760606 16,51 16,51 C16,51 31,24.0760606 31,15.8648485 C31,7.65636364 24.2815,1 16,1 L16,1 Z" fill="#436978"></path></svg><i class="fa fa-search icon-white" style="width: 25px;"></i>',
+            },
+        });
+    },
+
     createLayer: function (layerData) {
         var props = layerData.properties;
         var url = props.url;
@@ -251,6 +269,8 @@ BR.LayersConfig = L.Class.extend({
             if (props.subdomains) {
                 layer.subdomains = props.subdomains;
             }
+        } else if (props.dataSource === 'OverpassAPI') {
+            layer = this.createOverpassLayer(props.query);
         } else {
             // JOSM
             var josmUrl = url;

js/control/Layers.js

@@ -5,22 +5,30 @@ 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);
             }
         }
     },
 
     _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;
                 })

layers/config/tree.js

@@ -83,5 +83,88 @@ BR.confLayers.tree = {
                 ]
             }
         ]
+    },
+    'overpass': {
+        'amenity': {
+            'financial': [
+                'atm',
+                'bank',
+            ],
+            'others': [
+                'bench',
+                'kneipp_water_cure',
+                'public_bath',
+                'shelter',
+                'shower',
+                'telephone',
+                'toilets',
+                'water_point',
+            ],
+            'sustenance': [
+                'bar',
+                'bbq',
+                'biergarten',
+                'cafe',
+                'drinking_water',
+                'fast_food',
+                'food_court',
+                'ice_cream',
+                'pub',
+                'restaurant',
+            ],
+            'transportation': [
+                'bicycle_parking',
+                'bicycle_rental',
+                'bicycle_repair_station',
+                'boat_rental',
+                'boat_sharing',
+                'bus_station',
+                'car_rental',
+                'car_sharing',
+                'car_wash',
+                'charging_station',
+                'ferry_terminal',
+                'fuel',
+                'grit_bin',
+                'motorcycle_parking',
+                'parking_entrance',
+                'parking',
+                'parking_space',
+                'taxi',
+                'vehicle_inspection',
+            ]
+        },
+        'shop': {
+            'food': [
+                'bakery',
+                'beverages',
+                'butcher',
+                'cheese',
+                'coffee',
+                'convenience',
+                'greengrocer',
+                'health_food',
+                'ice_cream',
+                'organic',
+            ]
+        },
+        'tourism': [
+            'apartment',
+            'artwork',
+            'attraction',
+            'camp_site',
+            'caravan_site',
+            'chalet',
+            'gallery',
+            'guest_house',
+            'hostel',
+            'hotel',
+            'information',
+            'motel',
+            'museum',
+            'picnic_site',
+            'viewpoint',
+            'wilderness_hut',
+        ]
     }
 };

layers/overpass/amenity/financial/atm.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "ATM",
+    "id": "atm",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(node[amenity=atm]; node[amenity=bank][atm][atm!=no]; way[amenity=bank][atm][atm!=no];);"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/financial/bank.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Bank",
+    "id": "bank",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(node[amenity=bank]; way[amenity=bank];);"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/bench.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Bench",
+    "id": "bench",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "node[amenity=bench];"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/kneipp_water_cure.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Kneipp water cure",
+    "id": "kneipp_water_cure",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(node[amenity=kneipp_water_cure]; way[amenity=kneipp_water_cure];);"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/public_bath.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Public bath",
+    "id": "public_bath",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(node[amenity=public_bath]; way[amenity=public_bath];);"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/shelter.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Shelter",
+    "id": "shelter",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(node[amenity=shelter]; way[amenity=shelter];);"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/shower.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Shower",
+    "id": "shower",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(node[amenity=shower]; way[amenity=shower];);"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/telephone.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Telephone",
+    "id": "telephone",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "node[amenity=telephone];"
+  },
+  "type": "Feature"
+}