Categories as JSON files

categories/gastro.json

@@ -0,0 +1,6 @@
+{
+    "query": "(node[amenity~'^(restaurant|cafe)$'];way[amenity~'^(restaurant|cafe)$'];relation[amenity~'^(restaurant|cafe)$'];);",
+    "minZoom": 16,
+    "markerSign": "{% if tags.amenity=='restaurant' %}🍴{% else %}☕{% endif %}",
+    "featureBody": "{{ tags.amenity }}<br/>Cuisine: {{ tags.cuisine|default('unknown') }}"
+}

categories/parks.json

@@ -0,0 +1,10 @@
+{
+    "query": "(way[leisure=park];relation[leisure=park];)",
+    "style": {
+        "color": "green",
+        "fillColor": "green",
+        "fillOpacity": 0.2,
+        "weight": 2
+    },
+    "minZoom": 14
+}

categories/trees.json

@@ -0,0 +1,18 @@
+{
+    "query": "node[natural=tree];",
+    "style": {
+          "nodeFeature": "CircleMarker",
+          "color": "red",
+          "fillColor": "red",
+          "fillOpacity": 0.1,
+          "weight": 1,
+          "radius": 6
+    },
+    "marker": {
+        "iconUrl": "img/map_pointer.png",
+        "iconSize": [ 25, 42 ],
+        "iconAnchor": [ 13, 42 ]
+    },
+    "minZoom": 17,
+    "featureTitle": "{{ tags.species|default('Tree') }}"
+}

index.js

@@ -1,6 +1,7 @@
 var OverpassLayer = require('overpass-layer')
 var OverpassLayerList = require('overpass-layer').List
 var OverpassFrontend = require('overpass-frontend')
+var OpenStreetBrowserCategory = require('./src/OpenStreetBrowserCategory')
 
 var map
 
@@ -19,63 +20,6 @@ window.onload = function() {
   )
   osm_mapnik.addTo(map)
 
-  var overpass_layer = new OverpassLayer('node[natural=tree];', {
-    style: {
-          nodeFeature: 'CircleMarker',
-          color: 'red',
-          fillColor: 'red',
-          fillOpacity: 0.1,
-          weight: 1,
-          radius: 6
-    },
-    marker: {
-        iconUrl: 'img/map_pointer.png',
-        iconSize: [ 25, 42 ],
-        iconAnchor: [ 13, 42 ]
-    },
-    minZoom: 17,
-    featureTitle: '{{ tags.species|default("Tree") }}',
-    featureBody: function(ob) {
-      return '<pre>' + JSON.stringify(ob.tags, null, '  ') + '</pre>'
-    }
-  })
-  //overpass_layer.addTo(map)
-
-  var overpass_layer2 = new OverpassLayer('(way[leisure=park];relation[leisure=park];);', {
-    style: function(ob) {
-      return {
-          nodeFeature: 'CircleMarker',
-          color: 'green',
-          fillColor: 'green',
-          fillOpacity: 0.2,
-          weight: 1,
-          radius: 6
-      }
-    },
-    minZoom: 14,
-    featureBody: function(ob) {
-      return '<pre>' + JSON.stringify(ob.tags, null, '  ') + '</pre>'
-    }
-  })
-  //overpass_layer2.addTo(map)
-
-  var overpass_layer3 = new OverpassLayer('(node[amenity~"^(restaurant|cafe)$"];way[amenity~"^(restaurant|cafe)$"];relation[amenity~"^(restaurant|cafe)$"];);', {
-    style:
-      "{% if tags.cuisine == 'italian' %}\n" +
-      "  color: #003f7f\n" +
-      "  fillColor: #003f7f\n" +
-      "{% else %}\n" +
-      "  color: blue\n" +
-      "  fillColor: blue  \n" +
-      "{% endif %}\n" +
-      "fillOpacity: 0.2\n" +
-      "weight: 2\n" +
-      "radius: 9\n",
-    minZoom: 16,
-    markerSign: '{% if tags.amenity=="restaurant" %}&#127860;{% else %}&#9749;{% endif %}',
-    featureBody: "{{ tags.amenity }}<br/>Cuisine: {{ tags.cuisine|default('unknown') }}"
-  })
-  overpass_layer3.addTo(map)
-  new OverpassLayerList(document.getElementById('info'), overpass_layer3);
+  var category = new OpenStreetBrowserCategory("gastro")
+  category.addTo(map)
 }
-

src/OpenStreetBrowserCategory.js

@@ -0,0 +1,33 @@
+var OverpassLayer = require('overpass-layer')
+var OverpassLayerList = require('overpass-layer').List
+
+function OpenStreetBrowserCategory (id) {
+  function reqListener (req) {
+    var data = JSON.parse(req.responseText)
+
+    this.layer = new OverpassLayer(data.query, data)
+
+    if (this.autoAdd) {
+      this.addTo(this.map)
+      this.autoAdd = false
+    }
+  }
+
+  var req = new XMLHttpRequest()
+  req.addEventListener("load", reqListener.bind(this, req))
+  req.open("GET", "categories/" + id + ".json")
+  req.send()
+}
+
+OpenStreetBrowserCategory.prototype.addTo = function (map) {
+  this.map = map
+
+  if (this.layer) {
+    this.layer.addTo(this.map)
+    new OverpassLayerList(document.getElementById('info'), this.layer);
+  } else {
+    this.autoAdd = true
+  }
+}
+
+module.exports = OpenStreetBrowserCategory