How to display a track on a wide and long layer

Question

I just want to show the track on my map that I tried, but the problem is that I don’t want to load the track point into a layer from a GPX file (because I don’t want to generate a file from coordinates, from GPSdevice programmatically)

is there any way to add 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 file in GPX (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> 

Answer 1

I found a 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)); } } 

Answer 2

An 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 .

Answer 3

Your answer has been closed to be perfect.

You should parse the line number for the 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)); } }