diff --git a/webgis/index.html b/webgis/index.html
index b1bd629..8a43e15 100644
--- a/webgis/index.html
+++ b/webgis/index.html
@@ -97,37 +97,51 @@
-
-
+
Grotta Azzurra
-
-
+
Grotta del Pisco
-
-
+
Località Lo Pozzo
-
-
+
Scala Fenicia
-
-
+
Villa di Damecuta
-
-
+
Villa di Gradola
-
-
+
Villa San Michele
@@ -147,32 +161,45 @@
-
-
+
Camerelle
-
-
+
Grotta dell'Arsenale
-
-
+
Grotta di Matermania
-
-
+
Grotta delle Felci
-
-
+
Grotta del Castiglione
-
-
+
Mura greche
diff --git a/webgis/js/components/Finding.js b/webgis/js/components/Finding.js
index a8a0a5d..1519324 100644
--- a/webgis/js/components/Finding.js
+++ b/webgis/js/components/Finding.js
@@ -1,3 +1,4 @@
+import { GisState } from "../state.js";
/**
* @class Finding
*/
@@ -72,7 +73,7 @@ export class Finding {
* @param {Function} gallery
*/
async setImages(imageContainer, gallery) {
- let record = await this.fetchData(`${window.API_URL}/finding/${this._data.id}`)
+ let record = await this.fetchData(`${GisState.apiUrl}/finding/${this._data.id}`)
if (record.images.length) {
this.images = record.images;
@@ -84,7 +85,7 @@ export class Finding {
* @param {number} recordId
*/
async biblio(recordId) {
- let finding = await this.fetchData(`${window.API_URL}/finding/${recordId}`);
+ let finding = await this.fetchData(`${GisState.apiUrl}/finding/${recordId}`);
let citations = '';
diff --git a/webgis/js/components/NotConserved.js b/webgis/js/components/NotConserved.js
index db6da3e..91fcd21 100644
--- a/webgis/js/components/NotConserved.js
+++ b/webgis/js/components/NotConserved.js
@@ -1,3 +1,5 @@
+import { GisState } from "../state.js";
+
/**
* Component to render data for not conserved assets
* @class NotConserved
@@ -71,8 +73,6 @@ export class NotConserved {
* @param {Function} gallery
*/
async setImages(imageContainer, gallery) {
- //let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)
-
if (this._data.images.length) {
this.images = this._data.images;
imageContainer.innerHTML = this.renderImages();
@@ -82,7 +82,7 @@ export class NotConserved {
}
async renderDocs() {
- let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`);
+ let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${this._data.id}`);
this.documentation = record.documents.filter(d => d.type === 'documentazione')
this.publications = record.documents.filter(d => d.type === 'pubblicazione');
@@ -137,7 +137,7 @@ export class NotConserved {
}
async biblio(recordId) {
- let record = await this.fetchData(`${window.API_URL}/not_conserved/${recordId}`);
+ let record = await this.fetchData(`${GisState.apiUrl}/not_conserved/${recordId}`);
let citations = '';
diff --git a/webgis/js/components/Prehistoric.js b/webgis/js/components/Prehistoric.js
index 5126f73..af23008 100644
--- a/webgis/js/components/Prehistoric.js
+++ b/webgis/js/components/Prehistoric.js
@@ -1,4 +1,4 @@
-
+import { GisState } from "../state.js";
/**
* @class Prehistoric
*/
@@ -80,8 +80,6 @@ export class Prehistoric {
* @param {Function} gallery
*/
async setImages(imageContainer, gallery) {
- //let record = await this.fetchData(`${window.API_URL}/not_conserved/${this._data.id}`)
-
if (this._data.images.length) {
this.images = this._data.images;
imageContainer.innerHTML = this.renderImages();
@@ -93,7 +91,7 @@ export class Prehistoric {
* @param {number} recordId
*/
async biblio(recordId) {
- let finding = await this.fetchData(`${window.API_URL}/prehistoric/${recordId}`);
+ let finding = await this.fetchData(`${GisState.apiUrl}/prehistoric/${recordId}`);
let citations = '';
diff --git a/webgis/js/controllers/layer_controller.js b/webgis/js/controllers/layer_controller.js
index 59bb603..13845a3 100644
--- a/webgis/js/controllers/layer_controller.js
+++ b/webgis/js/controllers/layer_controller.js
@@ -1,21 +1,23 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
+import { GisState } from "../state.js";
export default class extends Controller {
static targets = ['sites', 'findings', 'notconserved', 'prehist',];
/**
+ * @todo Use Stimulus values?
* @param {Event} event
*/
toggle(event) {
- let map = window.LMap;
+ let map = GisState.map;
let target = event.currentTarget;
const id = target.parentElement.getAttribute('data-id');
const layers = {
- 'siti': window.Sites,
- 'non-conser': window.NotConserved,
- 'rinv': window.Findings,
- 'preist': window.Prehistoric,
- 'subacquei': window.Underwater,
+ 'siti': GisState.layers.sites,
+ 'non-conser': GisState.layers.notConserved,
+ 'rinv': GisState.layers.findings,
+ 'preist': GisState.layers.prehistoric,
+ 'subacquei': GisState.layers.underwater,
}
let group = layers[id];
diff --git a/webgis/js/controllers/marker_controller.js b/webgis/js/controllers/marker_controller.js
index 2971178..76b548f 100644
--- a/webgis/js/controllers/marker_controller.js
+++ b/webgis/js/controllers/marker_controller.js
@@ -1,9 +1,15 @@
-import { Controller } from "@hotwired/stimulus"
+import { Controller } from "@hotwired/stimulus";
+import { GisState, getMarkerByCoords } from "../state.js";
export default class extends Controller {
- static values = {'coords': String };
+ static values = {
+ 'coords': String,
+ 'group': String,
+ 'id': String,
+ };
END_ZOOM = 19;
+ // Animation breaks automatic tooltip opening...
mapAnimate = {
animate: true,
duration: 1,
@@ -14,19 +20,18 @@ export default class extends Controller {
* @param {Event} event
*/
go() {
- let map = window.LMap;
-
- console.log(this.coordsValue);
-
+ let map = GisState.map;
const coords = this.coordsValue.split(' ');
map.setView(
coords,
this.END_ZOOM,
- this.mapAnimate
+ {animate: false}
);
let marker = this.getMarker(map, coords);
+ // DEBUG for sites
+ if (this.groupValue) marker = getMarkerByCoords(coords, this.groupValue);
marker?.openTooltip();
}
/**
diff --git a/webgis/js/gis.js b/webgis/js/gis.js
index b49360e..290c01f 100644
--- a/webgis/js/gis.js
+++ b/webgis/js/gis.js
@@ -4,6 +4,7 @@ import UI from "./ui.js";
import API_CONFIG from "./config.js";
import Icons from "./icons.js";
import { SphericalPhoto } from "./components/SphericalPhoto.js";
+import { GisState } from "./state.js";
const MAPBOX_TOKEN = 'pk.eyJ1Ijoibmljb3BhIiwiYSI6ImNseWNwZjJjbjFidzcya3BoYTU0bHg4NnkifQ.3036JnCXZTEMt6jVgMzVRw';
const BASE_URL = location.href;
@@ -15,7 +16,7 @@ if (BASE_URL.includes('localhost')) {
API_URL = API_CONFIG.prod;
}
-window.API_URL = API_URL;
+GisState.apiUrl = API_URL;
// Global leaflet
/**
@@ -93,7 +94,7 @@ function capitalize(text) {
/**
* @param {string} mapId
* @param {number} zoomLevel
- * @returns {Map}
+ * @returns {L.Map}
*/
GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let map = L.map(mapId, {
@@ -111,16 +112,7 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
let layerVincoli = await this.loadGeoJSON('vincoli.geojson', optionsVincoli);
let layerPaesistici = await this.loadGeoJSON('paesistici.geojson', optionsPaesistici);
- // Refactor with separate function...
- this.sites().then(data => {
- data.markers.addTo(map);
- data.geom.addTo(map);
- window.Sites = data.markers;
- });
- 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});
+ this.addLayerGroups(map);
const archeo = {
'Vincoli archeologici' : layerVincoli,
@@ -128,8 +120,30 @@ GIS.initMap = async function (mapId, zoomLevel = this.INIT_ZOOM) {
};
L.control.layers(baseMap, archeo).addTo(map);
+ GisState.map = map;
+
return map;
}
+/**
+ * Add layer groups to map
+ */
+GIS.addLayerGroups = function (map) {
+ // Can be included in Promise.all
+ // if it returns only one group...
+ this.sites().then(data => {
+ data.markers.addTo(map);
+ data.geom.addTo(map);
+ });
+ Promise.all(
+ [
+ this.notConserved(),
+ this.findings(),
+ this.prehistoric(),
+ this.underwater(),
+ ]
+ )
+ .then(groups => groups.forEach(group => group.addTo(map)));
+}
/**
* Create markers for sites
* @returns {{markers: L.markerClusterGroup, geom: L.LayerGroup}}
@@ -147,17 +161,27 @@ GIS.sites = async function () {
optionsGrotta : optionsSiti;
geom.push(await this.loadSiteLayer(record, options));
}
- sites.addLayer(L.marker(
+
+ const marker = L.marker(
record.coordinates,
- {icon: Icons.site}
- ).bindTooltip(record.label + '
(Clicca per aprire scheda)')
+ {icon: Icons.site, label: record.label}
+ )
+ .bindTooltip(record.label + '
(Clicca per aprire scheda)')
.on(
'click',
() => UI.openSiteModal(record, '#site-data')
- )
- );
+ );
+
+ sites.addLayer(marker);
+ // Populate app state for reuse and avoid window.Sites etc.
+ // Municipality (Capri, Anacapri) added for reuse in dynamic menu
+ marker.options.municipalilty = record.municipalilty;
+ const markerIndex = `${record.coordinates[0]} ${record.coordinates[1]}`;
+ GisState.markers.sites[markerIndex] = marker;
}
+ GisState.layers.sites = sites;
+
return {markers: sites, geom: L.layerGroup(geom)};
}
/**
@@ -168,22 +192,21 @@ GIS.notConserved = async function () {
let notConserData = await fetch(`${API_URL}/not_conserved`)
.then(data => data.json());
- let notConserved = L.markerClusterGroup(
- clusterOptions
- );
+ let notConserved = L.markerClusterGroup(clusterOptions);
for (let record of notConserData.records) {
- notConserved.addLayer(L.marker(
- record.coordinates,
- {icon: Icons.notConserved}
- ).bindTooltip(record.denomination)
- .on(
- 'click',
- () => UI.openNotConserModal(record, '#not-conser-data')
- )
- );
+ const marker = L.marker(record.coordinates, {icon: Icons.notConserved})
+ .bindTooltip(record.denomination)
+ .on('click', () => UI.openNotConserModal(record, '#not-conser-data'));
+
+ notConserved.addLayer(marker);
+ // Populate app state for reuse and avoid window.Sites etc.
+ const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+ GisState.markers.notConserved[markerLabel] = marker;
}
+ GisState.layers.notConserved = notConserved;
+
return notConserved;
}
/**
@@ -199,17 +222,20 @@ GIS.findings = async function () {
);
for (let record of findingsData) {
- findings.addLayer(L.marker(
- record.coordinates,
- {icon: Icons.finding}
+ const marker = L.marker(record.coordinates, {icon: Icons.finding}
).bindTooltip(record.object)
.on(
'click',
() => UI.openFindingModal(record, '#finding-data')
- )
- );
+ );
+
+ findings.addLayer(marker);
+ const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+ GisState.markers.findings[markerLabel] = marker;
}
+ GisState.layers.findings = findings;
+
return findings;
}
/**
@@ -225,17 +251,23 @@ GIS.prehistoric = async function () {
);
for (let record of data.records) {
- prehistoric.addLayer(L.marker(
+ const marker = L.marker(
record.coordinates,
{icon: Icons.prehistoric}
).bindTooltip(record.denomination)
.on(
'click',
() => UI.openPrehistModal(record, '#prehist-data')
- )
- );
+ );
+
+ const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+ GisState.markers.prehistoric[markerLabel] = marker;
+
+ prehistoric.addLayer(marker);
}
+ GisState.layers.prehistoric = prehistoric;
+
return prehistoric;
}
/**
@@ -249,17 +281,23 @@ GIS.underwater = async function () {
let underwater = L.markerClusterGroup(clusterOptions);
for (let record of underwaterData.records) {
- underwater.addLayer(L.marker(
+ const marker = L.marker(
record.coordinates,
{icon: Icons.underwater}
).bindTooltip(record.denomination)
.on(
'click',
() => UI.openUnderwaterModal(record, '#underwater-data')
- )
- );
+ );
+
+ const markerLabel = `${record.coordinates[0]} ${record.coordinates[1]}`;
+ GisState.markers.prehistoric[markerLabel] = marker;
+
+ underwater.addLayer(marker);
}
+ GisState.layers.underwater = underwater;
+
return underwater;
}
/**
diff --git a/webgis/js/index.js b/webgis/js/index.js
index 1e81a81..bcebcd7 100644
--- a/webgis/js/index.js
+++ b/webgis/js/index.js
@@ -22,8 +22,6 @@ document.addEventListener('DOMContentLoaded', async () => {
UI.addCenterMapControl(map, GIS.CENTER_COORDS, GIS.INIT_ZOOM);
UI.toggleBurger('navbar-burger');
-
- window.LMap = map;
});
function initStimulus() {
diff --git a/webgis/js/state.js b/webgis/js/state.js
new file mode 100644
index 0000000..dd41126
--- /dev/null
+++ b/webgis/js/state.js
@@ -0,0 +1,59 @@
+/**
+ * @typedef {Object.} MarkerLookup
+ * A lookup table of markers keyed by 'lat lng' (no groupings)
+ */
+
+/**
+ * @typedef {Object.} LayerGroupLookup
+ * A lookup table of Leaflet layer groups by category
+ */
+
+/**
+ * @typedef {Object.} BibliographyLookup
+ * A lookup table of bibliography data by category
+ */
+
+/**
+ * @typedef {Object} GisStateType
+ * @property {L.Map|null} map
+ * @property {String|null} apiUrl
+ * @property {MarkerLookup} markers
+ * @property {LayerGroupLookup} layers
+ * @property {BibliographyLookup} bibliography
+ */
+
+/** @type {GisStateType} */
+export const GisState = {
+ map: null,
+ markers: {
+ sites: {},
+ notConserved: {},
+ findings: {},
+ prehistoric: {},
+ underwater: {},
+ },
+ layers: {
+ sites: {},
+ notConserved: {},
+ findings: {},
+ prehistoric: {},
+ underwater: {},
+ },
+ bibliography: {
+ sites: {},
+ notConserved: {},
+ findings: {},
+ prehistoric: {},
+ underwater: {},
+ },
+ apiUrl : null,
+}
+
+/**
+ * @param {array} coords - ['lat', 'lng']
+ * @param {string} group
+ * @returns {L.Marker|undefined}
+ */
+export function getMarkerByCoords(coords, group) {
+ return GisState.markers[group][`${coords[0]} ${coords[1]}`];
+}