Add more layers

js/caprigis.js

@@ -13,14 +13,19 @@ const BASE_URL = location.href;
  * @returns {Map}
  */
 GIS.initMap = async function (mapId, zoomLevel = 15) {
+    let layerSiti = await this.loadLayer('siti.geojson', '#800040');
     let layerVincoli = await this.loadLayer('vincoli.geojson');
+    // TODO named parameters??
+    let layerPaesistici = await this.loadLayer('paesistici.geojson', '#222', '#ff8000');
     let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        maxNativeZoom : 22,
+        maxZoom: 22,
         attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
     });
     let map = L.map(mapId, {
         attributionControl: false,
         minZoom: 11,
-        layers: [osmap, layerVincoli]
+        layers: [osmap, layerVincoli, layerSiti, layerPaesistici]
     }).setView([40.5492, 14.2317], zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
@@ -28,11 +33,13 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
     const baseMap = {
         "Mappa di base (OpenStreetMap)" : osmap
     };
-    const archeoConstraints = {
-        "Vincoli archeologici" : layerVincoli
+    const archeo = {
+        "Siti indagati" : layerSiti,
+        "Vincoli archeologici" : layerVincoli,
+        "Vincoli paesistici" : layerPaesistici,
     };
 
-    let layerControl = L.control.layers(baseMap, archeoConstraints).addTo(map);
+    let layerControl = L.control.layers(baseMap, archeo).addTo(map);
 
     //DEBUG
     // Il sistema di riferimento per i livelli geoJSON è EPSG3857
@@ -42,7 +49,7 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
  * @param {string} geoJSON 
  * @param {Map} map 
  */
-GIS.loadLayer = async function (geoJSON, color = '#987db7') {
+GIS.loadLayer = async function (geoJSON, color = '#222', fillColor = '#987db7') {
     const data = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
         .then(res => res.json())
         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
@@ -54,10 +61,10 @@ GIS.loadLayer = async function (geoJSON, color = '#987db7') {
     const layer = new L.geoJson(data, {
         style: function (feature) {
             let style = {
-                color: '#222',
+                color: color,
                 opacity: 0.8,
                 weight: 1,
-                fillColor: color,
+                fillColor: fillColor,
                 fillOpacity: 0.8
             };
             return style;
@@ -87,6 +94,14 @@ GIS.featurePopup = function (layerName, feature) {
                 <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr>
                 </table>
             `,
+        'paesistici.geojson' : `
+                <table class="table m-2">
+                <tr><td class="text-bold">Oggetto</td><td>${feature.properties.OGGETTO}</td></tr>
+                <tr><td class="text-bold">Anno</td><td>${feature.properties.ANNO}</td></tr>
+                <tr><td class="text-bold">Comune</td><td>${feature.properties.COMUNE}</td></tr>
+                <tr><td class="text-bold">Proprietà</td><td>${feature.properties.PROPRIETA}</td></tr>
+                </table>
+            `,
     };
 
     return content[layerName];