DE:OpenLayers Simple Example
Wie man eine OpenStreetMap-Karte in seine eigene Webseite einbaut
Dieses einfach Beispiel zeigt, wie man einen Ausschnitt von OpenStreetMap auf seiner Webseite anzeigen kann. Mit diesem DHTML-Codeschnipsel baut man die OpenLayers Javascript-Bibliothek ein, um die Karte anzuzeigen.
Hinweis: OpenStreetMap liefert die Tile-Bilder
Bitte beachte, dass die Kartendaten direkt von den Servern von OpenStreetMap kommen. OSM kann für diese Methode keine offizielle Unterstützung geben und kann nicht garantieren, dass die Versorgung konstant bleibt. Die Karten-Server haben immer wieder Ausfälle und sogar die URLs der Karten können sich ändern. Wenn du viele Besucher bzw. viel Traffic erwartest, dann nimm rechtzeitig Kontakt mit den verantwortlichen Entwicklern auf.
Du kannst auch eine eigene Karte erzeugen und einen eigenen Karten-Server betreiben. Dort wird beschrieben, wie man einen eigenen Karten-Server aufsetzt, bzw. die Karte nach eigenen Wünschen gestaltet und erzeugt. Das hat den Vorteil, dass man unabhängiger von den OSM-Karten-Servern wird und es entlastet zudem die OSM-Server.
Anleitung
Kopiere folgender Code in eine neue HTML-Datei:
<html>
<head>
<title>OpenLayers Demo</title>
<style type="text/css">
html, body, #basicMap {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script src="https://openlayers.org/api/OpenLayers.js"></script>
<script>
function init() {
map = new OpenLayers.Map("basicMap");
var mapnik = new OpenLayers.Layer.OSM();
map.addLayer(mapnik);
map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Center of the map
.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
), 15 // Zoom level
);
}
</script>
</head>
<body onload="init();">
<div id="basicMap"></div>
</body>
</html>
Erweiterungen
Wenn man eine andere Basiskarte benutzen möchte, dann kann man dazu folgenden Code verwenden:
var newLayer = new OpenLayers.Layer.OSM("New Layer", "path_to_tiles/", {numZoomLevels: 19});
- "New Layer" - im Menü anzuzeigender Name der Basiskarte
- "path_to_tiles" - URL zum Server der Basiskarte
- "numZoomLevels:" - Anzahl der verwendeten Zoomstufen
Mögliche Basiskarten sind:
| Basiskarte | URL | Zoomstufen |
|---|---|---|
| OpenLayers.Layer.OSM.Mapnik | 19 | |
| OpenLayers.Layer.OSM.Maplint | ||
| OpenLayers.Layer.OSM.CycleMap |
Diese Idee weiterentwickeln?
Jeder ist eingeladen diese Seite und den Code weiter zu verbessern. Das Original stammt von Harry Wood und zeigt nur das Notwendigste mit lediglich einem definiertem Layer und ohne URL-Parameter Unterstützung (Permalink). Die Version von OpenLayers ist 2.13 vom Server openlayers.org - schon ein wenig angestaubt. Sollten also weitere Ideen da sein, diese Methode zu verbessern, dann immer her damit.
Minimallösung Button
Button als Link zu einem Kartenausschnitt nutzen. Beispiel „Kirche Köthen“ Die Webadresse ist hierbei durch eine eigene zu ersetzen, dazu die Funktion Permalink in der OSM Karte nutzen.
Anleitung
Kopiere folgender Code eines Buttons „Anfahrt“. Der Button kann nach belieben in Style angepasst werden.
<button onclick="window.location.href = 'https://openstreetmap.de/karte/?zoom=18&lat=51.75117&lon=11.97369&layers=B00TT';"
style=
"text-align:center; font-size:24px"
type="button">Anfahrt</button>
Verwandte Artikel
- OpenLayers Marker - zeigt eine Markierung auf einer Karte an
- Openlayers POI layer example - erklärt, wie man POI's bei einem Overlay-Layer anzeigt
- OpenLayers Seite - vollständige Dokumentation über die benutzen Klassen
- OpenLayers Beispiele - für weitere Hilfe und Inspiration bei der Benutzung von OpenLayers