define tree of categories in one json file

categories/index.json

@@ -2,12 +2,19 @@
     "type": "index",
     "subCategories": [
         {
-            "id": "gastro",
-            "name:en": "Gastronomy"
-        },
-        {
-            "id": "shop",
-            "name:en": "Shopping"
+            "id": "leisure",
+            "type": "index",
+            "name:en": "Leisure, Sport and Shopping",
+            "subCategories": [
+                {
+                    "id": "gastro",
+                    "name:en": "Gastronomy"
+                },
+                {
+                    "id": "shop",
+                    "name:en": "Shopping"
+                }
+            ]
         },
         {
             "id": "trees",

src/OpenStreetBrowserIndex.js

@@ -40,6 +40,24 @@ OpenStreetBrowserIndex.prototype.open = function () {
     this.parentDom.appendChild(domContent)
 
     this.childrenCategories[data.id] = null
+
+    if ('type' in data) {
+      OpenStreetBrowserLoader.getCategoryFromData(data.id, data, function (err, category) {
+        if (err) {
+          return
+        }
+
+        this.childrenCategories[category.id] = category
+      }.bind(this))
+    }
+  }
+}
+
+OpenStreetBrowserIndex.prototype.toggle = function () {
+  if (this.isOpen) {
+    // this.remove()
+  } else {
+    this.open()
   }
 }
 

src/OpenStreetBrowserLoader.js

@@ -25,15 +25,24 @@ OpenStreetBrowserLoader.prototype.getCategory = function (id, callback) {
 
     var data = JSON.parse(req.responseText)
 
-    if (!data.type) {
-      callback('no type defined', null)
-      return
-    } else if (!(data.type in this.types)) {
-      callback('unknown type', null)
-      return
-    } else {
-      var layer = new this.types[data.type](id, data)
-    }
+    this.getCategoryFromData(id, data, callback)
+  }
+
+  var req = new XMLHttpRequest()
+  req.addEventListener("load", reqListener.bind(this, req))
+  req.open("GET", "categories/" + id + ".json")
+  req.send()
+}
+
+OpenStreetBrowserLoader.prototype.getCategoryFromData = function (id, data, callback) {
+  if (!data.type) {
+    callback('no type defined', null)
+    return
+  } else if (!(data.type in this.types)) {
+    callback('unknown type', null)
+    return
+  } else {
+    var layer = new this.types[data.type](id, data)
 
     layer.setMap(this.map)
     layer.setParentDom('category-' + id)
@@ -42,11 +51,6 @@ OpenStreetBrowserLoader.prototype.getCategory = function (id, callback) {
 
     callback(null, layer)
   }
-
-  var req = new XMLHttpRequest()
-  req.addEventListener("load", reqListener.bind(this, req))
-  req.open("GET", "categories/" + id + ".json")
-  req.send()
 }
 
 OpenStreetBrowserLoader.prototype.registerType = function (type, classObject) {