Move category handling to OpenStreetBrowserLoader

index.js

@@ -2,12 +2,12 @@ var OverpassLayer = require('overpass-layer')
 var OverpassLayerList = require('overpass-layer').List
 var OverpassFrontend = require('overpass-frontend')
 var OpenStreetBrowserLoader = require('./src/OpenStreetBrowserLoader')
+window.OpenStreetBrowserLoader = OpenStreetBrowserLoader
 
 require('./src/OpenStreetBrowserCategory')
 require('./src/OpenStreetBrowserIndex')
 
 var map
-var categories = {}
 
 window.onload = function() {
   map = L.map('map').setView([51.505, -0.09], 18)
@@ -24,30 +24,27 @@ window.onload = function() {
   )
   osm_mapnik.addTo(map)
 
-  OpenStreetBrowserLoader.load('index', function (err, category) {
+  OpenStreetBrowserLoader.setMap(map)
+  OpenStreetBrowserLoader.setParentDom(document.getElementById('info'))
+
+  OpenStreetBrowserLoader.getCategory('index', function (err, category) {
     if (err) {
       alert(err)
       return
     }
 
-    categories[category.id] = category
-    category.addTo(map, document.getElementById('info'))
-
+    category.setParentDom(document.getElementById('info'))
+    category.open()
   })
 }
 
 window.toggleCategory = function (id) {
-  if (id in categories) {
-    categories[id].toggle()
-  } else {
-    OpenStreetBrowserLoader.load(id, function (err, category) {
-      if (err) {
-        alert(err)
-        return
-      }
-
-      categories[category.id] = category
-      category.addTo(map, document.getElementById('category-' + id).lastChild)
-    })
-  }
+  OpenStreetBrowserLoader.getCategory(id, function (err, category) {
+    if (err) {
+      alert(err)
+      return
+    }
+
+    category.toggle()
+  })
 }

src/OpenStreetBrowserCategory.js

@@ -5,11 +5,21 @@ var OverpassLayerList = require('overpass-layer').List
 function OpenStreetBrowserCategory (id, data) {
   this.id = id
   this.layer = new OverpassLayer(data.query, data)
+  this.isOpen = false
 }
 
-OpenStreetBrowserCategory.prototype.addTo = function (map, parentDom) {
+OpenStreetBrowserCategory.prototype.setMap = function (map) {
   this.map = map
+}
+
+OpenStreetBrowserCategory.prototype.setParentDom = function (parentDom) {
   this.parentDom = parentDom
+}
+
+OpenStreetBrowserCategory.prototype.open = function () {
+  if (typeof this.parentDom === 'string') {
+    this.parentDom = document.getElementById(this.parentDom)
+  }
 
   this.layer.addTo(this.map)
 
@@ -31,7 +41,7 @@ OpenStreetBrowserCategory.prototype.toggle = function () {
   if (this.isOpen) {
     this.remove()
   } else {
-    this.addTo(this.map, this.parentDom)
+    this.open()
   }
 }
 

src/OpenStreetBrowserIndex.js

@@ -3,14 +3,27 @@ var OpenStreetBrowserLoader = require('./OpenStreetBrowserLoader')
 function OpenStreetBrowserIndex (id, data) {
   this.id = id
   this.data = data
+  this.isOpen = false
 }
 
-OpenStreetBrowserIndex.prototype.addTo = function (map, parentDom) {
+OpenStreetBrowserIndex.prototype.setMap = function (map) {
+  this.map = map
+}
+
+OpenStreetBrowserIndex.prototype.setParentDom = function (parentDom) {
+  this.parentDom = parentDom
+}
+
+OpenStreetBrowserIndex.prototype.open = function () {
+  if (typeof this.parentDom === 'string') {
+    this.parentDom = document.getElementById(this.parentDom)
+  }
+
   for (var i = 0; i < this.data.subCategories.length; i++) {
     var data = this.data.subCategories[i]
     var dom = document.createElement('div')
     dom.id = 'category-' + data.id
-    parentDom.appendChild(dom)
+    this.parentDom.appendChild(dom)
 
     var domHeader = document.createElement('header')
     dom.appendChild(domHeader)
@@ -21,7 +34,7 @@ OpenStreetBrowserIndex.prototype.addTo = function (map, parentDom) {
     domHeader.appendChild(a)
 
     var domContent = document.createElement('div')
-    parentDom.appendChild(domContent)
+    this.parentDom.appendChild(domContent)
   }
 }
 

src/OpenStreetBrowserLoader.js

@@ -1,9 +1,22 @@
 function OpenStreetBrowserLoader () {
   this.types = {}
+  this.categories = {}
 }
 
+OpenStreetBrowserLoader.prototype.setMap = function (map) {
+  this.map = map
+}
+
+OpenStreetBrowserLoader.prototype.setParentDom = function (parentDom) {
+  this.parentDom = parentDom
+}
+
+OpenStreetBrowserLoader.prototype.getCategory = function (id, callback) {
+  if (id in this.categories) {
+    callback(null, this.categories[id])
+    return
+  }
 
-OpenStreetBrowserLoader.prototype.load = function (id, callback) {
   function reqListener (req) {
     if (req.status !== 200) {
       console.log(req)
@@ -22,6 +35,11 @@ OpenStreetBrowserLoader.prototype.load = function (id, callback) {
       var layer = new this.types[data.type](id, data)
     }
 
+    layer.setMap(this.map)
+    layer.setParentDom('category-' + id)
+
+    this.categories[id] = layer
+
     callback(null, layer)
   }