# 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):

```js
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_](https://lit.dev/). 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`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap) principalmente per mappare 
Photo Sphere Viewer, Three.js (da cui dipende Photo Sphere Viewer) e Stimulus.

### CSS

- [Bulma](https://bulma.io)
- Fontawesome free

### JS

- [Leaflet](https://leafletjs.com) (mappa)
    - [kalisio/leaflet-graphicscale](https://github.com/kalisio/leaflet-graphicscale) (plugin Leaflet per scala mappa)
    - [Leaflet/Leaflet.markercluster](https://github.com/Leaflet/Leaflet.markercluster) (plugin Leaflet per raggruppamenti puntatori)
- [Spotlight.js](https://nextapps-de.github.io/spotlight/) (gallery immagini)
- [Photo Sphere Viewer](https://photo-sphere-viewer.js.org/) (foto sferiche / panorami)
- [Stimulus](https://stimulus.hotwired.dev) (UI)

## TODO

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