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