Add underwater sites

webgis/js/components/Underwater.js

@@ -0,0 +1,41 @@
+/**
+ * @class Underwater
+ */
+export class Underwater {
+    
+    /**
+     * @param {object} data
+     */
+    set data(data) {
+        this._data = data;
+    }
+
+    async render() {
+        return `
+        <div class="container px-4 pt-4">
+            <p class="p-2">
+                <strong>Denominazione:</strong> ${this._data.denomination}
+            </p>
+            <p class="p-2">
+                <strong>Località generica:</strong> ${this._data.genericPlace}
+            </p>
+            <p class="p-2">
+                <strong>Periodo:</strong> ${this._data.period}
+            </p>
+            <p class="p-2">
+                <strong>Stato di conservazione:</strong> ${this._data.conservationState}
+            </p>
+            <p class="mt-4 pl-2 pr-5">
+                <strong class="pb-3">Descrizione breve</strong></br>
+                ${this._data.shortDescription}
+            </p>
+            <p class="p-2 mb-4">
+                <strong>Autore scheda:</strong> ${this._data.author}
+            </p>
+        </div>`;
+    }
+
+    async fetchData(url) {
+        return await fetch(url).then(res => res.json());
+    }
+}

webgis/js/controllers/layer_controller.js

@@ -15,6 +15,7 @@ export default class extends Controller {
             'non-conser': window.NotConserved,
             'rinv': window.Findings,
             'preist': window.Prehistoric,
+            'subacquei': window.Underwater,
         }
 
         let group = layers[id];

webgis/js/gis.js

@@ -120,6 +120,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
     this.notConserved().then(group => {group.addTo(map); window.NotConserved = group});
     this.findings().then(group => {group.addTo(map); window.Findings = group});
     this.prehistoric().then(group => {group.addTo(map); window.Prehistoric = group});
+    this.underwater().then(group => {group.addTo(map); window.Underwater = group});
 
     const archeo = {
         'Vincoli archeologici' : layerVincoli,
@@ -237,6 +238,30 @@ GIS.prehistoric = async function () {
 
     return prehistoric;
 }
+/**
+ * Create underwater sites group
+ * @returns {L.MarkerClusterGroup}
+ */
+GIS.underwater = async function () {
+    let underwaterData = await fetch(`${API_URL}/underwater`)
+        .then(data => data.json());
+
+    let underwater = L.markerClusterGroup(clusterOptions);
+
+    for (let record of underwaterData.records) {
+        underwater.addLayer(L.marker(
+                record.coordinates,
+                {icon: Icons.underwater}
+            ).bindTooltip(record.denomination)
+            .on(
+                'click',
+                () => UI.openUnderwaterModal(record, '#underwater-data')
+            )
+        );
+    }
+
+    return underwater;
+}
 /**
  * Adds layers to map and returns an object
  * with {baseMap, archeoLayers, sitesLayerGroup}

webgis/js/icons.js

@@ -39,6 +39,15 @@ Icons.prehistoric = L.icon(
     }
 );
 
+Icons.underwater = L.icon(
+    {
+        iconUrl: 'img/icons/subacquei.png',
+        iconSize: [18, 27],
+        iconAnchor: [10, 24],
+        tooltipAnchor: [0, -22],
+    }
+);
+
 Icons.camera = L.divIcon({className: 'fa fa-camera'});
 
 export default Icons;

webgis/js/ui.js

@@ -8,6 +8,7 @@ import { SiteMedia } from './components/SiteMedia.js';
 import { NotConserved } from './components/NotConserved.js';
 import { Finding } from './components/Finding.js';
 import { Prehistoric } from './components/Prehistoric.js';
+import { Underwater } from './components/Underwater.js';
 
 /**
  * @namespace UI
@@ -213,6 +214,22 @@ UI.openPrehistModal = function (data, selector) {
 	prehistoric.render().then(html => modal.querySelector('#prehist-sheet').innerHTML = html);
 	modal.classList.add('is-active');
 }
+/**
+ * @todo Biblio?
+ * @param {object} data The data retrieved from the DB to display as modal content
+ * @param {string} selector The modal selector
+ */
+UI.openUnderwaterModal = function (data, selector) {
+	const modal = document.querySelector(selector);
+	
+	let underwater = new Underwater();
+	underwater.data = data;
+
+	// For Stimulus biblio_controller
+	//window.Biblio = prehistoric;
+	underwater.render().then(html => modal.querySelector('#underwater-sheet').innerHTML = html);
+	modal.classList.add('is-active');
+}
 /**
  * Open Spotlight gallery
  * @param {string} galleryId The id of the trigger element