Atlante Interattivo, una web app per mappe personalizzabili

Una web application che semplifica la creazione e gestione di atlanti interattivi, personalizzabili nei contenuti e facilmente condivisibili.

In sintesi

Una piattaforma totalmente editabile, personalizzabile e interattiva per creare mappe secondo le proprie esigenze.

Anno2021

ProdottoWeb Application

AmbitoCartografia

CommittenteStudio Atlantis

TecnologieNext.js / Firebase

TipologiaSviluppo

Non stiamo parlando di mappe del tesoro dove la X indica (quasi) sempre il punto dove scavare ma la piattaforma che abbiamo sviluppato per Studio Atlantis non è di certo meno interessante.

Una web application totalmente editabile e personalizzabile per sviluppare mappe interattive in modo da creare narrazioni visive basate sulla ricerca e l’interpretazione di vari tipi di dati, combinando dati statistici, ricerca sul campo, analisi, disegno grafico, GIS, telerilevamento e tecnologia web.

L'idea: una piattaforma interattiva per creare mappe virtuali

Il progetto Atlante Interattivo (Interactive Atlas) nasce dopo una lunga esperienza nel campo della cartografia tematica statica e dell'infografica, utilizzate per rappresentare tematiche complesse (sociali, ambientali, economiche, ecc.) in quadri di sintesi rivolti alla divulgazione.

Con la digitalizzazione dei media e lo spostamento dei canali di comunicazione sempre più verso logiche web based, anche nella cartografia è diventato centrale utilizzare appieno questi strumenti, con tutte le potenzialità che offrono in termini di accessibilità ad un ampio pubblico e di potenzialità espressive.

Studio Atlantis ha realizzato un paio di progetti pilota di Atlante Interattivo (per un progetto europeo e per una rivista di storia) che sono serviti come base per elaborare una piattaforma più complessa, che fosse in grado di adattarsi ad ogni progetto futuro.

"La questione fondamentale per noi è stata mantenere la nostra logica editoriale nell’organizzazione e rappresentazione dei contenuti e ci siamo resi conto che utilizzando le piattaforme esistenti di cartografia interattiva non riuscivamo ad ottimizzare il processo. Dopo i feedback positivi dei progetti pilota, abbiamo quindi pensato di realizzare insieme a Devmy la struttura dell’Atlante Interattivo" - spiega Federico Labanti, ideatore di Atlanti Interattivi insieme a Nieves López Izquierdo.

Per quanto riguarda le opportunità di mercato del progetto, prosegue:

"Sono venute in primis dalla clientela con cui abbiamo lavorato in passato e che in molti casi si sono dimostrati interessati a un upgrade degli strumenti di comunicazione. Oltre a questi ci sono una serie di soggetti potenzialmente interessati ad un prodotto come l’Atlante Interattivo: università, ong, centri di ricerca, editoria, amministrazioni pubbliche."

 

atlante2.jpg

Interattività, accessibilità e multimedialità nel progetto Atlanti

Le caratteristiche del progetto sono:

Centralità della Cartografia

Atlante Interattivo è un sistema map based, dove la mappa e gli elementi rappresentati costituiscono il punto di partenza della narrazione. Si utilizza Mapbox come base personalizzata per ambientare gli elementi geolocalizzati da rappresentare.

Interattività

L’utente ha diverse possibilità di lettura grazie a legende spuntabili e filtri. Un sistema molto più efficiente rispetto ad uno statico per contenere una grande quantità di dati.

Multimedialità

Chi consulta le mappe ha la possibilità di arricchire di contenuti audiovisivi e testuali gli elementi mappati.

Accessibilità

Atlante Interattivo è facile da usare sia per chi consulta la mappa, sia per chi crea il database inserendo i contenuti. Questa caratteristica, non così scontata in altre piattaforme, rende l’Atlante Interattivo uno strumento ideale per la divulgazione ad un ampio pubblico anche di progetti complessi e specialistici.

Editorialità

Ogni atlante con le proprie mappe virtuali viene gestito autonomamente e con una precisa regia di esposizione dei contenuti definita insieme al cliente. Questo è l’aspetto che differenzia questo progetto da altri già presenti sul mercato. Insieme al software utile alla realizzazione delle proprie mappe tematiche interattive, vengono fornite, infatti, anche una strategia di comunicazione, una regia che accompagna tutto il processo di organizzazione e rappresentazione di dati e contenuti su un certo tema.

Riconoscibilità del Prodotto

L’Atlante Interattivo si presenta infine come un prodotto editoriale riconoscibile, in quanto la struttura dell’interfaccia-utente è sempre la stessa pur adattandosi alle esigenze dei diversi progetti.

Firebase, la piattaforma sviluppata da Google

Abbiamo utilizzato Firebase, la piattaforma serverless per lo sviluppo di applicazioni mobili e web.

Firebase sfrutta l'infrastruttura di Google e il suo cloud per fornire una suite di strumenti per scrivere, analizzare e mantenere applicazioni cross-platform. Offre, infatti, funzionalità come analisi, database (noSQL), messaggistica e monitoraggio per la gestione di applicazioni web, iOS e Android.

Per il nostro progetto, oltre al servizio di database e di authentication, abbiamo adottato anche le cloud functions e lo storage per la memorizzazione di documenti e/o media.

I requisiti hanno richiesto un’analisi approfondita per trovare una soluzione che potesse accogliere le richieste del cliente:

  • Un’applicazione frontend che consumasse il minimo possibile di risorse;
  • Mappe che fossero embeddabili e condivisibili dai clienti nei propri siti web;
  • Un’applicazione che poteva essere isolata dal resto dell’infrastruttura.

 

La soluzione trovata, dopo aver esaminato diverse possibilità è stata quella di avere due applicazioni completamente distinte e che potessero essere indipendenti l’una dall’altra.

Abbiamo optato per un backoffice per la gestione di utenze e la creazione degli atlanti, mappe, punti e i relativi contenuti ed un’applicazione a sé stante per la navigazione dei contenuti dell’atlante.

L’applicazione per la navigazione degli atlanti non richiede dati al database ma utilizza file statici opportunamente esportati dal backoffice tramite una procedura. In questo modo abbiamo ottenuto un frontend pubblico facile da embeddare e condividere ovunque e che non richiede particolari risorse cloud. Infatti dopo aver caricato i dati dal file esportato, l’applicazione vive interamente sul client.

Applicazione Backoffice dell'Atlante Interattivo

L’applicazione Dashboard creata ad hoc, dedicata alla gestione degli atlanti, sviluppata con NextJS e il buon vecchio Material UI, comunica con Firebase tramite apposito SDK. Gestisce gli utenti ed autorizzazioni tramite il servizio di authentication di Firebase ed utilizza Cloud Storage per il salvataggio di file.

Per facilitare la creazione dei contenuti di approfondimento relativi a punti, aree o altro è stato realizzato un page builder.

L’applicazione, inoltre, permette di:

  • Gestire punti, linee, aree visibili, disegnando direttamente in mappa o tramite importazione da file oppure inserendo le coordinate.
  • Redigere contenuti di vario genere accessibili al click sul punto o in aree di approfondimento a contorno dell’atlante stesso. Questi possono essere presentati in modali o sidebar, includono testi, collegamenti esterni, file multimediali e altro.
  • Gestire filtri e categorie legati tra loro gerarchicamente per organizzare i punti e controllare la visibilità
  • Configurare la mappa su cui costruire l’atlante
  • Definire eventuali colori, loghi o informazioni a contorno
  • Avere un’anteprima in tempo reale dell’atlante correntemente in sviluppo.

I dati sono salvati in formato GeoJSON (un formato standard per la cartografia). Il provider di mappe usato è Mapbox, più semplice da personalizzare con temi custom e con la possibilità di usare anche la vista satellitare.

Applicazione Frontend per la consultazione delle mappe virtuali

L’applicazione frontend, dedicata alla visualizzazione al pubblico dell’atlante, è stata creata con ReactJS. È facilmente embeddabile in una pagina web o visibile stand alone tramite link diretto, così da rendere disponibile l’atlante con le sue funzionalità.

Il funzionamento dell’applicazione è molto semplice: richiede i dati dell'atlante da mostrare (contenuti tutti all’interno di un file json) e, dopo aver ricevuto i dati, avvia la visualizzazione e la navigazione della mappa senza più ricontattare il backend.

Immagineatlanteinc3.jpg

Progetti sviluppati utilizzando Atlanti Interattivi

Recentemente la piattaforma è stata utilizzata in diversi progetti di divulgazione storica e scientifica. Ad esempio, in collaborazione con l’Università Paris, è stata realizzata una mappa sui rifugiati spagnoli in Francia alla vigilia della Seconda Guerra Mondiale, un altro progetto ha visto lo sviluppo di un atlante di edifici abbandonati di Bologna e un altro atlante ha visto la luce per raccontare i femminicidi in Italia realizzato in collaborazione con la Città Metropolitana di Bologna e il Coordinamento dei Centri Antiviolenza dell’Emilia Romagna.

Atlante dell’incompiuto

I “Laboratori dell’Incompiuto” è un progetto che ha coinvolto gli studenti della Fondazione Aldini Valeriani.

Durante il laboratorio gli studenti hanno indagato il tema degli edifici incompiuti, abbandonati e in rovina, creando un Atlante interattivo attraverso la piattaforma, analizzando il proprio territorio e immaginando azioni di adeguamento/miglioramento.

Come territorio è stato scelto il quartiere di Navile di Bologna sia perché vi è ubicata la Fondazione Aldini Valeriani che ha richiesto la piattaforma, sia perché si tratta di un ambiente ricco di iniziative, multiculturale e caratterizzato da recenti e importanti trasformazioni urbanistiche.

 

atlanteincompiuto (1).jpg

Atlante dei femminicidi

Un tema di che non dovrebbe neanche esistere ma di cui invece si deve parlare.

L’Atlante dei femminicidi nasce con la consapevolezza che non si possono attuare politiche adeguate per risolvere il problema senza conoscerlo a fondo. È stata sviluppata, quindi, una piattaforma online su base cartografica per la raccolta e sistematizzazione dei dati riguardanti il femminicidio in Italia e creare quindi una mappatura del fenomeno.

Il progetto è finanziato dalla Regione Emilia Romagna attraverso il Bando D. G. R. n. 673/2021, i partner e cofinanziatori sono il Comune di Bologna (Capofila), la Casa delle Donne per non subire violenza di Bologna, la Cooperativa Stellaria e Studio Atlantis. I partner del progetto sono Città Metropolitana di Bologna, il Coordinamento dei Centri Antiviolenza dell’Emilia Romagna, l’Istituto Storico Parri, la Rete D.i.R.e, in qualità di patrocinio gratuito.

L’obiettivo è quello di promuovere la cooperazione nella lotta politica alla violenza contro le donne e approfondire la conoscenza, lo studio e la comunicazione del e sul terribile fenomeno.

Le mappe interattive diventano un aiuto per la ricerca

Il progetto dell’Atlante Interattivo è un modo per creare narrazioni visive su svariati argomenti, il che rende più semplice la comprensione e la scoperta di tematiche complesse del quale non si comprende la vastità. La divulgazione culturale è una grande opportunità per le generazioni presenti e future, ecco perché siamo felici di aver contribuito alla creazione di una piattaforma totalmente editabile, interattiva e multimediale che può interessare, e soprattutto aiutare, la ricerca.

Contattaci.

Hai in mente un progetto e vorresti realizzarlo?
Hai bisogno di un partner dall'elevata competenza che supporti il tuo team o ti aiuti per progetti in outsourcing?

Vuoi maggiori informazioni o vuoi realizzare insieme a noi un progetto?
Compila il form e ti ricontatteremo a brevissimo.

Questo sito è protetto da reCAPTCHA e si applicano le Norme sulla privacy e i Termini di servizio di Google.