OpenStreetMap e SVG (aka elaborare la mappa di OSM in Illustrator) 3

Share Button

Il problema

Una richiesta che mi sento ricorrente da chi opera nel mondo della grafica è

“Ma come posso portare la mappa di OpenStreetMap in Illustrator?”.

La risposta più semplice ed efficace è

“Basta che esporti i dati in SVG!”

Questo accende subito il sorriso di gioia sulle labbra di chi domanda che arriva con la seconda domanda

“E come si fa?”.

Girando su wiki.openstreetmap.org si trovano molte risposte a questa domanda. Semplicemente cercando la parola SVG si arriva ad una pagina ricca di risposte e con riferimenti anche al caso di chi usa Illustrator invece che Inkscape.
La necessità di avere il formato vettoriale (es. SVG) invece che raster (es. una immagine in jpg) nasce dall’esigenza di poter cambiare tutti gli oggetti che sono rappresentati sulla mappa.
Solitamente un grafico (poco smart) fa lo screenshot dello schermo e poi comincia a ricalcare quello che vede (o che interessa avere) e a definirne i colori.
Qualora invece si disponga di un formato vettoriale questo diventa tutto più facile in quanto, ogni oggetto che forma la mappa, può essere modificato o nella forma o nel modo di rappresentarlo.
Nota aggiuntiva: un esperto di sistemi informativi territoriali invece vuole avere i dati in formato geografico (generalmente esri shapefile) e poi fare la stessa operazione.

Esportare in SVG da www.openstreetmap.org

Tornando però al problema di convertire una mappa openstreetmap in un formato valido per Illustrator, le soluzioni sono diverse: plung proprietari per Illustrator, librerie come kartograph, software come QGIS o TileMill o Mapbox o … che dopo aver convertito i dati di openstreetmap in formati gis e definito gli stile di rappresentazione permettono l’esportazione in SVG, o, infine, servizi online come Lokaler o Sharemap, ecc..

La via però più immediata viene dalla stessa mappa di OpenStreetMap che offre una funzione di esportazione in vari formati (e che molti non si accorgono della sua esistenza).
Si tratta semplicemente di fare clic sull’inconcina della condivisione (rappresentato da un quadrato da cui esce una freccia) e … magia! Fra i vari formati disponibili compare anche SVG e si può procedere con il download.
Il comando in realtà chiama il servizio render.openstreetmap.org a cui vengono passati i valori degli estremi delle coordinate del quadrato (bbox) che contiene la mappa, la scala (scale) e il formato (format=svg).
Qui un esempio
Non sempre però il file che si ottiene viene gestito bene da Illustrator, inoltre, in diversi casi, vengono scelte aree molto grandi per cui il file impiega troppo ad essere generato e, quindi, il server rifiuta la chiamata.
In questi casi è utile usare una delle soluzioni elencate sopra.

Esportare per Adobe Illustrator da Maperitive

Quella che ritengo la via più semplice per chi viene dal mondo della grafica, è dato da Maperitive: si tratta di un software proprietario (= i sorgenti non sono disponibili) distribuito però gratuitamente. Il programma è scritto in .NET C#, e – per tale motivo – può essere eseguito su Windows (nativamente), Linux e MacOSX (in entrambi i casi installando mono e lanciando il file Maperitive.sh)
Il motto di questo software è “Paint the World” (= “dipingi il mondo”).
L’idea di fondo è semplicissima:
1. seleziona un area
2. scarica i dati da openstreetmap
3. eventualmente scarica altri dati (es. isoipse)
4. eventualmente scarica anche la mappa come immagine (tile) da OpenStreetMap o altri rendering disponibili utilizza delle regole per definire gli stili degli oggetti da rappresentare
6. eventualmente creane di nuove o modifica le esistenti
7. esporta il risultato in svg o in immagini o in formato 3D o …

Per soddisfare la richiesta di avere un file .svg da dare in pasto a Illustrator basato sui dati di OpenStreetMap bastano quattro passaggi nello specifico (1, 2, 5 e 7).
Supponiamo che l’area da prendere in considerazione sia quella del centro storico di Trento.

questa area possiamo selezionarla sia navigando la mappa su Maperitive che andando a curiosare su quali sono le coordinate del rettangolo che la contiene premendo “export” dalla mappa di OpenStreetMap.

Maperitive ha il vantaggio di essere utilizzabile sia attraverso l’interfaccia grafica che da una linea di prompt comandi disponibile sotto la mappa.

Maperitive interfaccia grafica

Da interfaccia grafica è sufficiente seguire questi passaggi:

1. navigare la mappa sull’area di interesse

2. eliminare l’immagine della mappa

3. scaricare i dati da OpenStreetMap via overpass-api

4. applicare uno stile

5. esportare per Adobe Illustrator

Maperitive: tutto da linea di comando

La versione “quick&dirty” da linea di comando invece si presenta con questa sequenza:

remove-source 1
download-osm-overpass bounds=11.1321,46.0635,11.1104,46.0711
apply-ruleset 1
export-svg file=/tmp/output.svg zoom=14 ai-autorescale=true compatibility=illustrator

remove-source 1
Maperitive si presenta caricando la mappa da OpenStreetMap. Attraverso questo comando la mappa viene rimossa.
Questa operazione è necessaria per il fatto che l’immagine verrebbe inglobata nel SVG, quando invece non serve.
download-osm-overpass bounds=11.1321,46.0635,11.1104,46.0711
questo comando va a scaricare i dati da OpenStreetMap attraverso overpass-api.
Le coordinate sono recuperate guardato il botton “export” da OpenStreetMap e partendo dal valore più a destra proseguendo in senso orario.
apply-rulset 1
Maperitive offre diversi stili di rappresentazione dei dati. Quando viene installato lo stile numero 1 è quello usato sulla mappa di OpenStreetMap. Se ne si volesse uno in stile Google Maps basta scegliere il 3.
export-svg file=/tmp/output.svg zoom=14 ai-autorescale=true compatibility=illustrator
Questo è il comando che esporta la mappa in un formato svg compatibile con Adobe Illustrator (si veda l’ultimo parametro).
Il file generato viene creato secondo quanto definito dalla variabile omonima. Ulteriori parametri sono quelli sul livello di zoom e una impostazione per migliorare l’output per Illustrator.

Ricordati di citare la fonte!

Come vedete è molto molto semplice.
Solo una nota conclusiva per tutti i grafici:
l’uso dei dati di OpenStreetMap in questo modo ricade come opera derivata dai dati, pertanto, seguendo i vincoli della licenza ODbL (quella con cui i dati sono distribuiti), è importante ricordarsi di scrivere sulla mappa
“Map Data © OpenStreetMap contributors”
Semplice no? Si tratta solo di buona educazione!

Share Button

3 thoughts on “OpenStreetMap e SVG (aka elaborare la mappa di OSM in Illustrator)

  1. Reply Nemo Giu 30,2017 22:08

    Ma non c’è un comando per convertire direttamente l’SVG “vero” in un SVG “instupidito” per Illustrator, cioè l’unico passaggio per cui si distingue Maperitive?

    • Reply napo Lug 4,2017 09:42

      Non avendo mai usato software proprietario come Adobe Illustrator non sono in grado di risponderti.
      Suppongo che non sia una operazione difficile da implementare.
      In ogni caso, il vantaggio di farlo con Maperitive, è che si possono costruire stili diversi: il servizio di export di SVG presente sul sito ufficiale di OpenStreetMap esporta solo il rendering ufficiale.
      L’altra alternativa è quella di usare Mapnik o TileMill e i vari stili rilasciati in riuso (o crearne ad hoc).

  2. Reply napo Lug 7,2017 11:22

    Nel frattempo segnalo questo altro tool per creare mappe online basate su OpenStreetMap
    http://printmaps-osm.de:8080

Leave a Reply