Custom icon for sites + marker layer

js/gis.js

@@ -43,6 +43,18 @@ const optionsFabbricati = {
     fillOpacity: 0.8
 };
 
+const MARKER_NAMES = {
+    sites: {
+        'gradola' : 'Villa di Gradola',
+        'damecuta' : 'Villa di Damecuta',
+        'matermania' : 'Grotta di Matermania',
+        'arsenale' : 'Grotta dell\'Arsenale',
+        'tiberio' : 'Bagni di Tiberio',
+        'mura' : 'Mura greche',
+        'san_michele' : 'Villa San Michele',
+    },
+};
+
 /**
  * Capitalize a text string
  * @todo Move to utils
@@ -87,51 +99,64 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
 
     map.crs = L.CRS.EPSG4326;
 
-    const {baseMap, archeo, sitesGroup} = await this.initLayers(map);
+    const {baseMap, sitesGroup} = await this.initLayers(map);
-
-    L.control.layers(
-            baseMap,
-            archeo,
-        )
-        .addTo(map);
 
     // Add scale and ruler controls
     L.control.scale({imperial: false}).addTo(map);
     L.control.graphicScale({fill: 'hollow', position: 'bottomright'}).addTo(map);
 
-    sitesGroup.eachLayer(async layer => {
+    let sitesMarkers = [];
-        const fromStorage = localStorage.getItem(layer.id);
+    let siteIcon = L.icon(
+        {
+            iconUrl: '/img/icons/siti.png',
+            iconSize: [38, 58],
+            iconAnchor: [22, 57],
+            tooltipAnchor: [0, -46],
+        }
+    );
+
+    for (let id in MARKER_NAMES.sites) {
+        let layer = sitesGroup.customGetLayer(id);
+        const coords = layer.getBounds().getCenter();
+        const fromStorage = localStorage.getItem(id);
         let data = {};
-        let coords = layer.getBounds().getCenter();
 
         if (fromStorage !== 'undefined') {
             try {
                 data = JSON.parse(fromStorage);
-                const lat = data?.lat ?? coords[0];
+                const lat = data?.lat ?? coords.lat;
-                const lon = data?.lon ?? coords[1];
+                const lon = data?.lon ?? coords.lng;
                 coords = [lat, lon];
             } catch (error) {
                 console.log(error);
             }
         } else {
-            data = await GIS._fetchData(layer.id);
+            data = await GIS._fetchData(id);
         }
 
-        // TODO: terrible!
+        const marker = L.marker(coords, { icon: siteIcon })
-        if (!layer.id.includes('area')) {
+            .bindTooltip(MARKER_NAMES.sites[id])
-            const marker = L.marker(coords)
+            .openTooltip();
-                .addTo(map)
-                .bindTooltip(
-                    Object.keys(archeo).find(k => archeo[k] === layer)
-                        .replace(/\s\(.*$/, '')
-                )
-                .openTooltip();
         
-            if (typeof data === 'object') {
+        marker.on('click', () => UI.openModal(data, '#site-data'));
-                marker.on('click', () => UI.openModal(data, '#site-data'));
+
-            }
+        sitesMarkers.push(marker);
-        }
+    }
-    });
+
+    let markersGroup = L.layerGroup(sitesMarkers);
+
+    const archeo = {
+        'Beni archeologici (punti)' : markersGroup,
+        'Beni archeologici (strutture)' : sitesGroup,
+    };
+
+    markersGroup.addTo(map);
+    sitesGroup.addTo(map);
+
+    L.control.layers(
+        baseMap,
+        archeo,
+    ).addTo(map);
 
     // TODO Horrible?
     return {map: map, sites: sitesGroup};
@@ -234,25 +259,13 @@ GIS.initLayers = async function(map) {
     ]);
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);
-    sitesGroup.addTo(map);
     const baseMap = {
         "OpenStreetMap" : osmap,
         "Satellite" : mapbox,
         "Cartografia catastale" : baseCatasto,
     };
-    const archeo = {
-        "Villa di Gradola" : layerGradola,
-        "Villa di Damecuta" : layerDamecuta,
-        "Grotta di Matermania" : layerMater,
-        "Grotta dell'Arsenale" : layerArsenale,
-        "Bagni di Tiberio" : layerTiberio,
-        "Mura greche" : layerMura,
-        "Villa San Michele" : layerSanMichele,
-        "Vincoli archeologici" : layerVincoli,
-        "Vincoli paesistici" : layerPaesistici,
-    };
 
-    return {baseMap, archeo, sitesGroup};
+    return {baseMap, sitesGroup};
 }
 /**
  * @todo Distinguere tipo di geojson per contenuto popup