Examples for OSM Web Maps
These examples show how you can use the Google Maps API or OpenLayers to bring OSM maps to
your web site.
Please note: Without an API key you can't do anything with Google Maps. Read the conditions at
http://code.google.com/apis/maps/signup.html
and sign up for a free API key. You have to insert this key in the following examples at the right
places. The examples on this web site use an API key that was obtained for this web site only, they
will not work on your site. You don't need an API key for the OpenLayers examples.
3rd German edition / 1st English edition (2010)
Link |
In 3rd German Edition |
In 1st English Edition |
Description |
gmap-example1.html |
Ch. 14.4, p. 182 |
Ch. 14.4, p. 171 |
A simple Google map. Only the usual "Map", "Satellite", and "Hybrid"
layers are shown.
|
gmap-example2.html |
A simple Google map. In addition to the Google layers there are the
two OpenStreetMap layers "Mapnik" and "T@H" (Tiles@Home/Osmarender). A pin
has been set at the Brandenburg Gate in Berlin.
|
auflage3-ol-example1.html |
Ch. 14.5, p. 185 |
Ch. 14.5, p. 173 |
A simple OpenLayers map with OpenStreetMap layers. This examples uses the
"official" OSM layers "Mapnik" and "Tiles@Home" by way of including a
Javascript library from the OpenStreetMap server. This way they stay
current even if details like the name of a tile server change.
|
auflage3-ol-example2.html |
A simple OpenLayers map with OpenStreetMap layers. This version includes
the layers without resorting to the Javascript library on the OpenStreetMap
server. You can use this example as a base when you have rendered your
own tiles and have your own tile server.
|
auflage3-ol-example3.html |
Building on example 1, this example adds a pin at the Brandenburg Gate in
Berlin to the map.
|
2nd German edition (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.
|
1st German edition (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.
|