List categories, open on click

categories/index.json

@@ -0,0 +1,17 @@
+{
+    "type": "index",
+    "subCategories": [
+        {
+            "id": "gastro",
+            "name:en": "Gastronomy"
+        },
+        {
+            "id": "trees",
+            "name:en": "Trees"
+        },
+        {
+            "id": "parks",
+            "name:en": "Parks"
+        }
+    ]
+}

index.js

@@ -21,7 +21,13 @@ window.onload = function() {
   osm_mapnik.addTo(map)
 
 
-  OpenStreetBrowserLoader('gastro', function (err, category) {
+  OpenStreetBrowserLoader('index', function (err, category) {
     category.addTo(map, document.getElementById('info'))
   })
 }
+
+window.toggleCategory = function (id) {
+  OpenStreetBrowserLoader(id, function (err, category) {
+    category.addTo(map, document.getElementById('category-' + id).lastChild)
+  })
+}

src/OpenStreetBrowserIndex.js

@@ -0,0 +1,25 @@
+function OpenStreetBrowserIndex (data) {
+  this.data = data
+}
+
+OpenStreetBrowserIndex.prototype.addTo = function (map, parentDom) {
+  for (var i = 0; i < this.data.subCategories.length; i++) {
+    var d = this.data.subCategories[i]
+    var dom = document.createElement('div')
+    dom.id = 'category-' + d.id
+    parentDom.appendChild(dom)
+
+    var domHeader = document.createElement('header')
+    dom.appendChild(domHeader)
+
+    var a = document.createElement('a')
+    a.appendChild(document.createTextNode(d['name:en']))
+    a.href = 'javascript:toggleCategory(' + JSON.stringify(d.id) + ')'
+    domHeader.appendChild(a)
+
+    var domContent = document.createElement('div')
+    parentDom.appendChild(domContent)
+  }
+}
+
+module.exports = OpenStreetBrowserIndex

src/OpenStreetBrowserLoader.js

@@ -5,7 +5,11 @@ function OpenStreetBrowserLoader (id, callback) {
   function reqListener (req) {
     var data = JSON.parse(req.responseText)
 
-    var layer = new OpenStreetBrowserCategory(data)
+    if (data.type && data.type === 'index') {
+      var layer = new OpenStreetBrowserIndex(data)
+    } else {
+      var layer = new OpenStreetBrowserCategory(data)
+    }
 
     callback(null, layer)
   }