Add Villa Bismarck geojson; refactor layer options

webgis/js/gis.js

@@ -5,6 +5,7 @@ import API_CONFIG from "./config.js";
 import Icons from "./icons.js";
 import { SphericalPhoto } from "./components/SphericalPhoto.js";
 import { GisState } from "./state.js";
+import Options from "./layer_options.js";
 
 const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
 const BASE_URL = location.href;
@@ -28,47 +29,6 @@ GIS.INIT_ZOOM = 14;
 GIS.MIN_ZOOM = 11;
 GIS.MAX_ZOOM = 24;
 
-const optionsVincoli = {
-    color: '#222',
-    opacity: 0.8,
-    weight: 1,
-    fillColor: '#fa7861',
-    fillOpacity: 0.8
-};
-const optionsSiti = {
-    color: '#800040',
-    opacity: 1,
-    weight: 1.5,
-    fillColor: '#800040',
-    fillOpacity: 0.8
-};
-const optionsGrotta = {
-    color: '#205dac',
-    opacity: 1,
-    weight: 1.5,
-    fillColor: '#205dac',
-    fillOpacity: 0.8
-}
-const optionsPaesistici = {
-    color: '#222',
-    opacity: 1,
-    weight: 1.5,
-    fillColor: '#88d28d',
-    fillOpacity: 0.8
-};
-const optionsFabbricati = {
-    color: '#222',
-    opacity: 1,
-    weight: 1.5,
-    fillColor: '#5b5d5f',
-    fillOpacity: 0.8
-};
-const clusterOptions = {
-    spiderfyOnMaxZoom: false,
-    showCoverageOnHover: false,
-    disableClusteringAtZoom: 19,
-};
-
 /**
  * Capitalize a text string
  * @todo Move to utils
@@ -108,8 +68,10 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     L.control.scale({imperial: false}).addTo(map);
     L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
 
-    let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
+    let layerVincoli = await this.loadGeoJSON('vincoli.geojson', Options.constraintsArch);
-    let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
+    let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', Options.constraintsLand);
+    let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
+    let buildings = await this.loadGeoJSON('fabbricati.geojson', Options.buildings, false);
 
     await this.addLayerGroups(map);
     await this.fetchCartographyLayers();
@@ -130,6 +92,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     );
     const cartography = {
         'Catasto Agenzia delle Entrate (zoom per visualizzare)' : wmsLayer,
+        'Limiti comuni' : boundaries,
+        'Fabbricati' : buildings,
         'Vincoli archeologici' : layerVincoli,
         'Vincoli paesaggistici' : layerPaesistici,
     };
@@ -137,8 +101,6 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     GisState.map = map;
 
-    //GisState.cartography.cadastral = wmsLayer;
-
     return map;
 }
 /**
@@ -210,15 +172,20 @@ GIS.sites = async function () {
     let sitesData = await fetch(`${API_URL}/sites`)
         .then(data => data.json());
 
-    let sites = L.markerClusterGroup(clusterOptions);
+    let sites = L.markerClusterGroup(Options.cluster);
     let geom = [];
 
     for (let record of sitesData) {
         if (record.geojson) {
             const options = record.gisId === 'grotta_azzurra' ?
-                optionsGrotta : optionsSiti;
+                Options.grotta : Options.site;
             geom.push(await this.loadSiteLayer(record, options));
         }
+        if (record.area) {
+            const options = record.gisId === 'villa_bismarck' ?
+                Options.bismarck : Options.site;
+            geom.push(await this.loadSiteLayer(record, options, false, true));
+        }
 
         const marker = L.marker(
                 record.coordinates,
@@ -250,7 +217,7 @@ GIS.notConserved = async function () {
     let notConserData = await fetch(`${API_URL}/not_conserved`)
         .then(data => data.json());
 
-    let notConserved = L.markerClusterGroup(clusterOptions);
+    let notConserved = L.markerClusterGroup(Options.cluster);
 
     for (let record of notConserData.records) {
         const marker = L.marker(
@@ -280,7 +247,7 @@ GIS.findings = async function () {
         .then(data => data.json());
 
     let findings = L.markerClusterGroup(
-        clusterOptions
+        Options.cluster
     );
 
     for (let record of findingsData) {
@@ -312,7 +279,7 @@ GIS.prehistoric = async function () {
         .then(data => data.json());
 
     let prehistoric = L.markerClusterGroup(
-        clusterOptions
+        Options.cluster
     );
 
     for (let record of data.records) {
@@ -344,7 +311,7 @@ GIS.underwater = async function () {
     let underwaterData = await fetch(`${API_URL}/underwater`)
         .then(data => data.json());
 
-    let underwater = L.markerClusterGroup(clusterOptions);
+    let underwater = L.markerClusterGroup(Options.cluster);
 
     for (let record of underwaterData.records) {
         const marker = L.marker(
@@ -369,7 +336,6 @@ GIS.underwater = async function () {
 /**
  * Adds layers to map and returns an object
  * with {baseMap, archeoLayers, sitesLayerGroup}
- * @todo Load areas for sites that have them!!
  * @param {L.Map} map 
  * @returns {{baseMap: {"OpenStreetMap": L.TileLayer}}}
  */
@@ -388,16 +354,12 @@ GIS.initLayers = async function(map) {
         maxZoom: GIS.MAX_ZOOM,
         attribution: '© Mapbox'
     });
-    let boundaries = await this.loadGeoJSON('confini.geojson', {}, false);
-    let buildings = await this.loadGeoJSON('fabbricati.geojson', optionsFabbricati, false);
-    let baseCatasto = new L.LayerGroup([buildings, boundaries]);
 
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);
     const baseMap = {
         "OpenStreetMap" : osmap,
         "Satellite" : mapbox,
-        "Fabbricati e limiti comuni" : baseCatasto,
     };
 
     return baseMap;
@@ -478,9 +440,10 @@ GIS.loadGeoJSON = async function (geoJSON, options, popup = true) {
  * @param {boolean} popup Should the features have a popup? 
  * @returns {L.Layer}
  */
-GIS.loadSiteLayer = async function (site, options, popup = true) {
+GIS.loadSiteLayer = async function (site, options, popup = true, area = false) {
-    const geoJSON = `${site.gisId}.geojson`;
+    let geoJSON = site.gisId;
-    const geo = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
+    geoJSON += area ? '_area.geojson' : '.geojson';
+    const geo = await fetch(`${BASE_URL}geojson/${geoJSON}`)
         .then(res => res.json())
         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
     

webgis/js/layer_options.js

@@ -0,0 +1,54 @@
+/**
+ * @namespace Options
+ */
+let Options = {};
+
+Options.constraintsArch = {
+    color: '#222',
+    opacity: 0.8,
+    weight: 1,
+    fillColor: '#fa7861',
+    fillOpacity: 0.8
+};
+Options.site = {
+    color: '#800040',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#800040',
+    fillOpacity: 0.8
+};
+Options.grotta = {
+    color: '#205dac',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#205dac',
+    fillOpacity: 0.8
+}
+Options.bismarck = {
+    color: '#a4a79a',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#a4a79a',
+    fillOpacity: 0.8
+}
+Options.constraintsLand = {
+    color: '#222',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#88d28d',
+    fillOpacity: 0.8
+};
+Options.buildings = {
+    color: '#222',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#5b5d5f',
+    fillOpacity: 0.8
+};
+Options.cluster = {
+    spiderfyOnMaxZoom: false,
+    showCoverageOnHover: false,
+    disableClusteringAtZoom: 19,
+};
+
+export default Options;