62 lines
2.9 KiB
Markdown
62 lines
2.9 KiB
Markdown
# 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 |