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.

Artikelserie
Teil 1: Geodaten von OpenStreetMap mit OpenLayers visualisieren
Teil 2: OpenLayers im Zusammenspiel mit Delphi

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

<!DOCTYPE html>

<html>

<head>

    <meta charset=’utf-8′ />

    <script type=“text/javascript“ src=“../openlayers/OpenLayers.js“></script>

    <script type=“text/javascript“>

 

        var map;

 

        function init() {

            map = new OpenLayers.Map(‚map‘);

            var osm = new OpenLayers.Layer.OSM(„OpenStreetMap Layer“);

            map.addLayers([osm]);

                map.zoomToMaxExtent();

        }

    </script>

</head>

 

<body onload=“init()“>

    <div id=“map“ style=“width: 600px; height: 300px“></div>

</body>

</html>

Ende

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:

<script type=“text/javascript“

         src=“http://openlayers.org/api/OpenLayers.js„></script>

Ü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

    <script type=“text/javascript“ src=“../openlayers/OpenLayers.js“></script>

 

        <script type=“text/javascript“

               src=“http://maps.google.com/maps/api/js?sensor=false></script>

 

    <script type=“text/javascript“>

 

        var map;

 

        function init() {

            map = new OpenLayers.Map(‚map‘);

            var gm_hybrid = new OpenLayers.Layer.Google(„Google Maps

                     Hybrid Layer“,{type : google.maps.MapTypeId.Hybrid});

                map.addLayers([gm_hybrid]);

                map.zoomToMaxExtent();

        }

    </script>

Ende

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

<script src=

        „http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=

                                                 6.2&amp;mkt=en-us“></script>

    <script type=“text/javascript“>

 

        var map;

 

        function init() {

            map = new OpenLayers.Map(‚map‘);

            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var shaded = new OpenLayers.Layer.VirtualEarth(„Shaded“, {

                        type: VEMapStyle.Shaded

               });

                var hybrid = new OpenLayers.Layer.VirtualEarth(„Hybrid“, {

                        type: VEMapStyle.Hybrid

                });

                var aerial = new OpenLayers.Layer.VirtualEarth(„Aerial“, {

                        type: VEMapStyle.Aerial

                });

                map.addLayers([shaded, hybrid, aerial]);

                map.setCenter(new OpenLayers.LonLat(10.447683,51.163375), 4);

        }

    </script>

Ende

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);

Marker und Vektoren

Mit OpenLayers können ebenso wie von anderen Bibliotheken bekannt, Marker und Vektoren auf die Karte projiziert werden. In Listing 4 wird der Karte zuerst ein Marker-Layer hinzugefügt. Auf diesen Layer wird dann letztendlich der Marker gesetzt.

Listing 4

    <script type=“text/javascript“>

 

        var map;

 

        function init() {

            map = new OpenLayers.Map(‚map‘);

            var osm = new OpenLayers.Layer.OSM(„OpenStreetMap Layer“);

            map.addLayers([osm]);

            var lonLat = new OpenLayers.LonLat(10.447683,51.163375).transform(

                        new OpenLayers.Projection(„EPSG:4326“),

                        map.getProjectionObject()

                        );

 

                   var markers = new OpenLayers.Layer.Markers( „Markers“ );

                   map.addLayer(markers);

 

                   markers.addMarker(new OpenLayers.Marker(lonLat));

 

                   map.setCenter(lonLat, 4);

        }

    </script>

Ende

Vektoren werden genau wie Marker benutzt, um Daten oberhalb eines Karten-Layers darzustellen. Listing 5 demonstriert den Einsatz einer Toolbar, mit der sehr einfach Vektoren auf die Karte gezeichnet werden können.

Listing 5

<script type=“text/javascript“>

 

    var map;

 

    function init() {

        map = new OpenLayers.Map(‚map‘);

        var osm = new OpenLayers.Layer.OSM(„OpenStreetMap Layer“);

        var vector_layer = new OpenLayers.Layer.Vector(‚Vector Layer‘);

        map.addLayers([osm,vector_layer]);

        map.addControl(new OpenLayers.Control.EditingToolbar(vector_layer));

        var lonLat = new OpenLayers.LonLat(10.447683,51.163375).transform(

                        new OpenLayers.Projection(„EPSG:4326“),

                        map.getProjectionObject()

                        );

        map.setCenter(lonLat, 6);

    }

</script>

Ende

Die Darstellung anpassen

Die Darstellung von Steuerelementen, Markern und Vektoren kann komplett geändert und an die eigenen Bedürfnisse angepasst werden. Es ist z. B. auch möglich, Steuerelemente außerhalb der Karte zu platzieren oder mit CSS zu formatieren. Listing 6 zeigt die Verwendung eines eigenen Icons als Marker, welcher sich direkt im Verzeichnis der HTML-Datei befindet.

Listing 6

    <script type=“text/javascript“>

 

    var map;

 

    function init() {

        map = new OpenLayers.Map(‚map‘);

        var osm = new OpenLayers.Layer.OSM(„OpenStreetMap Layer“);

        map.addLayers([osm]);

        var lonLat = new OpenLayers.LonLat(10.447683,51.163375).transform(

                    new OpenLayers.Projection(„EPSG:4326“),

                    map.getProjectionObject()

          );

 

        var markers = new OpenLayers.Layer.Markers( „Markers“ );

        map.addLayer(markers);

        map.setCenter(lonLat, 4);

 

        var size = new OpenLayers.Size(21,25);

        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);

        var icon = new OpenLayers.Icon(‚marker.png‘,size,offset);

markers.addMarker(new OpenLayers.Marker(lonLat,icon));

    }

</script>

Ende

Ein Blick über den Tellerrand: leaflet.js

OpenLayers ist nicht die einzige frei verfügbare JavaScript-Bibliothek für die Verarbeitung und Darstellung von Geodaten. Unter [5] finden Sie eine leichtgewichtige Bibliothek mit einem modernen Look and Feel, welche derzeit in Version 0.2.1 vorliegt. Eine kleine Beispielanwendung unter Verwendung eines OpenStreetMap-Layers und eines Markers finden Sie in Listing 7.

Listing 7

<!DOCTYPE html>

<html>

<head>

    <meta charset=’utf-8′ />

    <link rel=“stylesheet“ href=“ ../leaflet/leaflet.css“ />

    <script src=“ ../leaflet/leaflet.js“></script>

    <script type=“text/javascript“>

 

        function init() {

            var map = new L.Map(‚map‘);

            var osmUrl = ‚http://tile.openstreetmap.org/mapnik/{z}/{x}/{y}.png‘,

                osmAttrib = ‚Map data &copy; 2011 OpenStreetMap contributors‘,

                osm = new L.TileLayer(osmUrl, {maxZoom: 18, attribution:

                                                                    osmAttrib});

 

                var london = new L.LatLng(51.505, -0.09);

                map.setView(london, 7).addLayer(osm);

 

               var markerLocation = new L.LatLng(51.5, -0.09);

               var marker = new L.Marker(markerLocation);

               map.addLayer(marker);

           }

    </script>

</head>

 

<body onload=“init()“>

    <div id=“map“ style=“width: 600px; height: 300px“></div>

</body>

</html>

Ende

Wie geht’s weiter?

OpenLayers ist sehr gut dokumentiert in [6] und [7]. Unter [8] befinden sich zahlreiche Beispiele, die einen sehr guten Einstieg, aber auch komplexe Anwendungen aufzeigen. In der kommenden Ausgabe des Entwickler Magazins wird die Benutzung von OpenLayers in Desktopanwendungen mithilfe von Delphi ausführlich beleuchtet.

 

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -