diff --git a/package.json b/package.json index ea0070b..e18b6d0 100644 --- a/package.json +++ b/package.json @@ -17,5 +17,8 @@ }, "devDependencies": { "standard": "^17.1.2" + }, + "scripts": { + "start": "symfony server:start --port=3000" } } diff --git a/webgis/js/controllers/bview_controller.js b/webgis/js/controllers/bview_controller.js index 3df62cc..0cea3d5 100644 --- a/webgis/js/controllers/bview_controller.js +++ b/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); diff --git a/webgis/js/gis.js b/webgis/js/gis.js index 149cc7d..ea99b87 100644 --- a/webgis/js/gis.js +++ b/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); }); diff --git a/webgis/js/map.js b/webgis/js/map.js new file mode 100644 index 0000000..b684213 --- /dev/null +++ b/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 +} \ No newline at end of file