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

Change how site layers are added (draft)

Browse Source
This commit is contained in:
Nicolò P
2024-06-04 15:43:00 +02:00
parent 0e3e5b19ac
commit 533bbb373f
5 changed files with 71 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
js/caprigis.js
View File

@@ -58,7 +58,8 @@ function capitalize(text) {
*/
GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
let layerSiti = await this.loadLayer('siti.geojson', optionsSiti, false);
let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false);
let layerArsenale = await this.loadLayer('arsenale_planim.geojson', optionsSiti, false);
// TODO named parameters??
let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
let osmap = new L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -69,7 +70,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let map = L.map(mapId, {
attributionControl: false,
minZoom: 11,
layers: [osmap, layerVincoli, layerSiti, layerPaesistici]
layers: [osmap, layerVincoli, layerMater, layerArsenale, layerPaesistici]
}).setView(this.CENTER_COORDS, zoomLevel);
map.crs = L.CRS.EPSG4326;
@@ -78,7 +79,8 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
"Mappa di base (OpenStreetMap)" : osmap
};
const archeo = {
"Siti indagati" : layerSiti,
"Grotta di Matermania" : layerMater,
"Grotta dell'Arsenale" : layerArsenale,
"Vincoli archeologici" : layerVincoli,
"Vincoli paesistici" : layerPaesistici,
};
@@ -86,7 +88,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let layerControl = L.control.layers(baseMap, archeo).addTo(map);
// TODO Horrible?
return {map: map, sites: layerSiti};
return {map: map, sites: archeo};
}
/**
* @todo Distinguere tipo di geojson per contenuto popup
@@ -125,11 +127,11 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
GIS.featurePopup = function (layerName, feature) {
const html = `
<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>${capitalize(feature.properties.COMUNE)}</td></tr>
<tr><td class="text-bold">Località</td><td>${capitalize(feature.properties.LOCALITA)}</td></tr>
<tr><td class="text-bold">Proprietà</td><td>${capitalize(feature.properties.PROPRIETA)}</td></tr>
<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>${capitalize(feature.properties.COMUNE)}</td></tr>
<tr><td class="text-bold">Località</td><td>${capitalize(feature.properties.LOCALITA)}</td></tr>
<tr><td class="text-bold">Proprietà</td><td>${capitalize(feature.properties.PROPRIETA)}</td></tr>
</table>
`;
const content = {

9
js/index.js
View File

@@ -7,6 +7,11 @@ document.addEventListener('DOMContentLoaded', async () => {
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
const centerCoords = sites.getBounds().getCenter();
UI.addSitesControl(map, centerCoords, 'Grotta di Matermania');
for (let site of Object.keys(sites)) {
if (!site.includes('Vincoli')) {
let layer = sites[site];
const centerCoords = layer.getBounds().getCenter();
UI.addSitesControl(map, centerCoords, site, GIS.INIT_ZOOM);
}
}
});

28
js/ui.js
View File

@@ -5,6 +5,25 @@
*/
const UI = {};
const centerIcon = `<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
style="margin-top: 3px"
>
<path
d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
fill="currentColor"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M12 3C12.5523 3 13 3.44772 13 4V5.07089C16.0657 5.5094 18.4906 7.93431 18.9291 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H18.9291C18.4906 16.0657 16.0657 18.4906 13 18.9291V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V18.9291C7.93431 18.4906 5.5094 16.0657 5.07089 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H5.07089C5.5094 7.93431 7.93431 5.5094 11 5.07089V4C11 3.44772 11.4477 3 12 3ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z"
fill="currentColor"
/>
</svg>`;
const siteIcon = `<svg
width="24"
height="24"
@@ -47,7 +66,7 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove', controlDiv);
controlUI.title = 'Centra la mappa';
controlUI.href = '#';
controlUI.innerHTML = siteIcon;
controlUI.innerHTML = centerIcon;
return controlDiv;
}
});
@@ -59,9 +78,9 @@ UI.addCenterMapControl = function (map, centerCoords, zoom) {
*
* @param {Map} map
* @param {LatLng} coordinates
* @param {string} popupContent
* @param {string} popupContent The site's name
*/
UI.addSitesControl = function (map, coordinates, popupContent) {
UI.addSitesControl = function (map, coordinates, popupContent, initZoom = 15) {
const popUpCoords = L.latLng(coordinates.lat + 0.0001, coordinates.lng);
L.Control.SiteControl = L.Control.extend({
options: {
@@ -73,6 +92,7 @@ UI.addSitesControl = function (map, coordinates, popupContent) {
.addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
.addListener(controlDiv, 'click', L.DomEvent.preventDefault)
.addListener(controlDiv, 'click', function () {
map.setZoom(initZoom);
map.setView(
coordinates,
19,
@@ -85,7 +105,7 @@ UI.addSitesControl = function (map, coordinates, popupContent) {
});
let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove site-control', controlDiv);
controlUI.title = 'Vai al sito';
controlUI.title = `Vai a ${popupContent}`;
controlUI.href = '#';
controlUI.innerHTML = siteIcon;
return controlDiv;