Draw lines between coordinates from JSON file

Question

I have a JSON that holds the data:

var myData = [
  {
    "ID": 1,
    "DeviceSerialNumber": "941",
    "Latitude": 64.19219207763672,
    "Longitude": 28.963903427124023,
  },
  {
    "ID": 2,
    "DeviceSerialNumber": "9416",
    "Latitude": 65.34219207763672,
    "Longitude": 29.543903427124023,
  },
  {
    "ID": 3,
    "DeviceSerialNumber": "9416ba6",
    "Latitude": 66.34219207763672,
    "Longitude": 28.543903427124023,
  },
]

I am able to draw points on map with following code:

function loadData(data) {

  var adataSource = new ol.source.Vector();

  // transform the geometries into the view's projection
  var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

  // loop over the items in the response
  for (var i = 0; i < data.length; i++) {

    //create a new feature with the item as the properties
    var feature = new ol.Feature(data[i]);

    // add a name property for later ease of access
    feature.set('name', data[i].DeviceSerialNumber);

    // create an appropriate geometry and add it to the feature
    var coordinate = transform([parseFloat(data[i].Longitude), parseFloat(data[i].Latitude)]);
    var geometry = new ol.geom.Point(coordinate);
    feature.setGeometry(geometry);

    // add the feature to the source
    dataSource.addFeature(feature);
  }

  return dataSource;
}

var vectorLayer = new ol.layer.Vector({
  source: loadData(myData),
  visible: true,
  style: new ol.style.Style({
    image: new ol.style.Circle( /** @type {olx.style.IconOptions} */({
      radius: 5,
      fill: new ol.style.Fill({
        color: '#266ca6'
      })
    }))
  })
});

However I would like to draw a route = lines, based on coordinates. So that route would be drawn starting from first coordinate and then until next coordinate, then next coordinate and so on... I have tried to modify my code this way, but I am not getting any routes on my map. What I am doing wrong?

//loads data from a json file and creates features
function loadData(data) {

  var dataSource = new ol.source.Vector();

  // transform the geometries into the view's projection
  var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');

  // loop over the items in the response
  for (var i = 0; i < data.length; i++) {

    //create a new feature with the item as the properties
    var feature = new ol.Feature(data[i]);

    // add a name property for later ease of access
    feature.set('name', data[i].DeviceSerialNumber);

    // create an appropriate geometry and add it to the feature
    var coordinate = transform([parseFloat(data[i].Longitude), parseFloat(data[i].Latitude)]);
    var geometry = new ol.geom.LineString(coordinate);
    feature.setGeometry(geometry);

    // add the feature to the source
    dataSource.addFeature(feature);
  }

  return dataSource;
}

var vectorLayer = new ol.layer.Vector({
  source: loadData(myData),
  visible: true,
  style: new ol.style.Style({
    fill: new ol.style.Fill({ color: '#00FF00', weight: 4 }),
    stroke: new ol.style.Stroke({ color: '#00FF00', width: 2 })
  })
});

Here is an example what I have been trying to use: Draw line between two points using OpenLayers

score 0 · Accepted Answer · answered Apr 05 '22 at 12:37

A LineString will need a single feature containing all the coordinates

  var coordinates = [];
  for (var i = 0; i < data.length; i++) {
    var coordinate = transform([parseFloat(data[i].Longitude), parseFloat(data[i].Latitude)]);
    coordinates.push(coordinate);
  }
  var feature = new ol.Feature();
  var geometry = new ol.geom.LineString(coordinates);
  feature.setGeometry(geometry);

  // add the feature to the source
  dataSource.addFeature(feature);

Draw lines between coordinates from JSON file

1 Answers1