HOWTO: inserire una mappa OSM nel proprio sito 4

Share Button

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

Share Button

4 thoughts on “HOWTO: inserire una mappa OSM nel proprio sito

  1. Pingback: Il binario della mia vita... » Inserire mappe OSM nei siti web

  2. Pingback: de.straba.us » Blog Archive » Generatore mappe openlayer con OSM

  3. Reply simone Ott 5,2009 14:53

    siccome si parla di inserimento di openstreetmap in remoto, vi segnalo anche una guida che ci spiega come avere la mappa di Openstreetmap in locale senza la necessità di appoggiarsi ad internet.
    http://symrad.blogspot.com/2009/10/creare-una-mappa-in-locale-con.html

  4. Pingback: toner map #borgosmaria | PORTOBESENO

Leave a Reply