Refactor everything to use GisState (WIP)
This commit is contained in:
parent
86d692381d
commit
c265e4aa94
@ -97,37 +97,51 @@
|
||||
</span>
|
||||
<ul id="siti-anacapri-sub" class="is-hidden">
|
||||
<li>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.56094295 14.20573624">
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.56094295 14.20573624"
|
||||
data-marker-group-value="sites">
|
||||
Grotta Azzurra
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta del Pisco" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.543768 14.202657">
|
||||
<a class="button" title="Vai al sito Grotta del Pisco"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.543768 14.202657"
|
||||
data-marker-group-value="sites">
|
||||
Grotta del Pisco
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Lo Pozzo" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556601 14.213642">
|
||||
<a class="button" title="Vai al sito Lo Pozzo"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.556601 14.213642"
|
||||
data-marker-group-value="sites">
|
||||
Località Lo Pozzo
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Scala Fenicia" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5562963 14.2285935">
|
||||
<a class="button" title="Vai al sito Scala Fenicia"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.5562963 14.2285935"
|
||||
data-marker-group-value="sites">
|
||||
Scala Fenicia
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Villa di Damecuta" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55906 14.20055">
|
||||
<a class="button" title="Vai al sito Villa di Damecuta"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55906 14.20055"
|
||||
data-marker-group-value="sites">
|
||||
Villa di Damecuta
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="is-block button" title="Vai al sito Villa di Gradola" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.560834 14.205793">
|
||||
<a class="button" title="Vai al sito Villa di Gradola"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.560834 14.205793"
|
||||
data-marker-group-value="sites">
|
||||
Villa di Gradola
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito San Michele" data-action="marker#go" data-controller="marker" data-marker-coords-value="40.557380 14.225806">
|
||||
<a class="button" title="Vai al sito San Michele"
|
||||
data-action="marker#go" data-controller="marker" data-marker-coords-value="40.55738 14.225806"
|
||||
data-marker-group-value="sites">
|
||||
Villa San Michele
|
||||
</a>
|
||||
</li>
|
||||
@ -147,32 +161,45 @@
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.54972 14.24669" data-action="marker#go">
|
||||
<a class="button" data-controller="marker"
|
||||
data-marker-coords-value="40.54972 14.24669"
|
||||
data-marker-group-value="sites"
|
||||
data-action="marker#go">
|
||||
Camerelle
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.54652 14.24288" data-action="marker#go">
|
||||
<a class="button" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.54652 14.24288" data-action="marker#go">
|
||||
Grotta dell'Arsenale
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" data-controller="marker" data-marker-coords-value="40.54942 14.25583" data-action="marker#go">
|
||||
<a class="button" title="Vai al sito Grotta di Matermania" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.54942 14.25583" data-action="marker#go">
|
||||
Grotta di Matermania
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta delle Felci" data-controller="marker" data-marker-coords-value="40.543644 14.230008" data-action="marker#go">
|
||||
<a class="button" title="Vai al sito Grotta delle Felci" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.543644 14.230008" data-action="marker#go">
|
||||
Grotta delle Felci
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" title="Vai al sito Grotta del Castiglione" data-controller="marker" data-marker-coords-value="40.54687 14.24023" data-action="marker#go">
|
||||
<a class="button" title="Vai al sito Grotta del Castiglione" data-controller="marker"
|
||||
data-marker-group-value="sites"
|
||||
data-marker-coords-value="40.54687 14.24023" data-action="marker#go">
|
||||
Grotta del Castiglione
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.55150 14.24327" data-action="marker#go">
|
||||
<a class="button" data-controller="marker" data-marker-coords-value="40.5515 14.24327"
|
||||
data-marker-group-value="sites"
|
||||
data-action="marker#go">
|
||||
Mura greche
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@ -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 = '';
|
||||
|
||||
|
||||
@ -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 = '';
|
||||
|
||||
|
||||
@ -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 = '';
|
||||
|
||||
|
||||
@ -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];
|
||||
|
||||
@ -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();
|
||||
}
|
||||
/**
|
||||
|
||||
110
webgis/js/gis.js
110
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 + '<br>(Clicca per aprire scheda)')
|
||||
{icon: Icons.site, label: record.label}
|
||||
)
|
||||
.bindTooltip(record.label + '<br>(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;
|
||||
}
|
||||
/**
|
||||
|
||||
@ -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() {
|
||||
|
||||
59
webgis/js/state.js
Normal file
59
webgis/js/state.js
Normal file
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @typedef {Object.<string, L.Marker>} MarkerLookup
|
||||
* A lookup table of markers keyed by 'lat lng' (no groupings)
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object.<string, L.LayerGroup>} LayerGroupLookup
|
||||
* A lookup table of Leaflet layer groups by category
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Object.<string, 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]}`];
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user