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

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

Trento su OSM

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

embedOSM2

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
embedOSM3

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.

embedOSM5

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/

embedOSM6-1

Anche in questo caso, la mappa, é corredata dalla voce “Export

embedOSM6-2

Al clic su questa voce viene presentata una finestra da cui poter recuperare il codice con l’iframe

embedOSM6

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
embedOSM7

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

http://maps.cloudmade.com/iframe?lat=46.062446461565&lng=11.135244369506836&zoom=13&styleId=1&marker=46.05787,11.12846

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!