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. |
![[Cover image]](/img/english1-cover.png)
![[Cover image]](/img/auflage3-cover-small.png)