Teil 1: Geodaten von OpenStreetMap mit OpenLayers visualisieren

OpenLayers – Die Welt im Browser
Kommentare

OpenLayers ist eine JavaScript-Bibliothek, die es ermöglicht mit geringem Aufwand interaktive Kartenanwendungen für den Webbrowser zu schreiben. Die Bibliothek ermöglicht eine clientseitige Entwicklung und ist unabhängig von der eingesetzten Serversoftware.

Die Bibliothek ist eine Open-Source-Software, steht unter der BSD-Lizenz und wird von einer großen Entwicklercommunity getragen. Der Entwicklungsprozess wird von einem derzeit achtköpfigen Projektkomitee überwacht. Dadurch, dass OpenLayers clientseitig implementiert ist, können problemlos verschiedenen Server, die Geodaten bereitstellen, angesprochen werden. Wie z. B. vom Google Maps API bekannt, bietet auch OpenLayers so genannte Webmapping-Elemente zum Navigieren oder Ändern des Maßstabes.

Die erste Karte

Um mit der Programmierung zu starten, sollten Sie zuerst die Bibliothek aus dem Internet herunterladen. Sie finden die Adresse unter [1]. Nach dem Entpacken des Pakets sind vorerst die Ordner img und theme und die Datei OpenLayers.js relevant. Um die Entwicklung, insbesondere das Debugging zu vereinfachen, ist ein installierter Firefox inklusive Firebug [2] hilfreich. Ein erstes einfaches Beispiel könnte wie in Listing 1 beschrieben aussehen.

Listing 1


      

Der Quelltext kann einfach in eine Textdatei kopiert, als HTML-Datei gespeichert und anschließend im Webbrowser ausgeführt werden. Die lokale Referenzierung der OpenLayers-Bibliothek ist eigentlich nicht nötig, bietet allerdings einige Vorteile wie z. B. Versionsunabhängigkeit. Wer stetig die aktuellste Version von OpenLayers nutzen möchte, sollte die Bibliothek wie folgt referenzieren:

 

Über die JavaScript-Funktion init()wird dann beim Laden des Dokumentes zuerst ein neues OpenLayers-Map-Objekt erzeugt und der globalen Variable map übergeben. Der Parameter gibt das div-Element an, wo die Karte innerhalb des HTML-Dokuments platziert werden soll. Danach wird ein OpenLayers-Layer-Objekt erzeugt und als Variable dem map-Objekt hinzugefügt. Die Funktion map.zoomToMaxExtent()bewirkt, dass die Karte mit maximalem Zoomfaktor angezeigt wird.

Ein Layer unter der Lupe

Ein einzelner Layer repräsentiert eine visuelle Darstellung eines Kartenservices. OpenLayers unterstützt diverse Layer wie z. B. WMS, Google Maps, Vektoren, Marker und vieles mehr. Es ist ebenfalls möglich, Bilddateien als Layer einzubinden, was z. B. für historische Karten interessant wäre.

Bing, Yahoo, Google? – Kein Problem

Im ersten Beispiel wurde OpenStreetMap als Server für Geodaten benutzt. Wie eingangs erwähnt, ist es auch unproblematisch andere (auch kommerzielle) Geodaten-Server mit OpenLayers anzusprechen. Je nach Kartenanwendung ist auch das Umschalten zwischen verschiedenen Servern zur Laufzeit sinnvoll. Um nun z. B. Google Maps anzusprechen, bedarf es im Quelltext nur geringer Änderung wie in Listing 2 aufgezeigt.

Listing 2
  

Durch die Änderung von drei Zeilen Quellcode im Kopf des HTML-Dokuments wird nun das Google Maps API V3 [3] referenziert und der Hybrid-Layer eingebunden. An dieser Stelle sollte man beachten, dass das Google Maps API V3 erst mit OpenLayers ab Version 2.10 und aufwärts funktioniert. Es ist problemlos möglich, mehrere Layer, welche über einen Layer-Switch gesteuert werden, einzubinden, wie Listing 3 anhand von Bing-Maps-Geodaten [4] beschreibt.

Listing 3
  

Durch das Hinzufügen eines Layer-Switch-Controls kann nun zwischen den verfügbaren Layern umgeschaltet werden. In Listing 3 wird die Karte außerdem über eine bestimmte Position zentriert und mit einem Zoomfaktor „4“ versehen: map.setCenter(new OpenLayers.LonLat
(10.447683,51.163375), 4);

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -