Apparire sulla copertina di Times è per chiunque la consacrazione. Nel mondo dell’IT lo è quando si appare su Wired.

OSM è apparso su wired (sicuramente on-line, non sono sicuro per quel che riguarda l’edizione cartacea, mi informerò).

Quello che è più rilevante per noi italiani, è che l’incipit dell’articolo fa riferimento alla qualità della mappe di Roma, opera dei nostri amati mappatori capitolini, in primis Martin.

Compilmenti a voi e continuate così

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

• util.js
• map.css

che vanno inseriti nello spazio dove il file .html sarà ospitato.

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

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