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

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\/).*/],
+};

babel.config.json

@@ -1,5 +0,0 @@
-{
-    "presets": [["@babel/preset-env", {}]],
-    "sourceType": "script",
-    "exclude": ["node_modules/**"]
-}

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;

index.html

@@ -208,24 +208,26 @@
                         </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 @@
                         >
                             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 @@
 
             <div class="leaflet-sidebar-flex-row flexgrow">
                 <div id="map" class="leaflet-sidebar-map">
+                    <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>
 

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;

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,6 +13,13 @@ BR.Layers = L.Class.extend({
     _loadTable: function () {
         var layersData = [];
         for (layer in this._customLayers) {
+            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,
@@ -22,6 +29,7 @@ BR.Layers = L.Class.extend({
                         : 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": "(nwr[amenity=atm]; nwr[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": "nwr[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": "nwr[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": "nwr[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": "nwr[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": "nwr[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": "nwr[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": "nwr[amenity=telephone];"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/others/toilets.geojson

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

layers/overpass/amenity/others/water_point.geojson

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

layers/overpass/amenity/sustenance/bar.geojson

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

layers/overpass/amenity/sustenance/bbq.geojson

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

layers/overpass/amenity/sustenance/biergarten.geojson

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

layers/overpass/amenity/sustenance/cafe.geojson

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

layers/overpass/amenity/sustenance/drinking_water.geojson

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

layers/overpass/amenity/sustenance/fast_food.geojson

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

layers/overpass/amenity/sustenance/food_court.geojson

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

layers/overpass/amenity/sustenance/ice_cream.geojson

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

layers/overpass/amenity/sustenance/pub.geojson

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

layers/overpass/amenity/sustenance/restaurant.geojson

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

layers/overpass/amenity/transportation/bicycle_parking.geojson

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

layers/overpass/amenity/transportation/bicycle_rental.geojson

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

layers/overpass/amenity/transportation/bicycle_repair_station.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Bicycle repair station",
+    "id": "bicycle_repair_station",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[amenity=bicycle_repair_station];"
+  },
+  "type": "Feature"
+}

layers/overpass/amenity/transportation/boat_rental.geojson

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

layers/overpass/amenity/transportation/boat_sharing.geojson

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

layers/overpass/amenity/transportation/bus_station.geojson

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

layers/overpass/amenity/transportation/car_rental.geojson

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

layers/overpass/amenity/transportation/car_sharing.geojson

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

layers/overpass/amenity/transportation/car_wash.geojson

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

layers/overpass/amenity/transportation/charging_station.geojson

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

layers/overpass/amenity/transportation/ferry_terminal.geojson

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

layers/overpass/amenity/transportation/fuel.geojson

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

layers/overpass/amenity/transportation/grit_bin.geojson

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

layers/overpass/amenity/transportation/motorcycle_parking.geojson

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

layers/overpass/amenity/transportation/parking.geojson

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

layers/overpass/amenity/transportation/parking_entrance.geojson

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

layers/overpass/amenity/transportation/parking_space.geojson

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

layers/overpass/amenity/transportation/taxi.geojson

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

layers/overpass/amenity/transportation/vehicle_inspection.geojson

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

layers/overpass/shop/food/bakery.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Bakery",
+    "id": "bakery",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=bakery];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/beverages.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Beverages",
+    "id": "beverages",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=beverages];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/butcher.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Butcher",
+    "id": "butcher",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=butcher];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/cheese.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Cheese",
+    "id": "cheese",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=cheese];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/coffee.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Coffee",
+    "id": "coffee",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=coffee];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/convenience.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Convenience",
+    "id": "convenience",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=convenience];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/greengrocer.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Greengrocer",
+    "id": "greengrocer",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=greengrocer];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/health_food.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Health food",
+    "id": "health_food",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=health_food];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/ice_cream.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Ice cream",
+    "id": "ice_cream",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop=ice_cream];"
+  },
+  "type": "Feature"
+}

layers/overpass/shop/food/organic.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Organic",
+    "id": "organic",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[shop~'supermarket|convenience'][organic][organic!=no];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/apartment.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Apartment",
+    "id": "apartment",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=apartment];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/artwork.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Artwork",
+    "id": "artwork",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=artwork];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/attraction.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Attraction",
+    "id": "attraction",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=attraction];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/camp_site.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Camp site",
+    "id": "camp_site",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=camp_site];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/caravan_site.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Caravan site",
+    "id": "caravan_site",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=caravan_site];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/chalet.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Chalet",
+    "id": "chalet",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=chalet];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/gallery.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Gallery",
+    "id": "gallery",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=gallery];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/guest_house.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Guest house",
+    "id": "guest_house",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=guest_house];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/hostel.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Hostel",
+    "id": "hostel",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=hostel];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/hotel.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Hotel",
+    "id": "hotel",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=hotel];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/information.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Information",
+    "id": "information",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=information];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/motel.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Motel",
+    "id": "motel",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=motel];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/museum.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Museum",
+    "id": "museum",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=museum];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/picnic_site.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Picnic site",
+    "id": "picnic_site",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=picnic_site];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/viewpoint.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Viewpoint",
+    "id": "viewpoint",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=viewpoint];"
+  },
+  "type": "Feature"
+}

layers/overpass/tourism/wilderness_hut.geojson

@@ -0,0 +1,11 @@
+{
+  "geometry": null,
+  "properties": {
+    "name": "Wilderness hut",
+    "id": "wilderness_hut",
+    "overlay": true,
+    "dataSource": "OverpassAPI",
+    "query": "nwr[tourism=wilderness_hut];"
+  },
+  "type": "Feature"
+}

locales/en.json

@@ -70,10 +70,15 @@
   "layers": {
     "add-base": "Add base layer",
     "add-overlay": "Add overlay",
+    "add-overpass": "Add overpass query",
+    "custom-layer-name-helptext": "ex: OpenStreetMap",
+    "custom-layer-name-label": "Custom layer name",
+    "custom-layer-url-helptext-normal": "URL for normal layers, ex: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+    "custom-layer-url-helptext-overpass": "Overpass Query, ex: nwr[shop]['diet:vegan']['diet:vegan'!=no];",
+    "custom-layer-url-label": "Custom layer URL/Query",
     "customize": "Customize layers",
     "opacity-slider": "Opacity slider",
-    "placeholder-layer-name": "Custom layer name. (ex: OpenStreetMap)",
-    "placeholder-layer-url": "Custom layer URL. (ex: https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png)",
+    "overpass-loading-indicator": "Running Overpass API query ...",
     "remove-selection": "Remove selection"
   },
   "loadNogos": {
@@ -243,12 +248,13 @@
       "overlay-opacity": "Overlay transparency",
       "overlay-opacity_plural": "Overlays transparency",
       "table": {
-        "URL": "URL",
+        "URL": "URL/Query",
         "empty": "No custom layer configured yet.",
         "name": "Name",
         "type": "Type",
         "type_layer": "Layer",
-        "type_overlay": "Overlay"
+        "type_overlay": "Overlay",
+        "type_overpass_query": "Overpass Query"
       },
       "title": "Layers",
       "tooltip": "Select layers"

package.json

@@ -74,6 +74,7 @@
         "leaflet.stravasegments": "2.3.2",
         "mapbbcode": "MapBBCode/mapbbcode#v1.2.0",
         "osmtogeojson": "^3.0.0-beta.4",
+        "overpass-layer": "^3.0.0",
         "regenerator-runtime": "^0.13.7",
         "togpx": "^0.5.4",
         "topojson-client": "^3.1.0",
@@ -277,6 +278,11 @@
             "main": [
                 "minified.js"
             ]
+        },
+        "overpass-layer": {
+            "main": [
+                "dist/overpass-layer.js"
+            ]
         }
     }
 }