Mappa del mondo interattiva in locale o sul cloud con Protomaps

Siamo abituati a utilizzare i principali servizi di mappe online forniti dalle aziende più note come Google, Microsoft, Apple e così via. Poi ci sono strumenti aperti come OpenStreetMap che si prestano gli impieghi più disparati. Protomaps è una piattaforma che fornisce strumenti e servizi per la visualizzazione di una mappa del mondo interattiva.

Diversamente rispetto ai servizi commerciali, le mappe di Protonmaps sono open source e, addirittura, possono essere salvate in locale oppure su server cloud. Non è più necessarie appoggiarsi a piattaforme sviluppate da terze parti per creare e gestire applicazioni che fanno uso di mappe aggiornate: la mappa del mondo è disponibile per qualunque sviluppatore voglia integrarla in qualunque genere di piattaforma Web.

Cos’è Protomaps e come funziona la mappa del mondo interattiva

Protomaps è progettato per offrire mappe interattive veloci da usare, molto leggere e altamente personalizzabili. Quest’ultimo è proprio il fiore all’occhiello di Protomaps: le mappe vettoriali sono costituite da dati geometrici che rappresentano punti, linee e poligoni, e possono essere scalate senza perdita di qualità. L’approccio assicura una maggiore flessibilità e interattività rispetto alle tradizionali mappe raster basate su immagini.

Il funzionamento di Protomaps si basa sull’utilizzo di dati vettoriali e strumenti di rendering avanzati per visualizzare le informazioni geografiche. Gli sviluppatori possono accedere alla piattaforma Protomaps tramite API (Application Programming Interface) per integrare le mappe personalizzate nei loro progetti.

Protomaps permette di modificare l’aspetto, lo stile e i dati visualizzati sulle mappe per adattarle alle esigenze specifiche di ciascun progetto. Ciò include la possibilità di aggiungere dati personalizzati, definire stili di visualizzazione unici e gestire l’interattività delle mappe.

Cosa sono le PMTiles

Le PMTiles (Protomaps Tiles) sono un formato di file progettato per memorizzare e distribuire i dati delle mappe vettoriali. Sono un modo efficiente per archiviare le informazioni in modo compatto e ottimizzato per la distribuzione online. I file sono strutturati in modo tale da consentire una visualizzazione rapida e interattiva delle mappe, suddividendo i dati in “tiles” (mattonelle) di dimensioni predefinite.

Le varie tile contengono i dati vettoriali georeferenziati: è così possibile caricare solo le porzioni necessarie della mappa quando un utente visualizza o esplora una determinata area, riducendo la quantità complessiva di dati da scaricare e migliorando le prestazioni complessive.

Qual è il legame tra Protomaps e OpenStreetMap

Protomaps e OpenStreetMap sono entità separate, ma c’è un legame significativo tra le due piattaforme. Protomaps può infatti utilizzare i dati di OpenStreetMap per creare e visualizzare mappe personalizzate.

Gli sviluppatori che scelgono di usare Protomaps possono sfruttare i dati di OpenStreetMap come base per la creazione delle proprie mappe: informazioni sulle strade, punti di interesse, confini amministrativi e molto altro. L’accesso alle informazioni condivise da OpenStreetMap avviene tramite API e i dati possono essere subito utilizzati per integrare le mappe di Protomaps.

Una mappa del mondo sui propri server

Abbiamo detto che la tecnologia alla base del funzionamento di Protomaps è davvero intelligente. Così, qualunque utente può disporre di una mappa del mondo distribuibile sul cloud storage come singolo file statico in formato PMTiles. Scusate se è poco. Inoltre, le porzioni di mappa che di volta in volta interessano agli utenti possono essere erogate servendosi di semplici richieste HTTP.

Date un’occhiata alla pagina daily builds di Protomaps: la mappa del mondo intero più aggiornata pesa, nel complesso, poco meno di 110 GB. Si tratta di una dimensione sicuramente impegnativa ma neppure così sproporzionata se si pensa che quell’unico file contiene le informazioni geografiche dell’intero pianeta Terra, con un livello di dettaglio invidiabile.

Creare un file PMTiles leggero per l’area che interessa

Protomaps mette a disposizione il programma PMTiles che consente di generare una mappa relativa all’area geografica di proprio interesse. Per estrarre le coordinate da passare all’applicazione PMTiles, si può usare ad esempio bbox finder. Tracciando un rettangolo in corrispondenza della zona che si desidera utilizzare, nella barra degli indirizzi si ottengono le coordinate dei due estremi del rettangolo disegnato sulla mappa.

Dalla pagina di download, si può scaricare PMTitles nelle versioni per Windows, Linux e macOS, per le piattaforme x86 e ARM. Il comando seguente genere un file PMTitles dell’area passata mediante le coordinate estratte da bbox finder:

pmtiles extract https://build.protomaps.com/20231101.pmtiles mappa.pmtiles --bbox=9.613037,42.293564,12.524414,44.512176

Nell’esempio, viene utilizzato come base il file della mappa del mondo pubblicato il 1° novembre 2023 al fine di generare un file PMTiles contenente i dati geografici della regione Toscana e delle zone limitrofe. L’intera procedura dura pochi minuti, compreso il download del file PMTiles risultante (circa 350 MB per l’area indicata). Il file generato si chiama mappa.pmtiles.

Per default, la mappa PMTiles funziona dal livello 5 fino al livello 1 (quello più basso). Questo significa che la mappa così generata può essere ingrandita fino al livello stradale. Basti pensare che la mappa del mondo bloccata al livello 5 (quello generale e meno dettagliato) pesa appena 16 MB (notare l’utilizzo dell’opzione --maxzoom=5):

pmtiles extract https://build.protomaps.com/20231101.pmtiles mondo.pmtiles --maxzoom=5

Come esplorare la mappa generata

Protomaps integra anche un’applicazione Web utile a esplorare la mappa generata e verificarne il funzionamento. Il file PMTiles può essere caricato su un server cloud, ospitato su un servizio di storage S3 o compatibile oppure, ancora, caricato manualmente. Per effettuare una prova, basta visitare PMTiles Viewer, indicare un URL remoto oppure un file locale.

Cliccando sulla scheda Metadata, è possibile verificare l’area coperta dalla PMTile si riferisca esattamente alla zona individuata attraverso bbox finder.

Simon Willison, nel post dal titolo Serving a custom vector web map using PMTiles and maplibre-gl, spiega come creare una pagina Web contenente la versione interattiva della mappa Protomaps.

Lo sviluppatore ha utilizzato Vite come bundler senza un framework specifico e MapLibre GL, una libreria JavaScript per la visualizzazione di mappe interattive, a sua volta basata su mapbox-gl-js. MapLibre GL offre un’ampia gamma di strumenti per la visualizzazione di mappe personalizzate, supportando funzionalità come lo zoom, lo stile personalizzato delle mappe, l’aggiunta di marker, la gestione delle interazioni utente e molto altro ancora. Utilizzando npm, è possibiole installare MapLibre GL, PMTiles, le varie dipendenze e gli stili predefiniti per le mappe Protomaps.

Il codice JavaScript dapprima importa il codice necessario quindi imposta un gestore di protocollo pmtiles che consente a MapLibre GL di caricare il formato di mappa vettoriale PMTiles. Si passa quindi alla configurazione di un oggetto myMap con le varie configurazioni, si specifica il contenitore (container) in cui visualizzare la mappa e si definiscono le fonti e gli stili per la mappa utilizzando PMTiles e i temi forniti da Protomaps. Viene infine impostato il limite massimo della mappa, regolato lo zoom e la visualizzazione dell’area definita nel file PMTiles.