WebGIS Isola di Capri

Il webGIS è servito dalla cartella webgis/, che funziona da root per i file JavaScript (cartella js/), caricati dal relativo index.html, oltre che per immagini, documenti e layer GeoJSON.

Configurazione

Il webGIS necessita di un singolo file di configurazione (non versionato), che deve trovarsi in webgis/js ed essere nominato config.js.

Il file definisce solo gli endpoint di base da utilizzare per le chiamate alla API JSON lato server (che fornisce dati estratti dal database PostgreSQL) in ambiente di sviluppo (dev) o in produzione (prod).

La struttura del file deve essere la seguente (gli endpoint riportati sono solo di esempio):

const API_CONFIG = {
    dev: 'https://localhost',
    prod: 'https://api.example.com'
};

export default API_CONFIG;

Struttura e funzionamento base

Entry point

Il punto d'ingresso dell'applicazione è webgis/js/index.js che registra i controller Stimulus e inizializza alcune funzioni UI (che potrebbero essere migrate in un controller Stimulus dedicato in futuro).

Mappa

La mappa è gestita con Leaflet dalle funzioni definite nel modulo GIS (webgis/js/gis.js) che carica i layer iniziali, inclusi i geoJSON necessari, interroga le API server per recuperare i dati dal database e crea i cluster di puntatori (markers) tramite il plugin Leaflet.markercluster.

Pseudo-componenti HTML

Il contenuto HTML mostrato nei modali che si aprono cliccando sui puntatori è gestito dinamicamente da pseudo-componenti rappresentati da classi JavaScript che si trovano in webgis/js/components.

Potrebbe essere utile (o auspicabile) trasformarli in Web Components veri e propri, magari tramite Lit.js. In questo caso, bisognerebbe capire come gestire i dati dinamici all'interno dei template.

Dipendenze

Le dipendenze sono gestite con yarn, per installarle è sufficiente eseguire yarn dalla cartella webgis/js, dove si trova package.json.

Il file webgis/index.html contiene una importmap principalmente per mappare Photo Sphere Viewer, Three.js (da cui dipende Photo Sphere Viewer) e Stimulus.

CSS

• Bulma
• Fontawesome free

JS

• Leaflet (mappa)
  • kalisio/leaflet-graphicscale (plugin Leaflet per scala mappa)
  • Leaflet/Leaflet.markercluster (plugin Leaflet per raggruppamenti puntatori)
• Spotlight.js (gallery immagini)
• Photo Sphere Viewer (foto sferiche / panorami)
• Stimulus (UI)

TODO

• Auto-discovery per Stimulus?
• Refactor con app state per evitare oggetti globali