WIP: load all wall techs for a given site

TODO: refactor!!

webgis/js/controllers/bview_controller.js

@@ -6,7 +6,7 @@ export default class extends Controller {
 
     closeView(event) {
         // Don't do anything if ESC keyboard event
-        //  is not fired from the building view
+        // is not fired from the building view
         if (event instanceof KeyboardEvent && !GisState.bViewActive) return;
 
         this.resetMap();
@@ -17,8 +17,8 @@ export default class extends Controller {
     resetMap() {
         // Restore previous map state before closing view
         const map = GisState.map;
+        // Hard-coded...
         map.removeLayer(GisState.baseLayers['Limiti amministrativi']);
-        //map.removeLayer(GisState.cartography.buildings);
 
         const walls = GisState.layers.walls;
 
@@ -26,7 +26,6 @@ export default class extends Controller {
         // it doesn't remove the layer group (fails silently)
         walls.eachLayer(layer => map.removeLayer(layer));
 
-        GisState.layers.walls.removeFrom(map);
         map.addLayer(GisState.currentMapState.baseLayer);
         map.setMinZoom(GisState.currentMapState.minZoom);
         map.setMaxZoom(GisState.currentMapState.maxZoom);
@@ -34,6 +33,6 @@ export default class extends Controller {
             GisState.currentMapState.center,
             GisState.currentMapState.zoom
         );
-        map._container.classList.remove('bview-border');
+        map._container.classList.remove('bview-active');
     }
 }

webgis/js/gis.js

@@ -6,19 +6,10 @@ import Icons from "./icons.js";
 import { SphericalPhoto } from "./components/SphericalPhoto.js";
 import { GisState } from "./state.js";
 import Options from "./layer_options.js";
-import { saveCurrentState } from "./map.js";
+import { saveCurrentState, TECH_LAYERS } from "./map.js";
 
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
-// TODO: Use DB to handle these?
-const WALL_TECHNIQUES = [
-    'reticolata',
-    'incerta',
-    'mista',
-    'laterizia',
-    'cementizia',
-    'poligonale',
-];
 
 let API_URL = API_CONFIG.prod;
 
@@ -38,6 +29,8 @@ GIS.CENTER_COORDS = [40.5492, 14.2317];
 GIS.INIT_ZOOM = 14;
 GIS.MIN_ZOOM = 11;
 GIS.MAX_ZOOM = 24;
+GIS.BVIEW_MIN_ZOOM = 19;
+GIS.BVIEW_MAX_ZOOM = 25;
 
 // Terrible... fix it!
 export const INIT_ZOOM = 14;
@@ -135,29 +128,37 @@ GIS.activateBuildingView = async function(layerId) {
     // are placed correctly above the new base map
     GisState.layers.geometries.removeFrom(map);
     map.addLayer(GisState.baseLayers['Limiti amministrativi']);
-    //GisState.cartography.buildings.addTo(map);
     GisState.layers.geometries.addTo(map);
 
+    // TODO: move to function in Map module??
+    const wallLayers = [];
     // Cache!
-    const wallLayer = await this.loadGeoJSON(
-        `murarie/${layerId}/reticolata.geojson`,
-        // TODO: create color lookup table...
-        Options.walls,
-        true
-    );
+    for (let tech of TECH_LAYERS[layerId]) {
+        try {
+            const wallLayer = await this.loadGeoJSON(
+                `murarie/${layerId}/${tech}.geojson`,
+                Options.walls[tech],
+                true
+            );
 
-    wallLayer.addTo(map);
+            wallLayer.addTo(map);
+            wallLayers.push(wallLayer);
 
+        }
+        catch {
+            continue;
+        }
+    }
     // The group of all added walls...
-    GisState.layers.walls = L.layerGroup([wallLayer]);
+    GisState.layers.walls = L.featureGroup(wallLayers);
 
     map.setView(
-        wallLayer.getBounds().getCenter(),
+        GisState.layers.walls.getBounds().getCenter(),
         20,
         {animate: false},
     );
-    map.setMinZoom(19);
-    map.setMaxZoom(25);
+    map.setMinZoom(this.BVIEW_MIN_ZOOM);
+    map.setMaxZoom(this.BVIEW_MAX_ZOOM);
     // This is terrible...
     UI.addBuildingViewBar();
     map._container.classList.add('bview-active');

webgis/js/layer_options.js

@@ -53,11 +53,27 @@ Options.boundaries = {
     fillOpacity: 1,
 };
 Options.walls = {
-    color: '#10ee47',
-    fillColor: '#10ee47',
-    fillOpacity: 1,
-    opacity: 1,
-    weight: 4.5,
+    "reticolata" : {
+        color: '#10ee47',
+        fillColor: '#10ee47',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 4.5,
+    },
+    "mista" : {
+        color: '#f0280f',
+        fillColor: '#f0280f',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 4.5,
+    },
+    "incerta" : {
+        color: '#133cee',
+        fillColor: '#133cee',
+        fillOpacity: 1,
+        opacity: 1,
+        weight: 4.5,
+    }
 };
 Options.cluster = {
     spiderfyOnMaxZoom: false,

webgis/js/map.js

@@ -5,6 +5,13 @@ import { GisState } from "./state.js";
  * @module Map
  */
 
+export const TECH_LAYERS = {
+    "tiberio" : [
+        "incerta",
+        "mista",
+        "reticolata",
+    ],
+};
 /**
  * Saves the current state of the map
  * @param {L.Map} map 

webgis/js/state.js

@@ -49,7 +49,7 @@ export const GisState = {
     layers: {
         geometries: {},
         /**
-         * @type {L.LayerGroup}
+         * @type {L.FeatureGroup}
          */
         walls: {},
         sites: {},