OpenLayers Line String

Question

I have a list of coordinators and I want to display it in the openlayers map but the line did not show in the map.

This is my code. May someone guide my on this?

for (let i = 0; i < list.length - 1; i++) {
    const start_point = [parseInt(list[i].longitude, 10), parseInt(list[i].latitude, 10)];
    const end_point = [parseInt(list[i + 1].longitude, 10), parseInt(list[i + 1].latitude, 10)];

    const feature = new ol.Feature({
      geometry: new ol.geom.LineString([start_point, end_point]),
      name: 'Line'
    });

    const source = new ol.source.Vector({
      features: [feature]
    });

    const layerLines = new ol.layer.Vector({
      source: source,
    });

    this.map.addLayer(layerLines);
  }

Answer 1

You need to convert the lat/long values to the same projection system as the view in your map.

As you have not explicitly specified a projection for the map, it uses EPSG:3857 (see ol.view docs)

Given this, you can use ol.proj.fromLonLat without specifying the target projection (again it uses EPSG:3857 by default).

So your code would be:

const feature = new ol.Feature({
  geometry: new ol.geom.LineString([
     ol.proj.fromLonLat(start_point), 
     ol.proj.fromLonLat(end_point)]),
  name: 'Line'
});