nicolo/caprigis
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Custom icon for sites + marker layer

Browse Source
This commit is contained in:
Nicolò P 2024-11-12 16:24:59 +01:00
parent c315620be0
commit c83dff30dc
2 changed files with 54 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
img/icons/siti.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 38 KiB

95
js/gis.js
View File

@ -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