OSM-Karten mit eigenen GPX-Tracks überlagern

Posted on by

OpenStreetMap-Karten lassen sich recht einfach mit eigenen erstellten Tracks im GPX-Format überlagern. Im OpenStreetMap-Wiki finden sich zu diesem Thema einige Einträge.
Schlüssel dazu ist die JavaScript-Bibliothek OpenLayers.js. Der folgende HTML-Kode demonstriert die vorgehensweise. In Zeile 8 wird das notwendige Script der OpenStreetMap-API geladen. In den Zeilen 16-18 wird das Zentrum und die Zoom-Stufe der Karte initialisiert. Der eigentliche GPX-Track wird mit dem Aufruf von OpenLayers.Layer.Vector übergeben, hier kann auch ein Bezeichner für den Track übergeben werden, auch die Farbe und die Durchsichtigkeit können hier eingestellt werden. Um den Kode auf dem heimischen Rechner zu testen. Sollte man im selben Verzeichnis, wo der Kode und der GPX-Track abgelegt ist einen Webserver starten, z.B. durch den Aufruf von: python -m SimpleHTTPServer 8082. Nun kann die Seite im Browser durch http://localhost:8082/OSM-Karte-overlays-GPX-Tracks.html aufgerufen werden, vorausgesetzt JavaScript ist im Browser (zumindest für die entsprechende Seite) eingeschaltet.
Verfügt man über eigenen Webspace, wie bspw. bei www.bplaced.net, so kann man die Dateien natürlich auch dort zur Verfügung stellen (im Dashboard von WordPress kann man übrigens keine GPX-Dateien uploaden, dieser Dateityp ist per Voreinstellung gesperrt, man muß den Umweg über ftp gehen und die Dateien unter dem Pfad wp-content/uploads/<year>/<month>/.. ablegen).
Fügt man dann einen Link auf die Datei in seinem Dokument ein, so kann die Karte von jedermann betrachtet werden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

<html>
<head>
        <title>Simple OSM GPX Track</title>
        <!--  OpenLayers javascript library
                 Wir binden die  Bibliothek direkt aus dem Internet ein, 
                 die Datei kann bei Bedarf aber auch lokal abgespeichert werden)
         -->
        <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
        <!-- OpenStreetMap OpenLayers layers.
                Diese Datei bevorzugt aus dem Internet laden um sie aktuell zu halten 
         -->
        <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
 
        <script type="text/javascript">
                // Startposition auf der Karte
                var lat=50.83398
                var lon=14.05214
                var zoom=13
 
                var map; //complex object of type OpenLayers.Map
 
                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
                        // Here we use a predefined layer that will be kept up to date with URL changes
                        layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
                        map.addLayer(layerMapnik);
                        layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
                        map.addLayer(layerCycleMap);
                        layerMarkers = new OpenLayers.Layer.Markers("Marker");
                        map.addLayer(layerMarkers);
 
                        // Layer mit GPX-Track Start
                        var lgpx = new OpenLayers.Layer.Vector("Mückentour", {
                                strategies: [new OpenLayers.Strategy.Fixed()],
                                protocol: new OpenLayers.Protocol.HTTP({
                                        url: "Mückentour.gpx",
                                        format: new OpenLayers.Format.GPX()
                                }),
                                style: {strokeColor: "black", strokeWidth: 5, strokeOpacity: 0.5},
                                projection: new OpenLayers.Projection("EPSG:4326")
                        });
                        map.addLayer(lgpx);
                        //Layer mit GPX-Track Ende
 
 
                        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>
 
</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:90%; height:90%" id="map"></div>
</body>
</html>

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

HTML-Tags sind nicht erlaubt.