1 files changed, 106 insertions, 6 deletions

diff --git a/app/javascript/controllers/taxonomy_controller.js b/app/javascript/controllers/taxonomy_controller.js
index 16d57fa..02b1483 100644
--- a/app/javascript/controllers/taxonomy_controller.js
+++ b/app/javascript/controllers/taxonomy_controller.js
@@ -9,15 +9,18 @@
 import { Controller } from "stimulus"
 
 export default class extends Controller {
-    static targets = [ "category", "deploy", "filter", "section", "toggle" ]
+    static targets = [ "category", "deploy", "filter", "layers", "section", "toggle" ]
 
     initialize() {
         console.log("Taxonomy controller initialized.")
+
+        this.overlays = {}
+        this.sectionsOnMap = []
     }
 
     connect() {
         console.log("Taxonomy controller connected.")
-
+        this.taxonomy_uuid = this.data.get('uuid')
         if (this.hasFilterTarget) {
             let url = `/taxonomies/${this.data.get('uuid')}/filter.js`
             console.log(`loading url = ${url}`)
@@ -29,10 +32,19 @@ export default class extends Controller {
         } else {
             console.log("Taxonomy filter is missing")
         }
+
+        // Access the map
+        if (this.map = document.querySelector('#map').parentElement.map.map) {
+            console.log("Taxonomy Controller connected to this.map")
+        } else {
+            console.log("Taxonomy Controller could not load map!")
+        }
     }
 
+
     deploy() {
         console.log(`deploying taxonomy ${this.data.get('uuid')}`);
+
         fetch(`/taxonomies/${this.data.get('uuid')}.js`)
             .then(response => response.text())
             .then(html => this.deployTarget.innerHTML = html);
@@ -45,12 +57,100 @@ export default class extends Controller {
     }
 
     category(event) {
-        let catId = event.target.dataset.taxonomyCategoryId
-        event.target.classList.toggle('active')
+        let catId = (event.target.dataset.taxonomyCategoryId || event.target.parentNode.parentNode.dataset.CategoryId)
+        let secId = event.target.dataset.taxonomySectionId
+        console.log(`Category: ${catId}/${secId}`)
+        var active = event.target.classList.toggle('active')
+        if (active) {
+            console.log('activated')
+        } else {
+            console.log('deactivated')
+        }
+    }
+
+    loadCategory(catId) {
+        document.querySelector(`#category-${catId}`).lastChild.childNodes.forEach(function(li) {
+            this._mapLayerToggleSection(li.dataset.taxonomySectionId)
+        })
     }
 
     section(event) {
-        let catId = event.target.dataset.taxonomySectionId
-        event.target.classList.toggle('active')
+        let secId = event.target.dataset.taxonomySectionId
+        console.log(`Section: ${secId} to be loaded`)
+        this._loadMarkers(secId)
+        this._mapLayerToggleSection(secId)
+    }
+
+    _sectionIconName(secId) {
+        const names = {
+            215: 'campsite',
+            216: 'hospital',
+            217: 'landmark',
+            218: 'shelter',
+            219: 'lodging',
+            220: 'playground',
+            221: 'residential-community',
+            222: 'home',
+            223: 'residential-community',
+            224: 'residential-community',
+            225: 'home'
+
+        }
+        return names[secId] || 'circle'
+    }
+
+    _loadMarkers(secId) {
+        if (this.overlays[secId] == undefined) {
+            console.log(`loading markers for section ${secId} [${this._sectionIconName(secId)}]...`)
+            let overlay = L.layerGroup();
+            let markers = L.markerClusterGroup();
+            let iconName = this._sectionIconName(secId);
+
+            fetch(`/sections/${secId}.json`, {
+                headers: { 'X-CSRF-Token': this._csrfToken() }
+            })
+                .then(response => response.json())
+                .then(data => {
+                    L.geoJSON(data, {
+                        pointToLayer: function (feature, latlng) {
+                            return L.marker(latlng, {
+                                attribution: feature.source,
+                                icon: L.MakiMarkers.icon({
+                                    icon: iconName,
+                                    className: feature.className.baseVal,
+                                    color: feature.style.fill,
+                                    size: 'm'
+                                })
+                            });
+		                    },
+                        onEachFeature: (feature, layer) => {
+                            layer.on('click', () => this.onClick(layer))
+                            layer.addTo(markers)
+                        }
+                    })
+                })
+            console.log(`cluster counts ${markers.length} markers`)
+            this.overlays[secId] = markers
+        }
+    }
+
+    onClick(layer) {
+        console.log(layer)
+    }
+
+    _mapLayerToggleSection(secId) {
+        if (this.sectionsOnMap.includes(secId)) {
+            console.log(`removing section ${secId} from map`)
+            this.map.removeLayer(this.overlays[secId])
+            this.sectionsOnMap.pop(secId)
+        } else {
+            console.log(`adding section ${secId} to the map`)
+            this.sectionsOnMap.push(secId)
+            this.overlays[secId].addTo(this.map)
+        }
+    }
+
+    _csrfToken() {
+        return document.querySelector('[name=csrf-token]').content
     }
 }