Openlayers - marker for start of GPX track and centering the map on the trace

Question

Using the example http://wiki.openstreetmap.org/wiki/Openlayers_Track_example I can make a map with a GPX trace on it but I have to centre the map by finding the co-ordinates separately and assigning them to variables for lat lon, and getting the zoom level by trial and error. I can also add a pin to mark the start but again have to position it by manually entering the co-ordinates. It's entirely possible to use javascript to parse the GPX file to find the bounds of the trace, and the centre point. The start point is also simply the first trackpoint.

Does anyone have any idea how to do this? I'm capable of adapting examples but not of generating this complexity of scripting!

Accepted Answer

2

Hi,

Although this question is more related to OpenLayers than OSM, you can try with this code:

map.zoomToExtent(lgpx.getDataExtent());

EDIT: this code add also the marker at the startpoint and should be placed after adding the layer lgpx to the map (map.addLayer(lgpx))

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

permanent link

answered 16 Aug '12, 21:27

NicolasDumoulin
3.3k●4●22●56
accept rate: 13%

edited 17 Aug '12, 11:27

Am I asking in the wrong forum?

(17 Aug '12, 08:23) digby

2

If you want to be sure to get an answer (and a good one), it's better to ask your question to the OpenLayers community. Anyway, what about my answer?

(17 Aug '12, 08:31) NicolasDumoulin

Not sure where to put it. Does it just go in as is? Does it override the vars of lat lon and zoom? Tried it in various places without success. http://www.carnethy.com/maps/mapping%20info/osm_map_layer_to_use_in_iframe.htm

(17 Aug '12, 09:22) digby

Ok, it works by adding this code after map.addLayer(lgpx): lgpx.events.register("loadend", lgpx, function() { this.map.zoomToExtent(this.getDataExtent()) } );

(17 Aug '12, 09:42) NicolasDumoulin

1

Wow! It works! Thanks. And any idea how to get the start point from the GPX to set the pin in the right place?

(17 Aug '12, 09:58) digby

You can add the marker at the startpoint by modifying the previous giving code as follow:

lgpx.events.register("loadend", lgpx, function() {

this.map.zoomToExtent(this.getDataExtent());

var startPoint = this.features[0].geometry.components[0];

layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));

});

(17 Aug '12, 10:15) NicolasDumoulin

I can only laugh in amazement! Never in a milliion years could I have worked that out!

(17 Aug '12, 11:32) digby

Can I further try your patience and ask how you would return the end point of a trace to place a finish pin? Would you adapt var startPoint = this.features[0].geometry.components[0];
layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(startPoint.x, startPoint.y),icon));

to var endPoint = something?

(17 Aug '12, 15:01) digby

Right, something like that: var endPoint = this.features[0].geometry.components[this.features[0].geometry.components.length - 1];

(17 Aug '12, 15:33) NicolasDumoulin

Hmm. Didn't work! It puts a pin at the start, or maybe -1 trackpoint from the start

(17 Aug '12, 17:00) digby

showing 5 of 10 show 5 more comments

Answer 2

Two methods of finding a lat lon in a trace are open the GPX with a text editor and just read them or upload the trace to OSM then click on edit trace and in polatch2 under options tick the box that shows lat lon. EDIT You can display the whole trace on an up to date OSM map and pick out boundary Lan Lons by opening the GPX with GPS Prune it's free from the activity workshop, but it does need Java to run ( as does JOSM ). https://activityworkshop.net/software/gpsprune/

Answer 3

Hi, how i put a marker on the end of gps track? i try use the similar code that you provided, but doesn't work.

Answer 4

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

Add this to the previous code, and add a new finish icon in the same way as the start point icon. By the way, I have no idea how this all works!

var endPoint = this.features[0].geometry.components[this.features[0].geometry.components.length - 1];
                    layerMarkers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(endPoint.x, endPoint.y),icon2));
                });

In our case the icons are set so:

var size = new OpenLayers.Size(21, 25);
            var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
            var icon = new OpenLayers.Icon('../../mapping%20info/small_red_pin.png',size,offset);
            var icon2 = new OpenLayers.Icon('../../mapping%20info/small_blue_pin.png',size,offset);

If the map has a circular route on it the finish icon will overlay the start icon which will be hidden if it's the same shape. But you could set the offset to deal with that. Increasing the negative number on length pushes the marker back down the trace.

Answer 5

Thank you, this problem was solved, now i'm fencing another problem: i want that the my app calculate the distance between two points.

Answer 6

That's got nothing to do with this question. You should start a new topic or find one that is relevant.

Openlayers - marker for start of GPX track and centering the map on the trace

Related questions