From d315057ee044643b452fe00fe81912b51a671d32 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20P?= <nicolo.paraciani@cnr.it>
Date: Fri, 22 Mar 2024 11:24:15 +0100
Subject: [PATCH] Rudimentary control for sites

---
 css/app.css    |  6 ++++
 js/caprigis.js |  9 ++++--
 js/index.js    | 10 +++----
 js/ui.js       | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 97 insertions(+), 7 deletions(-)
 create mode 100644 js/ui.js

diff --git a/css/app.css b/css/app.css
index 3cbf754..6f1c413 100644
--- a/css/app.css
+++ b/css/app.css
@@ -106,6 +106,12 @@ a:visited {
 #fullscreen {
     padding: 2px;
 }
+/* Custom controls */
+.site-control {
+    padding-top: 3px;
+    padding-left: 10px;
+    padding-right: 33px;
+}
 /* Leaflef map container */
 @media (max-width: 840px) {
     .map-sm {
diff --git a/js/caprigis.js b/js/caprigis.js
index aa38bc3..d2b6ba3 100644
--- a/js/caprigis.js
+++ b/js/caprigis.js
@@ -29,8 +29,10 @@ const optionsPaesistici = {
 
 const BASE_URL = location.href;
 /**
- * 
+ * Capitalize a text string
+ * @todo Move to utils
  * @param {?string} text 
+ * @returns {?string} The capitalized string or null
  */
 function capitalize(text) {
     let capital = text;
@@ -50,7 +52,7 @@ function capitalize(text) {
 /**
  * @param {string} mapId
  * @param {number} zoomLevel
- * @returns {Map}
+ * @returns {{map: Map, sites: Layer}}
  */
 GIS.initMap = async function (mapId, zoomLevel = 15) {
     let layerVincoli = await this.loadLayer('vincoli.geojson', optionsVincoli);
@@ -80,6 +82,9 @@ GIS.initMap = async function (mapId, zoomLevel = 15) {
     };
 
     let layerControl = L.control.layers(baseMap, archeo).addTo(map);
+
+    // TODO Horrible?
+    return {map: map, sites: layerSiti};
 }
 /**
  * @todo Distinguere tipo di geojson per contenuto popup 
diff --git a/js/index.js b/js/index.js
index 2024c6d..d0e1329 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,9 +1,9 @@
 import GIS from './caprigis.js';
+import UI from './ui.js';
 
-document.addEventListener('DOMContentLoaded', () => {
-    GIS.initMap('map');
-
-    // Layer vincoli
-    //GIS.loadLayer('vincoli.geojson');
+document.addEventListener('DOMContentLoaded', async () => {
+    const init = await GIS.initMap('map');
 
+    const centerCoords = init.sites.getBounds().getCenter();
+    UI.addSitesControl(init.map, centerCoords, 'Grotta di Matermania');
 });
\ No newline at end of file
diff --git a/js/ui.js b/js/ui.js
new file mode 100644
index 0000000..81074e5
--- /dev/null
+++ b/js/ui.js
@@ -0,0 +1,79 @@
+'use strict';
+
+/**
+ * @namespace UI
+ */
+const UI = {};
+
+const siteIcon = `<svg
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z"
+    fill="currentColor"
+  />
+  <path
+    fill-rule="evenodd"
+    clip-rule="evenodd"
+    d="M12 3C12.5523 3 13 3.44772 13 4V5.07089C16.0657 5.5094 18.4906 7.93431 18.9291 11H20C20.5523 11 21 11.4477 21 12C21 12.5523 20.5523 13 20 13H18.9291C18.4906 16.0657 16.0657 18.4906 13 18.9291V20C13 20.5523 12.5523 21 12 21C11.4477 21 11 20.5523 11 20V18.9291C7.93431 18.4906 5.5094 16.0657 5.07089 13H4C3.44772 13 3 12.5523 3 12C3 11.4477 3.44772 11 4 11H5.07089C5.5094 7.93431 7.93431 5.5094 11 5.07089V4C11 3.44772 11.4477 3 12 3ZM7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12Z"
+    fill="currentColor"
+  />
+</svg>`;
+
+/**
+ * Zoom and pan the map to a given layer position
+ * @param {Map} map
+ * @param {Layer} layer
+ * @param {number} zoom Zoom level
+ */
+UI.zoomToPosition = function (map, layer, zoom = 20) {
+    const center = layer.getCenter();
+
+    map.setView(center, zoom, {animate: true});
+}
+/**
+ * 
+ * @param {Map} map 
+ * @param {LatLng} coordinates 
+ * @param {string} popupContent 
+ */
+UI.addSitesControl = function (map, coordinates, popupContent) {
+    const popUpCoords = L.latLng(coordinates.lat + 0.0001, coordinates.lng);
+    L.Control.SiteControl = L.Control.extend({
+        options: {
+            position: 'topright'
+        },
+        onAdd: function (map) {
+            let controlDiv = L.DomUtil.create('div', 'leaflet-draw-toolbar leaflet-bar');
+            L.DomEvent
+                .addListener(controlDiv, 'click', L.DomEvent.stopPropagation)
+                .addListener(controlDiv, 'click', L.DomEvent.preventDefault)
+                .addListener(controlDiv, 'click', function () {
+                    map.setView(
+                        coordinates,
+                        19,
+                        {animate: true, duration: 1, easeLinearity: 0.25}
+                    );
+                    L.popup()
+                        .setLatLng(popUpCoords)
+                        .setContent(popupContent)
+                        .openOn(map);
+            });
+
+            let controlUI = L.DomUtil.create('a', 'leaflet-draw-edit-remove site-control', controlDiv);
+            controlUI.title = 'Vai al sito';
+            controlUI.href = '#';
+            controlUI.innerHTML = siteIcon;
+            return controlDiv;
+        }
+    });
+
+    let siteCtr = new L.Control.SiteControl();
+    map.addControl(siteCtr);
+}
+
+export default UI;
\ No newline at end of file