Documentazione del progetto
GaddaMap è un progetto nato dalla collaborazione tra l’Università di Bologna, il Centro Studi Gadda e il Politecnico di Milano, con lo scopo di rappresentare su una mappa interattiva i luoghi di Milano e Roma, città protagoniste della produzione gaddiana, citati nelle Opere e nelle Lettere dell'Ingegnere. Si illustrano di seguito le attività svolte nello sviluppo del progetto, che, allo stato attuale, comprende una selezione dei dati relativi a Milano, e in particolare i luoghi citati nelle Pagine di divulgazione tecnica, nell’Adalgisa e nelle Lettere di Gadda.
Acquisizione dati geografici e conversione in formato GeoJSON
I dati sono stati organizzati in un file Excel, in cui ogni record corrisponde a un luogo citato nelle Opere o nelle Lettere di Gadda. Per ognuno di questi, sono stati indicati la citazione corrispondente, il testo - o, nel caso dei carteggi, luogo e data della lettera - e la pagina in cui la citazione occorre, insieme al volume delle opere o alla raccolta di lettere di cui il testo fa parte. Per alcuni dei luoghi, inoltre, sono state raccolte informazioni relative alla localizzazione e immagini, corredate da didascalie.
A ogni luogo citato nell’Adalgisa, nelle Pagine di divulgazione tecnica e nelle Lettere dell’Ingegnere sono state attribuite latitudine e longitudine in gradi decimali (DD), ricavate da OpenStreetMap e GeoNames. Il file Excel originale è stato poi convertito in formato csv e da csv in GeoJSON tramite il tool UI geojson.io, sviluppato da Mapbox.
Implementazione della mappa
La mappa è stata realizzata con la libreria open-source di JavaScript Leaflet, i plugin di Leaflet Leaflet.markercluster e leaflet-search e la libreria JavaScript jQuery.
La mappa comprende due livelli: un livello di base sempre presente, per il quale sono stati utilizzati i raster tiles di OpenStreetMap, e un overlay, attivabile e disattivabile dall’utente attraverso il Layers Control di Leaflet, che sovrappone al livello base una mappa della Milano degli anni Quaranta. Per integrare questo secondo livello, è stato necessario procedere alla georeferenziazione dell’immagine, ovvero all’attribuzione di coordinate geografiche (control points), che è stata realizzata attraverso il servizio di georeferenziazione open source Map Warper.
Sulla mappa, ogni marker identifica un luogo citato all’interno delle Pagine di divulgazione tecnica, dell’Adalgisa o delle Lettere di Gadda. Per evitare l’effetto clutter dato dalla densità di luoghi citati in aree circoscritte della mappa, i markers sono stati agglomerati in clusters utilizzando il plugin Leaflet.markercluster. I clusters raggruppano i punti per prossimità spaziale, e, al massimo livello di zoom, accorpano punti che condividono latitudine e longitudine.
Per rappresentare graficamente la diverse tipologie di luoghi citati nelle Opere e nelle Lettere di Gadda, è stato deciso di adottare un semplice circleMarker per strade, vie e piazze e, in tutti gli altri casi (cimiteri, ospedali, scuole, biblioteche, centri sportivi, etc.), icone specifiche.
Le icone, in formato PNG, sono state selezionate da Flaticon.
- : User interface icons created by Rizki Ahmad Fauzi - Flaticon
- : Bank location icons created by Icon home - Flaticon
- : Maps and location icons created by Smashicons - Flaticon
- : Time and date icons created by Fathema Khanom - Flaticon
- : - Canal icons created by orvipixel - Flaticon
- : Maps and location icons created by Smashicons - Flaticon
- : Church icons created by Nuricon - Flaticon
- : Healthcare and medical icons created by Artlèga Studio - Flaticon
- : Hotel icons created by Smashicons - Flaticon
- : Factory icons created by mangsaabguru - Flaticon
- : Maps and location icons created by Muhammad_Usman - Flaticon
- : Maps and location icons created by surang - Flaticon
- : Restaurant icons created by fjstudio - Flaticon
- : Filling cabinet icons created by Ashwin Vgl - Flaticon
- : Park icons created by Freepik - Flaticon
- : Throne icons created by Freepik - Flaticon
- : School icons created by Kiranshastry - Flaticon
- : Theatre icons created by Smashicons - Flaticon
- : Tower icons created by Good Ware - Flaticon
- : 1st place icons created by Md Tanvirul Haque - Flaticon
- : Train icons created by Frey Wazza - Flaticon
- : Scholarship icons created by Bartama Graphic - Flaticon
A ogni punto sulla mappa è stato poi collegato un popup che presenta le informazioni associate a ogni feature nel file GeoJSON. La funzione di spiderfy offerta da Leaflet.markercluster si è rivelata particolarmente efficace nella visualizzazione di luoghi identificati dalle stesse coordinate geografiche ma relativi a opere diverse, organizzandoli in una disposizione a spirale che permette all’utente di accedere alle informazioni associate a ogni luogo nei popups.
Le immagini presenti in alcuni dei popups sono tratte da Wikimedia Commons o dalle cartoline di Milano spedite da Adele Lehr a Carlo Emilio Gadda negli anni di guerra, conservate presso il Gabinetto G.P. Vieusseux di Firenze.
La mappa offre all’utente diverse opzioni di ricerca e selezione dei dati:
- Una search box, realizzata con il plugin leaflet-search, permette una ricerca testuale per indirizzo filtrando i luoghi attraverso la proprietà corrispondente nel file GeoJSON.
- I bottoni Stradario e Luoghi attivano due slide-ins cliccabili. Una volta cliccato un indirizzo o un luogo, la mappa ricalcola i suoi confini all’area rettangolare in cui sono compresi i markers corrispondenti alla selezione effettuata.
- I due filtri “Seleziona dalle Opere” e “Seleziona dalle Lettere” permettono di visualizzare sulla mappa solo i luoghi e gli indirizzi citati nei testi corrispondenti. Anche in questo caso, i confini della mappa vengono ricalcolati per mostrare solo i markers interessati dal filtro selezionato.
Design
Le pagine del sito e le funzionalità aggiuntive presenti sulla mappa (dropdowns, buttons, slide-ins) sono stati realizzati con Bootstrap e CSS. Le icone utilizzate nel Floating Action Button (FAB) sulla mappa sono tratte da Font Awesome.