Add cartography menu with image overlays (WIP)

webgis/js/controllers/layer_controller.js

@@ -1,8 +1,37 @@
 import { Controller } from "@hotwired/stimulus";
 import { GisState } from "../state.js";
+import GIS from "../gis.js";
 
 export default class extends Controller {
-    static targets = ['sites', 'findings', 'notconserved', 'prehist',];
+    static targets = [
+        'sites',
+        'findings',
+        'notconserved',
+        'prehist',
+    ];
+
+    static values = {
+        'id': Number,
+        'type': String,
+    };
+
+    async toggleCartography() {
+        const map = GisState.map;
+        const id = this.idValue;
+
+        let currentLayer = await GIS.getImageOverlay(id);
+        let hasLayer = false;
+
+        map.eachLayer(function (layer) {
+            if (layer.options.label === currentLayer.options.label) {
+                hasLayer |= true;
+                currentLayer = layer;
+            }
+        });
+
+        if (!hasLayer) currentLayer.addTo(map);
+        else map.removeLayer(currentLayer);
+    }
 
     /**
      * @todo Use Stimulus values?

webgis/js/controllers/menu_controller.js

@@ -2,7 +2,17 @@ import { Controller } from "@hotwired/stimulus"
 import { GisState } from '../state.js';
 
 export default class extends Controller {
-    static targets = ['list', 'menu', 'icon'];
+    static targets = [
+        'list',
+        'menu',
+        'cartography',
+        'icon'
+    ];
+
+    static values = {
+        'cartography' : String,
+        'main' : String,
+    };
 
     buildMenu() {
         const groups = Object.keys(GisState.markers);
@@ -17,7 +27,6 @@ export default class extends Controller {
             }
         }
     }
-
     /**
      * 
      * @param {String} group 
@@ -47,8 +56,50 @@ export default class extends Controller {
         return ul;
     }
 
-    toggleMenu() {
-        this.menuTarget.classList.toggle('is-hidden');
+    buildCartographyMenu() {
+        const historicCadastre = GisState.cartography.historic;
+        const template = document.getElementById('cartography-item-template');
+        const ul = document.createElement('ul');
+        ul.className = 'menu-list';
+        ul.id = 'historic-sub';
+
+        const aside = document.querySelector('[data-id="cartography-aside"]');
+
+        for (let geoImage of historicCadastre) {
+            const clone = template.content.cloneNode(true);
+            const label = clone.querySelector('label');
+            const checkbox = clone.querySelector('input[type="checkbox"]');
+
+            checkbox.dataset.layerIdValue = geoImage.id;
+            checkbox.dataset.layerTypeValue = 'historic';
+            const span = document.createElement('span');
+            span.className = 'pl-3';
+            span.textContent = geoImage.label;
+            label.appendChild(span);
+
+            ul.appendChild(clone);
+        }
+
+        aside.appendChild(ul);
+    }
+
+    toggleMenu(event) {
+        const menuId = event.target.dataset.id;
+
+        // Stupid...
+        if (menuId === 'main') {
+            this.menuTarget.classList.toggle('is-hidden');
+            if (!this.cartographyTarget.classList.contains('is-hidden')) {
+                this.cartographyTarget.classList.add('is-hidden');
+            }
+        }
+
+        if (menuId === 'cartography') {
+            this.cartographyTarget.classList.toggle('is-hidden');
+            if (!this.menuTarget.classList.contains('is-hidden')) {
+                this.menuTarget.classList.add('is-hidden');
+            }
+        }
     }
 
     close() {