diff --git a/img/icons/siti.png b/img/icons/siti.png new file mode 100644 index 0000000..4dcfe67 Binary files /dev/null and b/img/icons/siti.png differ diff --git a/js/gis.js b/js/gis.js index a9f12ee..a48838d 100644 --- a/js/gis.js +++ b/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); - - L.control.layers( - baseMap, - archeo, - ) - .addTo(map); + const {baseMap, sitesGroup} = await this.initLayers(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 => { - const fromStorage = localStorage.getItem(layer.id); + let sitesMarkers = []; + 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 lon = data?.lon ?? coords[1]; + const lat = data?.lat ?? coords.lat; + 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! - if (!layer.id.includes('area')) { - const marker = L.marker(coords) - .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')); - } - } - }); + const marker = L.marker(coords, { icon: siteIcon }) + .bindTooltip(MARKER_NAMES.sites[id]) + .openTooltip(); + + 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