Add overpass-layer (first sketches)

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;

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,
@@ -251,6 +254,19 @@ BR.LayersConfig = L.Class.extend({
             if (props.subdomains) {
                 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>{{ v }}</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;

layers/config/tree.js

@@ -83,5 +83,10 @@ BR.confLayers.tree = {
                 ]
             }
         ]
+    },
+    'overpass': {
+        'tourism': [
+            'campsites'
+        ]
     }
 };

layers/overpass/tourism/campsites.geojson

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

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"
+            ]
         }
     }
 }