Tim Berners Lee, dal TED, parla dell’importanza dei dati aperti: dal rilascio dei dati da parte degli enti governativi (USA e UK) fino a quelli raccolti dalle comunità online mettendo in evidenza la potenza del progetto OpenStreetMap in particolare a quanto accaduto ad Haiti.
Category Archives: maps
Generatore openlayers con mappe OSM
e dopo il post HOWTO: inserire una mappa OSM nel proprio sito ecco che il buon alessio segnala
OSM SlippyMap Generator

Dall’interfaccia sul sito è possibile scegliere:
- uno o più rendering openstreetmap
- i controlli della mappa (zoom, barra di scala, mappa di overview)
- marcatori (fra cui anche la possibilità di disegnare)
- …
Il risultato è un download di una pagina html, completa di codice OpenLayers, pronta per essere utilizzata nel proprio spazio web.
Nota: assieme all’html generato si devono scaricare anche questi due file
che vanno inseriti nello spazio dove il file .html sarà ospitato.
HOWTO: inserire una mappa OSM nel proprio sito
Una mappa da inserire nella propria pagina
Ogni tanto capita di avere la necessita di inserire nella propria pagina web una mappa corredata
marcatore che mette in evidenza una località.
I sostenitori di Google Maps considerano questa soluzione facilissima in quanto
scegliendo la voce “Link” viene restituito sia il codice da inserire nella propria
pagina che il link.
OpenStreetMap

OpenStreetMap non è da meno. solo che molti utenti non si accorgono delle potenzialità esposte alla voce “Esporta” poco sopra la mappa

Da qui si accede ad una interfaccia, dove, selezionando la voce “HTML incapsulabile”
si ottiene il codice da inserire nella propria pagina che compare vicino alla voce “Risultato”

L’interfaccia, attraverso la voce “Aggiungi un marcatore alla mappa” permette poi
di selezionare un punto sulla mappa, arricchendo cosi la mappa di questa ulteriore informazione.

Questo un esempio del codice prodotto
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=11.0148,45.9894,11.2273,46.1462&layer=osmarender&marker=46.05787,11.12846" style="border: 1px solid black"></iframe><br />
<small>
<a href="http://www.openstreetmap.org/?lat=46.0678&lon=11.12105&zoom=11&layers=0B00FTFTT&mlat=46.05787&mlon=11.12846">
Visualizza una mappa più ampia</a>
</small>
Il codice prodotto non é altro che un “iframe” che carica una pagina esterna al sito
all’interno di quella dove si trova (embed)
Il link alla sola mappa é presente all’indirizzo contenuto nell’attributo src.
Nell’esempio riportato pertanto
http://www.openstreetmap.org/?lat=46.0678&lon=11.12105&zoom=11&layers=0B00FTFTT&mlat=46.05787&mlon=11.12846
CloudMade
Qualora i rendering offerti da OpenStreetMap non siano soddisfacenti ci può affidare al servizio offerto da Cloudmade
alla pagina http://maps.cloudmade.com/

Anche in questo caso, la mappa, é corredata dalla voce “Export”
![]()
Al clic su questa voce viene presentata una finestra da cui poter recuperare il codice con l’iframe

Qui un esempio
<iframe width="460" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.cloudmade.com/iframe?lat=46.059582210771985&lng=11.127262115478516&zoom=13&styleId=1"></iframe>
Purtroppo non è prevista una azione per aggiungere un marcatore, bisogna pertanto intervenire “a mano”.
E’ sufficiente aggiungere, in coda al link contenuto nell’attributo “src” la stringa “&marker=”
seguita dalla coordinate di latitudine e longitudine divise da una virgola.
Qui un esempio:
vogliamo visualizzare un marcatore alle coordinate 46.05787,11.12846
La stringa da aggiungere diventa pertanto &marker=46.05787,11.12846
che nel codice prodotto da Cloudmade viene inserita in questo modo
<iframe width="460" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.cloudmade.com/iframe?lat=46.062446461565&lng=11.135244369506836&zoom=13&styleId=1&marker=46.05787,11.12846"></iframe>
… qui il risultato

Anche nel caso precedente per dare semplicemente il link con la mappa intera basta recuperare le informazioni dall’attributo src del codice scritto sopra.
Pertanto
OpenStreetMap: come usare Walking Papers
Vorresti contribuire ad OpenStreetMap ma non hai un ricevitore GPS, e per di più la zona che ti interessa non è coperta dalle foto satellitari di Yahoo! Maps? Niente di più facile, da oggi c’è Walking Papers, che permette di raccogliere dati sul campo con ottima precisione ed inserirli in OpenStreetMap, usando solo carta e penna, e con qualsiasi sistema operativo, da Windows a Mac, a GNU/Linux, senza collegare cavi o convertire formati. Vediamo come.
COSA SERVE: si da per scontato vi siate già iscritti ad OpenStreetMap (click qui per registrarsi), e di possedere uno scanner. Tutto qui.
1) Ottenere una mappa stampata
Andiamo sul sito di Walking Papers e, nella box a forma “di foglio” selezioniamo l’area che ci interessa. Utilizzando la rotellina del mouse è possibile aumentare o diminuire lo zoom. In base all’ampiezza dell’area che ci interessa, possiamo scegliere uno zoom più o meno alto. Raccomando, per aree “normali”, uno zoom compreso tra 15 e 17.
Occorre ricordare che la box nella quale stiamo trascinando la zampina del mouse è esattamente a forma di A4, ovvero di un normale foglio per stampa, così è più facile regolare lo zoom e la selezione dell’area. Se non vogliamo trascinare molto il mouse, possiamo scrivere nel campo di testo il nome della città o del luogo che stiamo cercando.
Appena abbiamo terminato, facciamo click su Make. Verrà generata dopo qualche secondo una pagina con un link per scaricare la nostra mappa in PDF (Download map PDF for print). Stampiamola, anche in bianco e nero.

Figura 1: selezionare l’area di interesse

Figura 2: scaricare la mappa in PDF
2) Mappare
Andiamo in giro con carta e penna, e disegnamo liberamente sulla nostra mappa di carta, strade, divieti d’accesso, sensi unici, bar, pizzerie, discoteche, parcheggi, colonnine per i grattini, parcheggi per disabili, o semplicemente appuntiamoci i nomi delle strade. Scarabocchiamo la nostra mappa senza alcun timore, tracciamo linee, segnamo nomi, ecc ecc.
3) A casa, armiamoci di scanner
Appena tornati a casa, e dopo una doccia veloce, infiliamo nello scanner la nostra immagine e scansioniamola: il file risultante deve essere un JPG o PNG e deve avere una risoluzione raccomandata di almeno 200 px. Salviamo la nostra immagine da qualche parte sul pc.
4) Inviamo la scansione a Walking Papers
Andiamo nella pagina Upload di Walking Papers, facciamo click su Sfoglia e carichiamo la nostra immagine.

Figura 3: carichiamo la nostra scansione
5) Pronti ad inserire i dati?
Aspettiamo un pò (non so bene se minuti o ore); nella pagina Scans troveremo in elenco la nostra amata scansione. Facciamoci click sopra, e avremo, sul fondo della pagina, due caselle di testo in cui inserire il nostro nome utente e password con cui siamo registrati su www.openstreetmap.org. Dai, fatelo!
Et… voilà! Ciò che avete davanti è l’editor online di OpenStreetMap (Potlatch); facciamo click su “Edit live”, ed avremo la nostra mappa scarabocchiata sovrapposta ai dati già presenti, che potremo modificare tranquillamente, inserendo ciò di cui abbiamo preso nota (rispettando le features, ovviamente). Comodo, vero? E senza spendere un centesimo!
Figura 4: Selezioniamo la nostra scansione dalla lista

Figura 5: Finalmente possiamo inserire i nostri dati, dalla carta da OpenStreetMap!
Considerazioni
Ovviamente l’utilizzo di Walking Papers è fortemente consigliato in uno stadio di mapping molto avanzato, in cui le strade sono presenti quasi tutte. Inoltre, è uno strumento potentissimo se decidiamo di usarlo per prendere nota dei Points of Interest (POI), ovvero tutte le informazioni geografiche che possono essere rappresentate da un punto (locali, fontane, negozi, ecc). Mi sembra anche lo strumento ideale per i mapping party!
Che dire… buon divertimento!
Booklet minitutorial OpenStreetMap
booklet del minitutorial di OpenStreetMap

4 pagine A4 da stampare fronte/retro sul lato lungo per poi piegare al centro e distribuire come piccola guida
Per modifiche:
minitutorial.odt