Beispiele zu OSM-Karten im Web
Diese Beispiele zeigen, wie Sie mit der Google Maps API oder mit OpenLayers eine OpenStreetMap-Karte auf Ihre Webseite bringen können.
Bitte beachten Sie: Ohne einen API-Key geht bei Google Maps nichts. Lesen Sie die Bedingungen unter http://code.google.com/apis/maps/signup.html durch und beantragen Sie einen kostenlosen API-Key. Diesen Key müssen Sie bei den folgenden Beispielen an passender Stelle jeweils einsetzen. Die Beispiele auf dieser Webseite benutzen einen API-Key speziell für diese Webseite, er wird auf Ihrer Seite nicht funktionieren. Für die OpenLayers-Beispiele brauchen Sie keinen API-Key.
3. deutsche Auflage / 1. englische Auflage (2010)
Link | In 3. deutscher Auflage | In 1. englischer Auflage | Beschreibung |
---|---|---|---|
gmap-example1.html | Kap. 14.4, S. 182ff | Kap. 14.4, S. 171ff | Eine einfache Google-Karte. Es werden nur die üblichen Google-Layer "Karte", "Satellit" und "Hybrid" angezeigt. |
gmap-example2.html | Eine einfache Google-Karte. Zusätzlich zu den Google-Layern gibt es jetzt die OpenStreetMap-Layer "Mapnik" und "T@H" (Tiles@Home/Osmarender). Am Brandenburger Tor wird ein Pin eingeblendet. | ||
auflage3-ol-example1.html | Kap. 14.5, S. 185ff | Kap. 14.5, S. 173ff | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel benutzt die "offiziellen" OSM-Layer "Mapnik" und "Tiles@Home". Sie werden über eine Javascript-Library eingebunden, die vom OSM-Server geholt wird und sollten daher auch aktuell bleiben, wenn sich Details wie Tileserver-Namen ändern. |
auflage3-ol-example2.html | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel bindet die Layer "Mapnik" und "Tiles@Home" zu Fuß ein. Sie können dieses Beispiel leicht als Grundlage benutzen, wenn Sie selbst eigene Tiles gerendert haben und sie hier einbinden wollen. | ||
auflage3-ol-example3.html | Aufbauend auf dem OpenLayers-Beispiel 1 wird in dieser Karte zusätzlich am Brandenburger Tor ein Pin eingeblendet. |
2. deutsche Auflage (2009)
Link | Kapitel/Seite | Beschreibung |
---|---|---|
gmap-example1.html | Kapitel 14.4, S. 160ff | Eine einfache Google-Karte. Es werden nur die üblichen Google-Layer "Karte", "Satellit" und "Hybrid" angezeigt. |
gmap-example2.html | Eine einfache Google-Karte. Zusätzlich zu den Google-Layern gibt es jetzt die OpenStreetMap-Layer "Mapnik" und "T@H" (Tiles@Home/Osmarender). Am Brandenburger Tor wird ein Pin eingeblendet. | |
auflage2-ol-example1.html | Kapitel 14.5, S. 162ff | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel benutzt die "offiziellen" OSM-Layer "Mapnik" und "Tiles@Home". Sie werden über eine Javascript-Library eingebunden, die vom OSM-Server geholt wird und sollten daher auch aktuell bleiben, wenn sich Details wie Tileserver-Namen ändern. |
auflage2-ol-example2.html | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel bindet die Layer "Mapnik" und "Tiles@Home" zu Fuß ein. Sie können dieses Beispiel leicht als Grundlage benutzen, wenn Sie selbst eigene Tiles gerendert haben und sie hier einbinden wollen. | |
auflage2-ol-example3.html | Aufbauend auf dem OpenLayers-Beispiel 1 wird in dieser Karte zusätzlich am Brandenburger Tor ein Pin eingeblendet. |
1. deutsche Auflage (2008)
Die OpenLayers-Beispiele der 1. Auflage beziehen sich auf eine alte OpenLayers-Version. Auch wenn Sie die 1. Auflage besitzen, sollten Sie die Beispiele aus der 2. Auflage anschauen, die sich auf eine aktuellere Version von OpenLayers beziehen.
Link | Kapitel/Seite | Beschreibung |
---|---|---|
gmap-example1.html | Kapitel 10.4, S. 117 | Eine einfache Google-Karte. Es werden nur die üblichen Google-Layer "Karte", "Satellit" und "Hybrid" angezeigt. |
gmap-example2.html | Kapitel 10.4, S. 118 | Eine einfache Google-Karte. Zusätzlich zu den Google-Layern gibt es jetzt die OpenStreetMap-Layer "Mapnik" und "T@H" (Tiles@Home/Osmarender). Am Brandenburger Tor wird ein Pin eingeblendet. |
ol-example1.html | Kapitel 10.5, S. 120 | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel benutzt die "offiziellen" OSM-Layer "Tiles@Home" und "Mapnik". Sie werden über eine Javascript-Library eingebunden, die vom OSM-Server geholt wird und sollten daher auch aktuell bleiben, wenn sich Details wie Tileserver-Namen ändern. |
ol-example2.html | Kapitel 10.5, S. 120 | Eine einfache OpenLayers-Karte mit OpenStreetMap-Layern. Dieses Beispiel bindet die Layer "Tiles@Home" und "Mapnik" zu Fuß ein. Sie können dieses Beispiel leicht als Grundlage benutzen, wenn Sie selbst eigene Tiles gerendert haben und sie hier einbinden wollen. |