Add underwater sites

webgis/index.html

@@ -527,6 +527,47 @@
                         </ul>
                     </li>
                 </ul>
+                <p class="menu-label is-size-5 is-clickable" data-id="subacquei">
+                     <span class="icon pl-1 mr-2 is-small" title="Nascondi" data-layer-target="underwater" data-action="click->layer#toggle">
+                        <i class="fa fa-xs fa-eye-slash" data-layer-target="icon"></i>
+                    </span>
+                    <span class="icon pr-1">
+                        <img class="image" src="img/icons/subacquei_menu.png"/>
+                    </span>
+                    <span data-action="click->menu#toggle" data-id="subacquei">
+                        Giacimenti subacquei
+                        <span class="icon pl-2">
+                            <i class="fa fa-chevron-right" data-menu-target="icon" data-id="subacquei"></i>
+                        </span>
+                    </span>
+                </p>
+                <ul class="menu-list is-hidden" id="subacquei-list" data-menu-target="list" data-controller="marker">
+                    <li>
+                        <a class="button" data-action="marker#go" data-coords="40.5511022 14.1910274">
+                            Bocca Grande - relitto con carico
+                        </a>
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-coords="40.5579004 14.2363139">
+                            Marina Grande - strutture portuali
+                        </a>
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-coords="40.5649884 14.1940185">
+                            Punta dell’Arcera - relitto con carico
+                        </a>
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-coords="40.5870549 14.2887986">
+                            Bocca Piccola - relitto con carico
+                        </a>
+                    </li>
+                    <li>
+                        <a class="button" data-action="marker#go" data-coords="40.54468634 14.23392751">
+                            Marina Piccola, Scoglio delle Sirene - strutture portuali, approdo
+                        </a>
+                    </li>
+                </ul>
             </aside>
         </div>
     </div>
@@ -653,6 +694,14 @@
         </div>
         <button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
     </div>
+    <!-- Underwater modal -->
+    <div class="modal" id="underwater-data" data-controller="modal biblio marker" data-modal-target="modal">
+        <div class="modal-background" data-action="click->modal#close"></div>
+        <div class="modal-content has-background-white">
+            <div id="underwater-sheet"></div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" data-action="modal#close"></button>
+    </div>
     <!-- Spherical photo modal -->
     <div class="modal" id="spherical-modal">
         <div class="modal-background"></div>

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