Verknüpfung eines OpenLayers gpx Tracks mit dem Höhenprofil

[skifidelity]

Hallo Forum,

ich würde gerne eine Lösung wie hier: http://www.bergfex.at/sommer/going/wandern/1617/ auf Basis einer selbst gerenderten und selbst gehosteten Karte mit OSM Daten für ein größeres Projekt umsetzen. Wenn ihr da mal die Maus über dem Höhenprofil bewegt seht ihr, dass sich ein dynamischer POI auf der Karte den Track entlang bewegt.
Ich würde als Basis Tiles, die mit Mapnik gerendert wurden, einsetzen. Die Tracks werden mit OpenLayers auf die Karte gelegt.
Ich habe so ungefähr eine Vorstellung wie ich das Ganze selbst programmieren könnte und eben beim Bewegen der Maus die OpenLayers Features update. Bevor ich mir da aber selbst Gedanken mache, wollte ich fragen ob schon mal jemand Erfahrungen gesammelt hat, oder ob es gar schon Anleitungen gibt, wie solche Features mit OSM Karten realisiert werden könnten.

Danke schonmal
Martin

[kaspressknoedel]

Hallo!

Hab mal versucht das Problem mit jquery und jquery.flot zu lösen. Ist mir auch halbwegs gelungen.

http://www.kaspressknoedel.com/media/blogs/rangger_koepfl/map_rangger.html

Es gibt aber noch einige kleine Probleme:

1.) es scheint im IE nicht möglich sein die gpx daten zu empfangen (Höheprofil wird nur im Firefox angezeigt).

code:

var http = null;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
http.overrideMimeType(“text/xml”);
} else if (window.ActiveXObject) {
http = new ActiveXObject(“Microsoft.XMLHTTP”);

}
if (http != null) {
http.open(“GET”, window.file_name, false);
// http.setRequestHeader(‘Content-Type’, ‘text/xml’);

//http.onreadystatechange = ausgeben;
http.send(null);
}

2. Der marker nicht versetzt sonder immer neu aufgebaut. Position wird aus den zuvor im array gespeicherten Daten ermittelt

Code:

if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
index_dt = item.dataIndex;
//markers.markers[0].destroy();

               var langBreit_PT = new OpenLayers.LonLat( parseFloat(dataPt[1][item.dataIndex]), parseFloat(dataPt[2][item.dataIndex]) )
     			.transform(
        			new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
        			map.getProjectionObject() // to Spherical Mercator Projection
      			);
		//window.markers.markers[0].destroy();

		window.markers.addMarker(new OpenLayers.Marker(langBreit_PT,icon));
		

                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(2),
                    y = item.datapoint[1].toFixed(2);
                
                showTooltip(item.pageX, item.pageY,
                            "Km" + " " + x + " Meereshoehe " + y);


            }
        }

Wäre glücklich über eine kritische Diskussion

[maxbe (Max)]

@kaspressknoedel

1.) es scheint im IE nicht möglich sein die gpx daten zu empfangen (Höheprofil wird nur im Firefox angezeigt).

code:

var http = null;
if (window.XMLHttpRequest) {
http = new XMLHttpRequest();
http.overrideMimeType(“text/xml”);
} else if (window.ActiveXObject) {
http = new ActiveXObject(“Microsoft.XMLHTTP”);

Mein IE8 kennt zwar “window.XMLHttpRequest” steigt aber dann bei “overrideMimeType” aus.
Da hat sich mit Einführung von IE 7 was geändert, schau mal da: http://robert.accettura.com/blog/2006/12/02/xmlhttpreqoverridemimetype-in-ie7/

[ikonor]

@kaspressknoedel

1.) es scheint im IE nicht möglich sein die gpx daten zu empfangen (Höheprofil wird nur im Firefox angezeigt).

Versuchs mal mit OpenLayers.Request.GET, siehe diesen Post.

Dort ist auch ein anderes Beispiel mit Höhenprofil verlinkt.

@kaspressknoedel

2. Der marker nicht versetzt sonder immer neu aufgebaut. Position wird aus den zuvor im array gespeicherten Daten ermittelt

Einen Marker kann man mit “moveTo(OpenLayers.Pixel)” verschieben, dazu muss Marker.map gesetzt sein, z.B. (ungetestet):

marker.map = map;
...
marker.moveTo(map.getLayerPxFromLonLat(langBreit_PT));

Gruß,
ikonor

[kaspressknoedel]

Habs jetzt mit folgenden code hinbekommne

if (window.ActiveXObject) {
   request = new ActiveXObject("Microsoft.XMLHTTP");
   request.open("GET", window.file_name, false);
   request.send(null);

} else {

   request = new XMLHttpRequest();
   request.overrideMimeType("text/xml");
   request.open("GET", window.file_name, false);
   request.send(null);
}

window.markers.markers[0].moveTo(map.getLayerPxFromLonLat(langBreit_PT));

funktioniert auch super!

Hab jetzt nur ein Problem mit Flot und IE8. Die datenpunkte des Höhenprofils werden nicht angezeigt

[kaspressknoedel]

Hallo!

hab jetzt die gpx file in ein xml file umbenannt (Endung ausgebessert) und es ging auf einmal auch im Internetexplorer. kann sich das jemand erklären? Davor hat kann der IE das Objekt XMLHttpRequest aber das Objekt responseXML war leer.

[ikonor]

Kann es evtl. sein, dass er über die .xml Endung den Content-Type ermitteln kann und sonst nicht? Das hieße, dass auch im IE Fall der Content-Type/MimeType explizit gesetzt werden muss?

Wenn es keinen speziellen Grund gibt, würde ich das XMLHttpRequest Handling nicht selbst machen, sondern OpenLayers.Request.GET verwenden, das wird intern im GML Layer verwendet und dort funktioniert es ja.

[kaspressknoedel]

Wenn es keinen speziellen Grund gibt, würde ich das XMLHttpRequest Handling nicht selbst machen, sondern OpenLayers.Request.GET verwenden, das wird intern im GML Layer verwendet und dort funktioniert es ja.

Hab das mit dem IE über OpenLayers.Request.GET gemacht funktioniert nur wenn die Endung der datei mit xml aufhört

if (window.ActiveXObject) {
  var request = OpenLayers.Request.GET({
    url: window.file_name,
    async: false
});

[ikonor]

Ich konnte das bei mir lokal nachvollziehen. Mit der Endung .gpx ist nur responseText, nicht responseXML gesetzt. Da mich interessiert hat, wieso das beim Layer.GML funktioniert, hab ich mir den Source-Code angeschaut.

OpenLayers berücksichtigt das in folgendem Code und parst das XML nachträglich aus responseText:

OpenLayers\Layer\GML.js

    requestSuccess:function(request) {
        var doc = request.responseXML;
        
        if (!doc || !doc.documentElement) {
            doc = request.responseText;
        }

OpenLayers\Format\GPX.js

    read: function(doc) {
        if (typeof doc == "string") { 
            doc = OpenLayers.Format.XML.prototype.read.apply(this, [doc]);
        }

Daher müsstest du das in deinem Code wohl ähnlich behandeln.

[kaspressknoedel]

Hab gesehen, dass oben der link nicht mehr funktioniert. Hier ein anderer

http://www.kaspressknoedel.com/media/map/karte2.php?var=st_moritz