UI revamp; additional features (draft)

js/caprigis.js

@@ -1,4 +1,7 @@
 'use strict';
+
+import UI from "./ui.js";
+
 // Global leaflet
 /**
  * @namespace GIS
@@ -6,7 +9,7 @@
 const GIS = {};
 
 GIS.CENTER_COORDS = [40.5492, 14.2317];
-GIS.INIT_ZOOM = 15;
+GIS.INIT_ZOOM = 14.5;
 const optionsVincoli = {
     color: '#222',
     opacity: 0.8,
@@ -60,6 +63,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
     let layerMater = await this.loadLayer('matermania.geojson', optionsSiti, false);
     let layerArsenale = await this.loadLayer('arsenale_planim.geojson', optionsSiti, false);
+    let layerGradola = await this.loadLayer('gradola.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', {
@@ -70,7 +74,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     let map = L.map(mapId, {
         attributionControl: false,
         minZoom: 11,
-        layers: [osmap, layerVincoli, layerMater, layerArsenale, layerPaesistici]
+        layers: [osmap, layerVincoli, layerMater, layerGradola, layerArsenale, layerPaesistici]
     }).setView(this.CENTER_COORDS, zoomLevel);
 
     map.crs = L.CRS.EPSG4326;
@@ -79,13 +83,19 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
         "Mappa di base (OpenStreetMap)" : osmap
     };
     const archeo = {
+        "Villa di Gradola" : layerGradola,
         "Grotta di Matermania" : layerMater,
         "Grotta dell'Arsenale" : layerArsenale,
         "Vincoli archeologici" : layerVincoli,
         "Vincoli paesistici" : layerPaesistici,
     };
 
-    let layerControl = L.control.layers(baseMap, archeo).addTo(map);
+    let layerControl = L.control.layers(
+            baseMap,
+            archeo,
+            {collapsed: false}
+        )
+        .addTo(map);
 
     // TODO Horrible?
     return {map: map, sites: archeo};
@@ -111,6 +121,12 @@ GIS.loadLayer = async function (geoJSON, options, popup = true) {
             if (popup) {
                 layer.bindPopup(GIS.featurePopup(geoJSON, feature));
             }
+            else {
+                layer.on("click", async () => {
+                    const data = await GIS._fetchData(geoJSON.replace('.geojson', ''));
+                    UI.openModal(data);
+                });
+            }
         }
     });
 
@@ -141,5 +157,14 @@ GIS.featurePopup = function (layerName, feature) {
 
     return content[layerName];
 }
+/**
+ * Fetch data from DB using API
+ * @todo Actually implement it...
+ * @param {string} recordId
+ */
+GIS._fetchData = async function (recordId) {
+    //const data = await fetch()
+    return recordId;
+}
 
 export default GIS;

js/index.js

@@ -6,7 +6,9 @@ document.addEventListener('DOMContentLoaded', async () => {
     let {map, sites} = init;
 
     UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
+    UI.toggleMenu('siti');
 
+    /*
     for (let site of Object.keys(sites)) {
         if (!site.includes('Vincoli')) {
             let layer = sites[site];
@@ -14,4 +16,5 @@ document.addEventListener('DOMContentLoaded', async () => {
             UI.addSitesControl(map, centerCoords, site, GIS.INIT_ZOOM);
         }
     }
+    */
 });

js/package.json

@@ -6,6 +6,7 @@
   "license": "GPLv3",
   "dependencies": {
     "bulma": "^1.0.1",
+    "fontawesome-free": "^1.0.4",
     "leaflet": "^1.9.4"
   }
 }

js/ui.js

@@ -115,5 +115,40 @@ UI.addSitesControl = function (map, coordinates, popupContent, initZoom = 15) {
     let siteCtr = new L.Control.SiteControl();
     map.addControl(siteCtr);
 }
+/**
+ * 
+ * @param {string} triggerId The ID of the trigger element
+ */
+UI.toggleMenu = function (triggerId) {
+	const trigger = document.querySelector(`#${triggerId}`);
+	trigger.addEventListener('click', () => {
+		const menu = document.querySelector('#menu');
+		menu.classList.toggle('is-hidden');
+		menu.classList.toggle('is-2');
+		document.querySelector('#map').parentElement.classList.toggle('is-full');
+	})
+}
+/**
+ * Open a modal with DB data
+ * @param {object} data The data retrieved from the DB to display as modal content
+ */
+UI.openModal = async function (data) {
+	const modal = document.querySelector('.modal');
+	// DEBUG
+	modal.querySelector('.modal-content').innerHTML = `
+		<p class="has-text-centered is-size-5">${data}</p>
+	`;
+	modal.classList.add('is-active');
+	const closeBtn = modal.querySelector('.modal-close');
+	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();
+	});
+}
 
 export default UI;

js/yarn.lock

@@ -7,6 +7,11 @@ bulma@^1.0.1:
   resolved "https://registry.yarnpkg.com/bulma/-/bulma-1.0.1.tgz#e37261d6f8e1a3494c9378803d9958effb2715ce"
   integrity sha512-+xv/BIAEQakHkR0QVz+s+RjNqfC53Mx9ZYexyaFNFo9wx5i76HXArNdwW7bccyJxa5mgV/T5DcVGqsAB19nBJQ==
 
+fontawesome-free@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/fontawesome-free/-/fontawesome-free-1.0.4.tgz#c7c499708dabd59eb5dedf232b590a862e05957b"
+  integrity sha512-7sX6Lbg2oQiClFFFFitJlKg20h3YTBON6rdmq3uGjNwDo8G6EjF2bfj2OjjcCUmf4OvZCgyHaXfW2JseqissLw==
+
 leaflet@^1.9.4:
   version "1.9.4"
   resolved "https://registry.yarnpkg.com/leaflet/-/leaflet-1.9.4.tgz#23fae724e282fa25745aff82ca4d394748db7d8d"