Fix building view animation + some refactoring

package.json

@@ -17,5 +17,8 @@
   },
   "devDependencies": {
     "standard": "^17.1.2"
+  },
+  "scripts": {
+    "start": "symfony server:start --port=3000"
   }
 }

webgis/js/controllers/bview_controller.js

@@ -18,7 +18,14 @@ export default class extends Controller {
         // Restore previous map state before closing view
         const map = GisState.map;
         map.removeLayer(GisState.baseLayers['Limiti amministrativi']);
-        map.removeLayer(GisState.cartography.buildings);
+        //map.removeLayer(GisState.cartography.buildings);
+
+        const walls = GisState.layers.walls;
+
+        // map.removeLayer(GisState.layers.walls) doesn't work, i.e.
+        // 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);

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 = {};
+    saveCurrentState(map);
-    for (let key of Object.keys(GisState.baseLayers)) {
+    let currentBase = GisState.currentMapState.baseLayer;
-        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 = {};
 
     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 => {
+    // Cache!
-        if (l.options.id === layerId) {
-            currentGeometry = l;
-            return;
-        }
-    });
-
-    // TODO: Use DB to handle these?
-    const wallTechniques = [
-        'reticolata',
-        'incerta',
-        'mista',
-        'laterizia',
-        'cementizia',
-        'poligonale',
-    ];
-
     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);
             });
 

webgis/js/map.js

@@ -0,0 +1,31 @@
+import { GisState } from "./state.js";
+
+/**
+ * Functions / utilities to manipulate the Leaflet map
+ * @module Map
+ */
+
+/**
+ * Saves the current state of the map
+ * @param {L.Map} map 
+ */
+export function saveCurrentState(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(),
+    }
+}
+
+function getCurrentState() {
+    //TODO
+}