Unable to draw the default line between two location in OpenLayers with ReactJS

Question

I am trying to draw some default line between two location (Location A, Location B) using location latitude and longitude with the help of OpenLayers and ReactJS. But defaulted line is not getting drawn. Unfortunately, I couldn't find the root cause. How can I solve this?

Code:

componentDidMount() {

    var map;
    var raster=new Tile({
      source: new OSM()
    });
    //Location A - Latitude and Longitude
    var iconFeature1 =new Feature({
      geometry: new Point(proj.transform([79.2652587890625,19.532871485421026], 'EPSG:4326',   'EPSG:3857')),
      name: 'Marker 1' });
   //Location B - Latitude and Longitude
    var iconFeature2 =new Feature({
        geometry: new Point(proj.transform([81.24279785156249,18.02679570052561], 'EPSG:4326',   'EPSG:3857')),
        name: 'Marker 2' });

    var source = new SourceVector({
      features: [iconFeature1,iconFeature2],
      wrapX: false
    });

    var vector = new LayerVector({
      source: source,
      style: new Style({
        fill: new Fill({
          color: 'white'
        }),
        stroke: new Stroke({
          color: 'red'
        })
      })
    });

    map = new Map({
      target: 'map',
      layers: [raster,vector],
      view: new View({
        center: proj.fromLonLat([78.8718, 21.7679]),
        zoom: 4
      })
    })
    //To draw Line
    var draw = new Draw({
      source: source,
      type: "LineString"
    });

    map.addInteraction(draw);

    });

Answer 1

Your main issue is the fact are creating two points but do not create a line. It's what I demonstrate with the following code.

It does the job outside of your particular context (e.g React) but principles remain the same (you will just need to change namespaces)

Go to http://openlayers.org/en/v4.6.5/examples/simple.html

Open the browser debugger console and paste the following

// Location A - Latitude and Longitude
var coords1 = ol.proj.fromLonLat([79.2652587890625,19.532871485421026]);
var iconFeature1 =new ol.Feature({
  geometry: new ol.geom.Point(coords1),
  name: 'Marker 1'
});

// Location B - Latitude and Longitude
var coords2 = ol.proj.fromLonLat([81.24279785156249,18.02679570052561]);
var iconFeature2 =new ol.Feature({
  geometry: new ol.geom.Point(coords2),
  name: 'Marker 2'
});

var lineBetweenTwoFeatures =new ol.Feature({
  geometry: new ol.geom.LineString([coords1, coords2]),
  name: 'Line between markers'
});

// I add the 2 markers and the linestring
// between the two in the same source
// You may need to separate them in two sources
// depending of your use case
var source = new ol.source.Vector({
  features: [iconFeature1, iconFeature2, lineBetweenTwoFeatures],
  wrapX: false
});

var width = 3;
vector = new ol.layer.Vector({
  source: source,
  style: [
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'white',
        width: width + 2
      })
    }),
    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: width
      })
    })
  ]
});
map.addLayer(vector);

map.getView().fit(source.getExtent());

The important part is in lineBetweenTwoFeatures

You will get the following result