Bevor das erste Beispiel folgt, sollte etwas geklärt werden. OpenStreetMap ist eigendlich nur das Kartenmaterial. Angezeigt werden kann das Kartenmaterial in den verschiedensten Anwendungen. Für das Web empfiehlt sich z.B. OpenLayers, eine Open Source JavaScript Library. OpenLayers wird auch von www.openstreetmap.org selbst genutzt.
Daher benötigen wir für unsere Karte zuerst die Openlayers Library. Den Download gibt es auf www.openlayers.org. Ich arbeite hier mit Version 2.11. Wir benötigen aus dem Download erst mal nur die Ordern „/img“, „/theme“ und die Datei „OpenLayers.js“.
Die wichtigsten Anlaufstellen zum nachschlagen sind:
- http://docs.openlayers.org/
- http://dev.openlayers.org/apidocs/files/deprecated-js.html
- http://openlayers.org/dev/examples/
Teil 1: die erste Karte
Zu beginn steht das HTML-Grundgerüst an. In dem DIV mit der id „map“ wird nachher die Karte angezeigt.
Im Head-Bereich des HTML-Grundgerüst ergänzen wir nun das Openlayers Theme per CSS Datei und laden die OpenLayers.js Libray.
Die folgende init() Funktion führt nach dem Laden der Seite den Code aus um die Karte anzuzeigen. Hier werden alle Einstellungen angegeben, welche zu beginn aktiviert sind. Natürlich ist es später immer möglich auf das „map“ Objekt zuzugreifen um es zu verändern.
Damit die Funktion nach dem Laden des Bodys aufgerufen wird, erweiteren wir den Body-Tag wie folgt.
Das Endergebnis müsste nun sich nun wie in der Demo zu sehen darstellen.