OpenLayers 6 + Angular 8 : LineString(s) not showing up on Vector Layer (With no errors from JS)

Question

I'm having an issue where my LineString(s) aren't showing up on the map and the console isn't giving out any errors.

I belive my code is correct but i'm not that bright when it comes to OpenLayers and i may be wrong.

This is how i add my Vector Layer to the map

var vectorLayer = new ol.layer.Vector({
      name: 'trailLayer',
      type: "Vector",
      source: new ol.source.Vector({ format: new ol.format.GeoJSON({ featureProjection:"EPSG:3857" }) }),
      zoomMin: 8,
      zoomMax: 18
    });

    this.map.addLayer(vectorLayer);

Than this is what I do to add a new LineString

let layer;
this.map.getLayers().forEach(function (value) { if ( value.get('name') === 'trailLayer') { layer = value; } });
if(layer == null) { return; }

let coords = [[latA, lonA], [latB, lonB]];
let lineString = new ol.geom.LineString(coords);
lineString.transform('EPSG:4326', 'EPSG:3857');

var lineFeature = new ol.Feature({
    name: callsign,
});

lineFeature.setGeometry(lineString);


var lineStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        width: trailWidth,
        color: trailColor
    })
});

lineFeature.setStyle(lineStyle);

layer.getSource().addFeature(lineFeature);

If I try to use source.GetFeatures() it shows all my features correctly, but I can't see them on the map.

Am I missing something?

PS Every variable is assigned correctly, nothing strange and no undefined ecc...

Answer 1

In OL the coordinates must be expressed as longitude first, then latitude.

Try swapping the coordinates:

let coords = [[lonA, latA], [lonB, latB]];