decocode decocode deco    

Landkarten von OpenStreetMap einbinden #

OpenStreetMap-Karten mögen zwar mitunter nicht ganz so umfangreich sein wie jene von Google Maps, auch gibt es keine Satellitenbilder oder Geländereliefs, doch sind sie dafür Open Source und mit wesentlich weniger Aufwand in eine Website einzubinden.

Hier ein Beispiel für eine eingebettete Karte:


größere Karte

Dies ist der verwendete Code für die Karte:

Quelltext auswählen
1
2
3
4
5
6
7
<div style='text-align:center;'>
<iframe
  style='border:1px solid #000;width:700px;height:400px;'
  src='http://www.openstreetmap.org/export/embed.html?bbox=13.4,52.515,13.416,52.523&amp;marker=52.52,13.408&amp;layer=mapnik'>
</iframe><br>
<a href='http://www.openstreetmap.org/?lat=52.52&amp;lon=13.408&amp;zoom=16&amp;layers=M&amp;mlat=52.52&amp;mlon=13.408'>größere Karte</a>
</div>

Die verwendeten Parameter des Links in Zeile 4 bedeuten:

bbox
Vier geografische Angaben der westlichen, südlichen, östlichen und nördlichen Grenze des dargestellten Kartenausschnittes. Falls die Dimensionen nicht mit denen des Iframes übereinstimmen, wird die Karte entsprechend angepasst.

marker
Breiten- und Längenposition eines optionalen Markers.

layer
Die verwendete Renderingmethode. Möglich sind mapnik und osmarender.

Möchte man auf eine Seite des OpenStreetMap-Projekts verlinken, die eine größere Ansicht der Karte bietet, so kann man folgende Parameter an den Link anhängen (s. Zeile 6):

lat
Geografische Breite des Kartenmittelpunkts

lon
Geografische Länge des Kartenmittelpunkts

zoom
Vergrößerungsfaktor der Karte

layers
Zusätzliche eingeblendete Details

mlat
Geografische Breite des Markers

mlon
Geografische Länge des Markers

Die Parameter erhält man, wenn man auf openstreetmap.org einen Kartenausschnitt in der gewünschten Ansicht einstellt und dann unten rechts auf den Link ›Permalink‹ klickt. Dadurch wird die Adresse in der Adressleiste des Browsers aktualisiert, und man kann die benötigten Werte von dort einfach kopieren.