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

Adjust active layers + refine menu

Browse Source
This commit is contained in:
Nicolò P 2024-06-12 10:56:14 +02:00
parent b610ecef54
commit 72f90fff47
4 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
geojson/arsenale_planim.geojson → geojson/arsenale.geojson
View File

13
index.html
View File

@ -33,13 +33,20 @@
<div class="main columns"> <div class="main columns">
<div class="column is-hidden" id="menu"> <div class="column is-hidden" id="menu">
<aside class="menu ml-4"> <aside class="menu ml-4">
<p class="menu-label">Siti indagati</p> <p class="menu-label">
Siti indagati
<button title="Chiudi menu" class="button is-small is-pulled-right" id="close-menu">
<span class="icon is-small">
<i class="fa fa-chevron-left"></i>
</span>
</button>
</p>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
<a class="button" id="gradola"> <a class="button" title="Vai al sito Villa di Gradola" id="gradola">
Villa di Gradola Villa di Gradola
</a> </a>
<a class="button" id="matermania"> <a class="button" title="Vai al sito Grotta di Matermania" id="matermania">
Grotta di Matermania Grotta di Matermania
</a> </a>
<a class="button" id="arsenale"> <a class="button" id="arsenale">

17
js/caprigis.js
View File

@ -9,7 +9,7 @@ import UI from "./ui.js";
const GIS = {}; const GIS = {};
GIS.CENTER_COORDS = [40.5492, 14.2317]; GIS.CENTER_COORDS = [40.5492, 14.2317];
GIS.INIT_ZOOM = 14.5; GIS.INIT_ZOOM = 14;
const optionsVincoli = { const optionsVincoli = {
color: '#222', color: '#222',
opacity: 0.8, opacity: 0.8,
@ -89,14 +89,21 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
// TODO Horrible? // TODO Horrible?
return {map: map, sites: sitesGroup}; return {map: map, sites: sitesGroup};
} }
/**
* Adds layers to map and returns an object
* with {baseMap, archeoLayers, sitesLayerGroup}
*
* @param {L.Map} map
* @returns {{baseMap: {"OpenStreetMap": L.TileLayer}, archeo: object, sitesGroup: L.LayerGroup}}
*/
GIS.initLayers = async function(map) { GIS.initLayers = async function(map) {
let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false); let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false);
let layerArsenale = await this.loadLayer('arsenale_planim.geojson', optionsSiti, false); let layerArsenale = await this.loadLayer('arsenale.geojson', optionsSiti, false);
let layerGradola = await this.loadLayer('gradola.geojson', optionsSiti, false); let layerGradola = await this.loadLayer('gradola.geojson', optionsSiti, false);
layerMater.id = 'matermania'; layerMater.id = 'matermania';
layerGradola.id = 'gradola'; layerGradola.id = 'gradola';
layerArsenale.id = 'arsenale_planim'; layerArsenale.id = 'arsenale';
let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli); let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
// TODO named parameters?? // TODO named parameters??
let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici); let layerPaesistici = await this.loadLayer('paesistici.geojson', optionsPaesistici);
@ -107,11 +114,11 @@ GIS.initLayers = async function(map) {
}); });
const sitesGroup = new L.LayerGroup([layerMater, layerGradola, layerArsenale]); const sitesGroup = new L.LayerGroup([layerMater, layerGradola, layerArsenale]);
const baseGroup = new L.LayerGroup([osmap, layerVincoli, layerPaesistici]); const baseGroup = new L.LayerGroup([osmap]);
baseGroup.addTo(map); baseGroup.addTo(map);
sitesGroup.addTo(map); sitesGroup.addTo(map);
const baseMap = { const baseMap = {
"Mappa di base (OpenStreetMap)" : osmap "OpenStreetMap" : osmap
}; };
const archeo = { const archeo = {
"Villa di Gradola" : layerGradola, "Villa di Gradola" : layerGradola,

4
js/ui.js
View File

@ -97,8 +97,10 @@ UI.openModal = async function (data) {
* @param {L.LayerGroup} sites * @param {L.LayerGroup} sites
*/ */
UI.sitesMenu = function (menuListSel, map, sites) { UI.sitesMenu = function (menuListSel, map, sites) {
const menu = document.querySelector(menuListSel); // Close menu if arrow button is clicked...
this.toggleMenu('close-menu');
const menu = document.querySelector(menuListSel);
menu.addEventListener('click', event => { menu.addEventListener('click', event => {
if (event.target.nodeName === 'A') { if (event.target.nodeName === 'A') {
// zoom to layer... // zoom to layer...