WIP: load all wall techs for a given site

TODO: refactor!!

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');