Handle layers and geoJSON (draft)

js/caprigis.js

@@ -12,42 +12,67 @@ const BASE_URL = location.href;
  * @param {number} zoomLevel
  * @returns {Map}
  */
-GIS.initMap = function (mapId, zoomLevel = 15) {
+GIS.initMap = async function (mapId, zoomLevel = 15) {
+    let layerVincoli = await this.loadLayer('vincoli.geojson');
+    let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+    });
     let map = L.map(mapId, {
         attributionControl: false,
-        minZoom: 3
+        minZoom: 6,
+        layers: [osmap, layerVincoli]
     }).setView([40.5492, 14.2317], zoomLevel);
 
+    map.crs = L.CRS.EPSG4326;
+
+    const baseMap = {
+        "Mappa di base (OpenStreetMap)" : osmap
+    };
+    const archeoConstraints = {
+        "Vincoli archeologici" : layerVincoli
+    };
+
+    let layerControl = L.control.layers(baseMap, archeoConstraints).addTo(map);
+
+    //DEBUG
     // Il sistema di riferimento per i livelli geoJSON è EPSG3857
-    map.crs = L.CRS.EPSG3857;
-
-    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
-        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
-    }).addTo(map);
-
-    return map;
 }
 /**
  * @param {string} geoJSON 
  * @param {Map} map 
  */
-GIS.loadLayer = async function (geoJSON, map, color = '#555') {
+GIS.loadLayer = async function (geoJSON, color = '#987db7') {
-    const layer = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
+    const data = await fetch(`${BASE_URL}/geojson/${geoJSON}`)
         .then(res => res.json())
         .catch(error => console.error(`Can't load layer ${geoJSON}. Reason: ${error}`));
 
-    L.geoJson(layer, {
+    console.log(data.features);
+
+    // Show data from feature in popUp?
+    const layer = new L.geoJson(data, {
         style: function (feature) {
             let style = {
-                color: color,
+                color: '#222',
-                opacity: 0.4,
+                opacity: 0.8,
-                weight: 2,
+                weight: 1,
                 fillColor: color,
-                fillOpacity: 1
+                fillOpacity: 0.8
             };
             return style;
+        },
+        onEachFeature: function (feature, layer) {
+            layer.bindPopup(`
+                <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>
+            `);
         }
-    }).addTo(map);
+    });
+
+    return layer;
 }
 
 export default GIS;

js/index.js

@@ -1,9 +1,9 @@
 import GIS from './caprigis.js';
 
 document.addEventListener('DOMContentLoaded', () => {
-    let map = GIS.initMap('map');
+    GIS.initMap('map');
 
     // Layer vincoli
-    GIS.loadLayer('vincoli.geojson', map);
+    //GIS.loadLayer('vincoli.geojson');
 
 });