How to display a track on a layer with lat and long

Question

i just want to show a track on my map i tried as follow but the problem is i don't want to load track point in layer from GPX File (because i don't want to generate file from coordinates witch i get from GPSdevice programmatically)

is there any way to add a track layer from long and lat

// Add the Layer with the GPX Track
var lgpx = new OpenLayers.Layer.Vector("Car track", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    protocol: new OpenLayers.Protocol.HTTP({
        url: "testTrack.GPX",
        format: new OpenLayers.Format.GPX()
    }),
    style: { strokeColor: "green", strokeWidth: 5, strokeOpacity: 0.5 },
    projection: new OpenLayers.Projection("EPSG:4326")
});
map.addLayer(lgpx);

Here is the lat and long in GPX file(xml format)

<?xml version="1.0" encoding="UTF-8"?>
    <gpx version="1.0">
    <name>Example gpx</name>
    <trk><name>Example gpx</name><number>1</number>
    <trkseg>
        <trkpt lat="35.737097" lon="51.314965"></trkpt>
        <trkpt lat="35.736953" lon="51.317454"></trkpt>
        <trkpt lat="35.737572" lon="51.317551"></trkpt>
        <trkpt lat="35.737755" lon="51.315716"></trkpt>
        <trkpt lat="35.739588" lon="51.316070"></trkpt>
    </trkseg>
    </trk>
 </gpx>

Chibouk

Paste a sample of GPS data structure you have. – Bitthia

You've tagged this openlayers which is about Openlayers 2.x that does not support Format.GPX - is that an oversight or the root cause for it not working? – Lemuel

In you question you wrote that you don't want lo load from GPX file. What is your preferred method? BTW I posted an answer how to load GPX in ol3 in case someone is looking for it. – Bitthia

@AndersR.Bystrup that was my mistake i changed to opernlayers-3 tag – Chibouk

gis.stackexchange.com/a/120338/51937 take a look at this answer. Maybe that is what you are looking for. – Bitthia

Answer 1

i've found the solution ,here it is

        lineLayer = new OpenLayers.Layer.Vector("Line Layer");
        map.addLayer(lineLayer);
        map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, OpenLayers.Handler.Path));

    var coordinates = [
        { lat: "35.737097", lon: "51.314965" },
        { lat: "35.736953", lon: "51.317454" },
        { lat: "35.737572", lon: "51.317551" },
        { lat: "35.737755", lon: "51.315716" },
        { lat: "35.739588", lon: "51.316070" }
    ];
function DrawTrack(){
        var points = coordinates.map(function (cor) {
            return new OpenLayers.Geometry.Point(cor.lon, cor.lat)
                             .transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
        });

        var style = {
            strokeColor: '#0000ff',
            strokeOpacity: 0.5,
            strokeWidth: 5
        };

        for (var i = 0; i < points.length - 1; i++) {

            (function (i) {

                window.setTimeout(function () {
                    var line = new OpenLayers.Geometry.LineString([points[i], points[i + 1]]);
                    var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
                    lineLayer.addFeatures([lineFeature]);

                    map.setCenter(points[i].lon, points[i].lat);

                }, i * 1000);

            }(i));
        }
}

Chibouk

Answer 2

Example of loading GPX data in OpenLayers 3.

var lgpx = new ol.layer.Vector({
    title: 'Car track',
    source: new ol.source.Vector({
        url: 'testTrack.gpx',
        format: new ol.format.GPX()
    }),
    style: new ol.style.Style({
        stroke: new ol.style.Stroke({
            color: 'green',
            width: 5,
            opacity: 0.5
        })
    })
});

map.addLayer(lgpx);

List of available formats.

Lazo

i don't want to load a gpx file like this in fact i have the coordinates in lat,long format i want to know is there any method witch it take long lat and draw a track on the map according to the coordinates something that i can make an ajax call and fetch the coordinates from server then i draw the track – Chibouk

Could you provide a sample of data your server returns? – Bitthia

Answer 3

Your answer was closed to be perfect.

You must parse the string number to float.

lineLayer = new OpenLayers.Layer.Vector("Line Layer");
map.addLayer(lineLayer);
map.addControl(new OpenLayers.Control.DrawFeature(lineLayer, 
  OpenLayers.Handler.Path));

var coordinates = [
  { lat: "35.737097", lon: "51.314965" },
  { lat: "35.736953", lon: "51.317454" },
  { lat: "35.737572", lon: "51.317551" },
  { lat: "35.737755", lon: "51.315716" },
  { lat: "35.739588", lon: "51.316070" }
];
function DrawTrack(){
  var points = coordinates.map(function (cor) {
    return new OpenLayers.Geometry.Point(parseFloat(cor.lon),parseFloat(cor.lat))
                     .transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
    });

    var style = {
        strokeColor: '#0000ff',
        strokeOpacity: 0.5,
        strokeWidth: 5
    };

    for (var i = 0; i < points.length - 1; i++) {

      (function (i) {

        window.setTimeout(function () {
            var line = new OpenLayers.Geometry.LineString([points[i], points[i + 1]]);
            var lineFeature = new OpenLayers.Feature.Vector(line, null, style);
            lineLayer.addFeatures([lineFeature]);

            map.setCenter(points[i].lon, points[i].lat);

        }, i * 1000);

      }(i));
    }
}

Flatware