Merge pull request #384 from stesie/add-overpass-layer-re

Add (Overpass based) POI layer
nrenner · Mar 22, 2021 · f3d4b23 · f3d4b23
2 parents d3e344f + 45b8b40
commit f3d4b23
Show file tree

Hide file tree

Showing 76 changed files with 1,562 additions and 59 deletions.
diff --git a/README.md b/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)
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+    presets: [['@babel/preset-env', {}]],
+    sourceType: 'script',
+    exclude: [/node_modules\/(?!overpass-layer\/).*/],
+};
diff --git a/babel.config.json b/babel.config.json
diff --git a/css/style.css b/css/style.css
@@ -45,6 +45,15 @@ 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;
+}
+
 /* wrap toolbar controls */
 .leaflet-top.leaflet-left {
     bottom: 0;
@@ -215,11 +224,14 @@ input#trackname:focus:invalid {
     /* map click/drag selects text in controls in Firefox because of display flex */
     -moz-user-select: none;
 }
-.leaflet-control-container,
-#message .alert {
+.leaflet-control-container {
     -moz-user-select: text;
 }
-#message {
+#notification_jar .alert {
+    -moz-user-select: text;
+    margin-bottom: 10px;
+}
+#notification_jar {
     position: absolute;
     margin: 10px 46px; /* 10 + 26 + 10 */
     z-index: 3001;

diff --git a/index.html b/index.html
@@ -208,24 +208,26 @@ <h4 class="modal-title" data-i18n="layers.customize">Customize layers</h4>
                         </button>
                     </div>
                     <div class="modal-body">
-                        <input
-                            class="form-control"
-                            type="text"
-                            id="layer_name"
-                            spellcheck="true"
-                            wrap="off"
-                            data-i18n="[placeholder]layers.placeholder-layer-name"
-                            placeholder="Custom layer name. (ex: OpenStreetMap)"
-                        />
-                        <input
-                            class="form-control"
-                            type="text"
-                            id="layer_url"
-                            spellcheck="false"
-                            wrap="off"
-                            data-i18n="[placeholder]layers.placeholder-layer-url"
-                            placeholder="Custom layer URL. (ex: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png)"
-                        />
+                        <div class="form-group">
+                            <label for="layer_name" data-i18n="layers.custom-layer-name-label">Custom layer name</label>
+                            <input class="form-control" type="text" id="layer_name" spellcheck="true" wrap="off" />
+                            <p class="help-block" data-i18n="layers.custom-layer-name-helptext">ex: OpenStreetMap</p>
+                        </div>
+
+                        <div class="form-group">
+                            <label for="layer_name" data-i18n="layers.custom-layer-url-label"
+                                >Custom layer URL/Query</label
+                            >
+                            <input class="form-control" type="text" id="layer_url" spellcheck="false" wrap="off" />
+                            <p class="help-block">
+                                <span data-i18n="layers.custom-layer-url-helptext-normal"
+                                    >URL for normal layers, ex: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png</span
+                                ><br />
+                                <span data-i18n="layers.custom-layer-url-helptext-overpass"
+                                    >Overpass Query, ex: nwr[shop]['diet:vegan']['diet:vegan'!=no];</span
+                                >
+                            </p>
+                        </div>
 
                         <button
                             type="button"
@@ -243,6 +245,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"
@@ -898,7 +908,10 @@ <h4 class="modal-title" data-i18n="loadNogos.title">Load no-go areas</h4>
 
             <div class="leaflet-sidebar-flex-row flexgrow">
                 <div id="map" class="leaflet-sidebar-map">
-                    <div id="message"></div>
+                    <div id="notification_jar">
+                        <div id="message"></div>
+                        <div id="overpass_loading_indicator"></div>
+                    </div>
                     <div id="preview" hidden data-i18n="map.preview">Preview</div>
                 </div>
 

diff --git a/js/LayersConfig.js b/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,
@@ -7,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();
@@ -169,6 +174,37 @@ 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 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) {
         var props = layerData.properties;
         var url = props.url;
@@ -251,6 +287,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;

diff --git a/js/control/Layers.js b/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;
                 })

diff --git a/layers/config/tree.js b/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',
+        ]
     }
 };
diff --git a/layers/overpass/amenity/financial/atm.geojson b/layers/overpass/amenity/financial/atm.geojson
@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "ATM",
+    "id": "atm",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "(nwr[amenity=atm]; nwr[amenity=bank][atm][atm!=no];);"
+  },
+  "type": "Feature"
+}