Hilfe bei OpenLayers

Du kannst dem Permalink eine Element-id mit übergeben:

new OpenLayers.Control.Permalink(‘permlink’)

und dort im Prinzip irgendwas reinschreiben:

Reload

Edit: von manuellem Basteln an openlayers.js würde ich eher abraten, das rächt sich beim nächsten Versionsupdate.

Ich habs!

In der OpenLayers.js in der Zeile 731, Spalte 377 ist der Name “Permalink”. Wenn man den unbennent in z.b. “Reload” steht das auch unten rechts in der Webseite!

Bleibt nur noch mein Problem mit den Internet Explorer :frowning:

PS: Jetzt lief es, komisch :roll_eyes:
Ist für den Internet Explorer denn trotzdem ein extra css notwendig/sinnvoll?
Weil in dem “normalen” OpenLayers ohne Offline Tiles wird ja auch eine 2te css datei verwendet?

Keine 'ne Idee? :frowning:

Ich hab noch eine Frage: Kann man am Anfang und am Ende einer Route einen Marker setzen?
Ich hab ein Beispiel hochgeladen: http://www.david-guillot.tk/OpenLayers/OpenLayers.html
Hier endet die Route ja einfach, aber ist es möglich am Anfang und am Ende einen Roten (Anfang)und einen Grünen (Ende) zu setzen?

PS: Danke für die super Hilfe bisher und eure Mühe mir zu helfen, auch wenn es vielleicht ziemlich viele Fragen zu OpenLayers sind :slight_smile:

Wie wär’s stattdessen mit Leaflet?

Code: https://github.com/mpetazzoni/leaflet-gpx
Demo: http://mpetazzoni.github.io/leaflet-gpx/

Danke für deine Antwort! :slight_smile:

Klingt ganz gut, aber ich hab mich inzwischen sehr mit OpenLayers angefreundet und bin eigentlich sehr glücklich mit OL!
Gibt’s denn keine Möglichkeit?

Meine Idee:
Ein HTML Script müsste die erste Koordinate in der Datei und die letzte herausfinden, die erste Koordinate ist dann der Startpunkt, also die Koordinate wo der erste Marker hinkommt und die letze Koordiante der Punkt wo der zweite Marker hinkommt.
So würde ich es in einer Software lösen, nur kenne ich mich nicht sehr gut mit HTML aus. Aber das wäre eine Idee!

Kann man es denn irgendwie mit OL hinbekommen?

guck mal hier:

https://help.openstreetmap.org/questions/15152/openlayers-marker-for-start-of-gpx-track-and-centering-the-map-on-the-trace

Hi!

Funktioniert!
Der Startpunkt der Route wird mit einem(roten) Marker markiert!
Ich kenne nur nicht den Code um das Ende zu markieren:


	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var startPoint = this.features[0].geometry.components[0];
	      layerMarkers_2.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(EndPoint.x, EndPoint.y),icon));
	    });

Ich hab aus “StartPoint.x, StartPoint.y” = “EndPoint.x, EndPoint.y” gemacht, das funktioniert aber nicht.
Wie markiere ich das Ende der Route?

Halt! :slight_smile:

Ich kann das mit dem EndMarker doch nicht übergehen, ich brauche am Ende der Route auch noch ein Marker, jedoch werden beide Marker fehlerhaft dargestellt wenn ich einen zweiten Marker Layer hinzufügen sowie weiß ich nicht was ich da anstelle von “StartPoint” schreiben soll, EndPoint und StopPoint funktionieren nicht. Ich hab mal meine “OpenLayers.html” drangehängt:


<html>
<head>
    <title>OpenLayers</title>
    <link rel="stylesheet" href="img_js_css/style.css" type="text/css" />
    <style type="text/css">
      .olImageLoadError {                                                                                                  
         background-image: url('img_js_css/img/tile-not-found.png');
         background-repeat: no-repeat;
      }     
    </style>    
    <!-- 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="img_js_css/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="img_js_css/OpenStreetMap.js"></script>
 
    <script type="text/javascript">

// Wenn unter diesem Kommentar
// alert(OpenLayers.VERSION_NUMBER);
// steht, wird bei jedem Start von OpenLayers die
// Version angezeigt.



// Start Koordinaten für die Karte
        var lat=50.01;
        var lon=10.99;
        var zoom=3;
 
        var map; //Komplexes Objekt vom Typ OpenLayers.Map
 
        //Initalisieren von "map"
        function init() {
 
            map = new OpenLayers.Map ("map", {
                controls:[
                    new OpenLayers.Control.Navigation(),
                    new OpenLayers.Control.PanZoomBar(),
                    new OpenLayers.Control.Permalink(),
                    new OpenLayers.Control.ScaleLine({geodesic: true}),
                    new OpenLayers.Control.Permalink('permalink'),
                    new OpenLayers.Control.MousePosition(),                    
                    new OpenLayers.Control.Attribution()],
                maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
                maxResolution: 156543.0339,
                numZoomLevels: 19,
                units: 'm',
                projection: new OpenLayers.Projection("EPSG:900913"),
                displayProjection: new OpenLayers.Projection("EPSG:4326")
            } );

	    // Layer hinzufügen:

            layerMapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik");
            map.addLayer(layerMapnik); 
 
            layerCycleMap = new OpenLayers.Layer.OSM.CycleMap("CycleMap");
            map.addLayer(layerCycleMap);

            layerMarker_1 = new OpenLayers.Layer.Markers("Show route start point");
            map.addLayer(layerMarker_1);


            // *********************************************************************
	    // Block "Layer mit GPX-Track" - Start
	    var GPXVariable_1 = new OpenLayers.Layer.Vector("Show route", {
	    	strategies: [new OpenLayers.Strategy.Fixed()],
	    	protocol: new OpenLayers.Protocol.HTTP({
	    		url: "route/route.gpx",
	    		format: new OpenLayers.Format.GPX()
	    	}),
	    	style: {strokeColor: "purple", strokeWidth: 5, strokeOpacity: 1.0},
	    	projection: new OpenLayers.Projection("EPSG:4326")
	    });
	    map.addLayer(GPXVariable_1);

            // Als Position des ersten Markers, den Startpunkt der Route angeben:

	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var startPoint = this.features[0].geometry.components[0];
	      layerMarker_1.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
	    });
	    
            // Block "Layer mit GPX-Track" - Ende
            // *********************************************************************
 
            //Layer der die loakeln Tiles lädt
            var newLayer = new OpenLayers.Layer.OSM("Use downloaded map data", "tiles/${z}/${x}/${y}.png", {numZoomLevels: 20, alpha: true, isBaseLayer: false});
            map.addLayer(newLayer);
	    // Ende des "Local Tile" Layer
 
 	            var switcherControl = new OpenLayers.Control.LayerSwitcher();
	            map.addControl(switcherControl);
	            switcherControl.maximizeControl();
 
            if( ! map.getCenter() ){
                var lonLat = new OpenLayers.LonLat(lon, lat).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
                map.setCenter (lonLat, zoom);

	// Marker Start Point Einstellungen Anfang
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('img_js_css/img/marker-start.png',size,offset);
		layerMarker_1.addMarker(new OpenLayers.Marker(lonLat,icon));
	// Marker Start Point Einstellungen Ende

            }
        }
 
    </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:100%; height:100%" id="map"></div>
 
</body>
 
</html>

PS: Hier ein Screenshot, damit ihr wisst was ich meine :slight_smile:
http://www.david-guillot.tk/1.png

Ich vermute mal ohne Ahnung von dem was du da machst, dass eine der beiden [0] die Länge des Arrays −1 sein müsste und es egal ist wie du die Variable nennst.

ja, der Variable ist es ja egal wie sie heißt, sie muss nur halt bei Namen angesprochen werden, was bei mir aber nicht wirklich klappt.

Array? öhm, ich hab gerade die gesamte HTML Datei abgesucht, aber wo wird ein Array deklariert?

Trotzdem Danke,

Sonstjemand der mir vielleicht helfen kann?

Ich hab eine Theorie, doch es fehlt der Beweis :slight_smile:

Ich vermute dass mein Problem hierdrin liegt:


	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var endPoint = this.features[0].geometry.components[0];
	      layerMarker_2.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(endPoint.x, endPointt.y),icon));
	    });

Ich bennene ja nur die Variable um, stell aber nichts ein.
Jedoch ist der Marker im zweiten layer, dort wo ich den “Startpunkt” der Karte eingestellt habe, ich kriege den einfach nicht ans Ende der Route :frowning:

Screenshot: www.david-guillot.tk/2.png

PS: Der Marker in der Mitte ist der, der eigentlich am Anfang der Route sein sollte, und der am Anfang der Route, ist der, der am Ende der Route sein sollte.
Wenn ich das zweite “MarkerLayer” hinzufüge, geht garnichts mehr, wenn ich nur ein Marker an der Start Position habe, läuft es prima, woran kann das liegen? Steig da nicht wirklich durch :frowning:

Mir fällt gerade auf, dass der Marker verkehrt herum angezeigt wird, scheint wohl hier dran zu liegen:


[...]

	// Marker Start Point Einstellungen Anfang
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('img_js_css/img/marker-start.png',size,offset);
		layerMarker_1.addMarker(new OpenLayers.Marker(lonLat,icon));
	// Marker Start Point Einstellungen Ende

>>	// Marker End Point Einstellungen Anfang
>>		var size = new OpenLayers.Size(21, 25);
>>		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
>>		var icon = new OpenLayers.Icon('img_js_css/img/marker.png',size,offset);
>>		layerMarker_2.addMarker(new OpenLayers.Marker(lonLat,icon));
>>	// Marker End Point Einstellungen Ende

[...]

Der Code mit den “>>” macht Probleme, dann tritt nämlich der Fehler mit den verkehrten Markern auf!
www.david-guillot.tk/3.png!
Der grüne sollte aber am Anfang der Route sein, und der Rote dann in der Mitte.

Wenn man die Zeilen mit dem “>>” entfernt, stimmt wieder alles :confused:

Ebenso hab ich weiter rumprobiert und immernoch nichts gefunden um dem Marker überhaupt ans Ender der Route zu befördern :frowning:

Also hast du da jetzt abweichend von obigem folgendes stehen und ausserdem layerMarker_2 initialisiert?

// Als Position des ersten Markers, den Startpunkt der Route angeben:

	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var startPoint = this.features[0].geometry.components[0];
	      layerMarker_1.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
	    });
	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var endPoint = this.features[0].geometry.components[0];
	      layerMarker_2.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(endPoint.x, endPointt.y),icon));
	    });
	    
            // Block "Layer mit GPX-Track" - Ende
            // *********************************************************************

Versuche vielleicht erstmal nur den End-Marker anzeigen zu lassen und dann beides zu kombinieren.
Ansonsten lasse dir mal mit console.debug(variablenname); die jeweils interessanten Variablen ausgeben, und finde damit heraus, wo der richtige Wert steht und wo falsche herkommen.
Und gewöhne dir besser an “var” zu nutzen. Das macht den Code besser lesbar, eindeutiger (damit weniger fehleranfällig) und ist afaik im Strict-Mode notwendig.

Du erstellst selbst keines, nutzt aber mindestens zwei: this.features[0] und this.features[0].geometry.components[0]
Ich meinte sowas wie:


            // Als Position des ersten Markers, den Startpunkt der Route angeben:

	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var startPoint = this.features[0].geometry.components[this.features[0].geometry.components.length-1];
	      layerMarker_1.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
	    });
	    
            // Block "Layer mit GPX-Track" - Ende

Klar: Wenn man davon ausgeht, dass layerMarker_2 aus irgendeinem Grund nicht funktioniert setzt du einen Marker im Einstellungs-Abschnitt auf die Kartenmitte und fügst dann einen neuen Marker (nun mit dem End-Icon) an der Startposition hinzu.

Schau mal in die Fehlerkonsole deines Browsers, da dürften einige interessante Meldungen auftauchen :wink:

Danke dir!!
Du hast mir den richtigen Denktritt gegeben! :smiley:
Gott, bin ich sowas von blöd, ich hatte das Problem die ganze Zeit vor meiner Nase Brett vorm Kopf


	// Marker Start Point Einstellungen Anfang
		var size = new OpenLayers.Size(21, 25);
		var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon = new OpenLayers.Icon('img_js_css/img/marker-start.png',size,offset);
		layerMarker_1.addMarker(new OpenLayers.Marker(lonLat,icon));
	// Marker Start Point Einstellungen Ende

	// Marker End Point Einstellungen Anfang
		var size_2 = new OpenLayers.Size(21, 25);
		var offset_2 = new OpenLayers.Pixel(-(size.w/2), -size.h);
		var icon_2 = new OpenLayers.Icon('img_js_css/img/marker-start.png',size,offset);
		layerMarker_2.addMarker(new OpenLayers.Marker(lonLat,icon_2));
	// Marker End Point Einstellungen Ende

Das mit dem zweiten Marker konnte ja auch schlecht was werden :slight_smile:
Ich hab die Variablen size, offset und icon doppelt verwendet!
Schwupti, Wupp, alle Umbennant und schon wird der Marker brav in der Mitte der Karte angezeigt ohne vertauscht zu werden! :slight_smile:
Kurz:
Der Marker ist jetzt ohne Probleme in der Karte!
www.david-guillot.tk/4.png

Ich weiß jetzt nur nicht wie ich den roten Marker an’s Ende der Karte bekomme.


[...]
	    GPXVariable_1.events.register("loadend", GPXVariable_1, function() {
	      this.map.zoomToExtent(this.getDataExtent());
	      var startPoint = this.features[0].geometry.components[0];
	      layerMarker_1.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));
	    });
[...]

ich vermute dass “StartPoint” meine Aufmerksamkeit erhalten sollte, aber “endPoint” und “stopPoint” funktionieren nicht
Ich komme einfach nicht drauf wie ich den Marker ans Ende der Route bekomme?

Noch eine idee? :slight_smile:

Grüße
Alex

Hast du dir schon die Elemente der beiden Arrays in der Web-Konsole angesehen? (Also z.B. “console.debug( this.features[0].geometry.components );” und in FF [Strg]+[Shift]+[K] drücken)

Ja, hab ich gemacht.
Der “Debug” Befehl macht aber Probleme und macht dem Programm Schluckauf.
Wenn ich den Befehl relativ weit oben einsetze, funktionieren die Marker nicht mehr.
Wenn ich den Befehl relativ in die Mitte des Code setze, lädt OL garnicht mehr.
Wenn ich den Befehl relativ ans Ende des Code’s setze, läuft’s aber dann denke ich, fehlen viele wichtige Informationen!


13:54:22.160 Unbekannte Eigenschaft '-moz-border-radius'.  Deklaration ignoriert. style.css:95
13:54:22.160 'none' oder URL erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. style.css:180
13:54:22.160 'none' oder URL erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. style.css:188
13:54:22.160 'none' oder URL erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. style.css:283
13:54:22.161 'none' oder URL erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. style.css:464
13:54:22.161 'none' oder URL erwartet, aber 'alpha(' gefunden.  Fehler beim Verarbeiten des Wertes für 'filter'.  Deklaration ignoriert. style.css:469
13:54:22.161 Fehler beim Verarbeiten des Wertes für '-moz-perspective'.  Deklaration ignoriert. style.css:532
13:54:22.161 Fehler beim Verarbeiten des Wertes für 'perspective'.  Deklaration ignoriert. style.css:534
13:54:23.098 TypeError: this.features is undefined OpenLayers.html:129
13:54:23.105 Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden. OpenLayers.html
13:54:23.553 getUserData() oder setUserData() sollten nicht mehr verwendet werden. Verwenden Sie stattdessen WeakMap oder element.dataset. requestNotifier.js:64

Das war der Code den FF ausgibt wenn der Debug Befehl am Ende sitzt.

PS: Gibt’s denn nicht einfach ein Befehl um den Marker ans Ende zu setzen?

Du musst es natürlich an eine Stelle setzen, an der es die Variable this.features gibt. Also schau, wo du diese Variable nutzt, und setze es direkt davor oder dahinter :wink:

oh, ups :smiley:
Ok, hab ich gemacht:

Wie ich dem entnehme sind keine “schwerwiegenden Fehler” aufgetreten, scheint also soweit alles zu klappen?

:slight_smile: