Fix building view animation + some refactoring

webgis/js/gis.js

@@ -6,9 +6,19 @@ 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";
 
 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;
 
@@ -117,51 +127,18 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
  */
 GIS.activateBuildingView = async function(layerId) {
     const map = GisState.map;
-    let currentBase = {};
-    for (let key of Object.keys(GisState.baseLayers)) {
-        if (map.hasLayer(GisState.baseLayers[key])) {
-            currentBase = GisState.baseLayers[key];
-            break;
-        }
-    }
-    GisState.currentMapState = {
-        baseLayer: currentBase,
-        zoom: map.getZoom(),
-        center: map.getCenter(),
-        minZoom: map.getMinZoom(),
-        maxZoom: map.getMaxZoom(),
-    }
-
-    /**
-     * @type {L.GeoJSON} currentGeometry
-     */
-    let currentGeometry = {};
+    saveCurrentState(map);
+    let currentBase = GisState.currentMapState.baseLayer;
 
     map.removeLayer(currentBase);
     // Remove site layers then re-add it so vector lines
     // 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.cartography.buildings.addTo(map);
     GisState.layers.geometries.addTo(map);
 
-    GisState.layers.geometries.eachLayer(l => {
-        if (l.options.id === layerId) {
-            currentGeometry = l;
-            return;
-        }
-    });
-
-    // TODO: Use DB to handle these?
-    const wallTechniques = [
-        'reticolata',
-        'incerta',
-        'mista',
-        'laterizia',
-        'cementizia',
-        'poligonale',
-    ];
-
+    // Cache!
     const wallLayer = await this.loadGeoJSON(
         `murarie/${layerId}/reticolata.geojson`,
         // TODO: create color lookup table...
@@ -174,7 +151,11 @@ GIS.activateBuildingView = async function(layerId) {
     // The group of all added walls...
     GisState.layers.walls = L.layerGroup([wallLayer]);
 
-    map.setView(wallLayer.getBounds().getCenter(), 20);
+    map.setView(
+        wallLayer.getBounds().getCenter(),
+        20,
+        {animate: false},
+    );
     map.setMinZoom(19);
     map.setMaxZoom(25);
     // This is terrible...
@@ -546,7 +527,7 @@ GIS.toggleSpherical = async function(map) {
                 });
                 modal.querySelector('.modal-close').addEventListener('click', () => {
                     modal.classList.remove('is-active');
-                })
+                });
                 sPhoto.setViewer(pano.filename);
             });