Add layers + update UI

js/gis.js

@@ -11,12 +11,12 @@ const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg
 const GIS = {};
 
 GIS.CENTER_COORDS = [40.5492, 14.2317];
-GIS.INIT_ZOOM = 14;
+GIS.INIT_ZOOM = 15;
 const optionsVincoli = {
     color: '#222',
     opacity: 0.8,
     weight: 1,
-    fillColor: '#987db7',
+    fillColor: '#fa7861',
     fillOpacity: 0.8
 };
 const optionsSiti = {
@@ -27,6 +27,13 @@ const optionsSiti = {
     fillOpacity: 0.8
 };
 const optionsPaesistici = {
+    color: '#222',
+    opacity: 1,
+    weight: 1.5,
+    fillColor: '#88d28d',
+    fillOpacity: 0.8
+};
+const optionsFabbricati = {
     color: '#222',
     opacity: 1,
     weight: 1.5,
@@ -75,7 +82,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     
     let map = L.map(mapId, {
         attributionControl: false,
-        minZoom: 11,
+        minZoom: 2,
     }).setView(this.CENTER_COORDS, zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
@@ -141,6 +148,8 @@ GIS.initLayers = async function(map) {
     let layerGradolaArea = await this.loadLayer('gradola_area.geojson', optionsSiti, false);
     let layerMura = await this.loadLayer('mura.geojson', optionsSiti, false);
     let layerSanMichele = await this.loadLayer('san_michele.geojson', optionsSiti, false);
+    let layerDamecuta = await this.loadLayer('damecuta.geojson', optionsSiti, false);
+    let layerTiberio = await this.loadLayer('tiberio.geojson', optionsSiti, false);
 
     layerMater.id = 'matermania';
     layerMaterArea.id = 'matermania_area';
@@ -150,6 +159,8 @@ GIS.initLayers = async function(map) {
     layerArsenaleArea.id = 'arsenale_area';
     layerMura.id = 'mura';
     layerSanMichele.id = 'san_michele';
+    layerDamecuta.id = 'damecuta';
+    layerTiberio.id = 'tiberio';
 
     let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
     // TODO named parameters??
@@ -168,7 +179,7 @@ GIS.initLayers = async function(map) {
         attribution: '© Mapbox'
     });
     let boundaries = await this.loadLayer('confini.geojson', {}, false);
-    let buildings = await this.loadLayer('fabbricati.geojson', optionsPaesistici, false);
+    let buildings = await this.loadLayer('fabbricati.geojson', optionsFabbricati, false);
     let baseCatasto = new L.LayerGroup([buildings, boundaries]);
 
     const sitesGroup = new L.LayerGroup([
@@ -180,6 +191,8 @@ GIS.initLayers = async function(map) {
         layerArsenaleArea,
         layerMura,
         layerSanMichele,
+        layerDamecuta,
+        layerTiberio,
     ]);
     const baseGroup = new L.LayerGroup([osmap]);
     baseGroup.addTo(map);
@@ -191,8 +204,10 @@ GIS.initLayers = async function(map) {
     };
     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,

js/ui.js

@@ -173,12 +173,8 @@ UI.openModal = async function (data) {
 	const modalBg = modal.querySelector('.modal-background');
 	const closeModal = () => modal.classList.remove('is-active');
 	// CLose modal when clicking either on the X button or on the background
-	closeBtn.addEventListener('click', () => {
-		closeModal();
-	});
-	modalBg.addEventListener('click', () => {
-		closeModal();
-	});
+	closeBtn.addEventListener('click', () => closeModal());
+	modalBg.addEventListener('click', () => closeModal());
 
 	this.imageGallery('gallery-1', data.surveys);
 	this.imageGallery('gallery-2', data.photos);