GPS-Daten mit Openlayers darstellen
Geschrieben von Bernhard Husch   
Samstag, 7. August 2010

GPS-Daten mit Openlayers darstellen

Ambitionierte Wanderer und Radfahrer, die ihre Touren mit einem GPS-Gerät aufzeichnen und im Web darstellen möchten, können das - Dank  Openlayers - mit relativ wenig Aufwand bewerkstelligen. Als Ergebnis erhält man eine dynamische Landkarte basierend auf den DAten von OpenStreetMap, in der man Track, Routen und Wegepunkte veröffentlichen kann.

openlayers-karte.png.png

Openlayers ist eine Programmbibliothek in JavaScript, die eine Programmierschnittstelle (Application Programming Interface - API) zur Darstellung von Geodaten im Webbrowser bietet; sie ist unabhängig vom Betriebssystem und damit sowhl unter MS Windows, Mac OS, Linux usw. völlig gleichlautend einsetzbar. Zudem ist sie Open Source Software, sodass durch ihren Einsatz auf eigenen Websites keine lizenzrechtlichn Probleme auftreten. Weitere Informationen gibt es hier...

Wie geht man nun praktisch vor? Man benötigt einen Webserver, zu dem man per FTP Zugriff auf den Webspace hat. Die eigenen Webseiten werden meist - auf Linux basierten Systemen - in einem Ordner namens httpdoc (o. ä.) gespeichert. hier legt man sich einen eigenen Ordner an, in dem alle für Openlayers vorgesehenen Dateien gespeichert werden. Die Struktur könnte folgendermaßen aussehen:

openlayer-beispiel.png
Man erstellt zunächst im Document-Root-Verzeichnis des Webservers einen neuen Ordner karten, in dem zwei Dateien gespeichert werden müssen, die  einmal für die entsprechende Darstellung im Browser (map.css, eine Cascaded Stylesheet-Vorlage) und die Darstellung von GPX-Dateien (GPX.js, eine JavaScript-Datei) benötigt werden. Diese beiden Dateien bilden für alle folgenden Darstellungen von GPX-Daten den Grundstock; auf diese nehmen auch die jeweiligen HTML-Dateien mit den konkreten Tourdaten Bezug. Den Quellcode dieser beiden Dateien kann man hier beziehen.
 
Im Ordner karten legt man nun einen weiteren Ordner touren an, in dem die jeweiligen Tourdaten gespeichert werden, in unserem  Fall radtour.html und radtour.gpx. Dieses Duo benötigt man immer zur Darstellung der Touren auf der Karte. radtour.gpx wird mit dem FTP-Client in das Verzeichnis hochgeladen. radtour.html muss man in einem Editor zunächst auf dem heimischen Rechner erstellen bzw. - wenn man Shell-Zugriff auf seinen Webserver hat - dort mit einem geeigneten Editor erstellen. In der Regel muss man aber am HTML-File kaum etwas ändern, außer die aktuellen Daten (darüber später mehr).
 
radtour.gpx enthält den Track, den man aufgenommen hat, in radtour.html beschreibt man, wie die Daten im Browser mit der Karte dargestellt werden sollen.
 
So sieht nun radtour.html aus.
 
<html>
<head>
    <title>Radtouren: Tour Brandenburg: Von Strausberg bis Luckenwalde</title>
    <!-- bring in the OpenLayers javascript library
         (here we bring it from the remote site, but you could
         easily serve up this javascript yourself) -->
    <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
    <!-- bring in the OpenStreetMap OpenLayers layers.
         Using this hosted file will make sure we are kept up
         to date with any necessary changes -->
<script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script src="http://www.openlayers.org/api/Ajax.js"></script>
<script src="../GPX.js"></script>

    <script type="text/javascript">
        // Start position for the map (hardcoded here for simplicity,
        // but maybe you want to get from URL params)
        <!-- Breiten- und Längengrad eintragen -->
        var lat=52.029
        var lon=13.739
        <!-- Zoomfaktor einstellen -->
        var zoom=9
       
        var map; //complex object of type OpenLayers.Map

        //Initialise the 'map' object
        function init() {
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.LayerSwitcher(),
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                            maxResolution: 156543.0399,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );

            // Define the map layer
            // Note that we use a predefined layer that will be
            // kept up to date with URL changes
            // Here we define just one layer, but providing a choice
            // of several layers is also quite simple
            // Other defined layers are OpenLayers.Layer.OSM.Mapnik, OpenLayers.Layer.OSM.Maplint and OpenLayers.Layer.OSM.CycleMap
            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik);
            layerTilesAtHome = new OpenLayers.Layer.OSM.Osmarender("Osmarender");
            map.addLayer(layerTilesAtHome);
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            map.addLayer(layerCycleMap);
            // layerMarkers = new OpenLayers.Layer.Markers("Markers");
            // map.addLayer(layerMarkers);

// Add the Layer with GPX Track choose the color of the Track (replace #00FF00 by the HTML code of the color you want)
//                                                                                      gpx-Dateiname  Farbe des Tracks
var lgpx = new OpenLayers.Layer.GPX("Tour Brandenburg: Von Strausberg bis Luckenwalde", "radtour.gpx", "#FF0000");
map.addLayer(lgpx);
           
            var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
            map.setCenter (lonLat, zoom);

            var size = new OpenLayers.Size(21,25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('http://www.openstreetmap.org/openlayers/img/marker.png',size,offset);
            layerMarkers.addMarker(new OpenLayers.Marker(lonLat,icon));
        }
    </script>
   
    <link rel="stylesheet" type="text/css" href="../map.css">
   
</head>
<!-- body.onload is called once the page is loaded (call the 'init' function) -->
<body onload="init();">
    <!-- define a DIV into which the map will appear. Make it take up the whole window -->
    <div style="width:100%; height:100%" id="map"></div>
</body>
</html>
 

Wichtig ist, dass man sich zuerst in der OSM-Karte anschaut, wie die Lage des darzustellenden Tracks ist. Er sollte in der Regel beim Auruf der Karte vollständig zu sehen sein; deswegen müssen Start- und Zielpunkt auf dem Bildschirm liegen. Wenn man z.B. folgende OSM-Karte aufruft, hat man am rechten, unteren Bildschirmrand den Link Permalink:

bildschirmfoto.png

Wenn man den mit der rechten Maustaste anklickt, kann man  den Permalink mit seinen Daten in den Zwischenspeicher kopieren und anschließend in einen beliebigen Texteditor kopieren. Nun sieht man die Breiten- und Längengrade sowie den Zoomfaktor und kann sie in die Datei radtour.html (an den roten Stellen am Anfang) einsetzen.

An den anderen roten Stellen gegen Ende der Datei setzt man den Dateinamen der  zu verwendenden GPX-Datei ein (hier: radtour.gpx) und den Hexadezimalcode der Farbe, in der der Track dargestellt werden soll (Hex-Codes für Farben findest du hier... ). Die blauen Markierungen in der Datei radtour.html geben die Bezüge zu den beiden Dateien an, die im übergeordneten Verzeichnis liegen.

Alle grün markierten  Textstellen sind frei formulierbare Texte.

Letzte Aktualisierung ( Sonntag, 17. Oktober 2010 )