Beispiele zu OSM-Karten im Web
(Zu Kapitel 10.4, S. 117 und Kapitel 10.5, S. 120)
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://www.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.
| 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. |
![[Titelbild]](/img/cover.png)