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);

    });

Thomas Gratier · Accepted Answer · 2018-06-27T17:22:48.050

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

edited Jun 27 '18 at 17:22

answered Jun 22 '18 at 03:00

Thomas Gratier

2,311
1
14
15

Thank you it is working as expected!!! But Unfortunately, vector Style is not being applied. Whether I need to override the below style var vector = new LayerVector({ source: source, style: new Style({ fill: new Fill({ color: 'white' }), stroke: new Stroke({ color: 'red' }) }) }); – Subburaj Jun 22 '18 at 04:22
1

Updated answer. Where it's not working: you try to fill a line but line has no area => can't be filled. The solution = an array of `ol.Style` with two stroke width (the thicker in first because below) and two colors. See also http://openlayers.org/en/latest/apidoc/ol.style for adapting/understanding default styles – Thomas Gratier Jun 22 '18 at 04:53
Now the above solution is working perfectly .When I am trying to insert the above script in the browser debugger console, then I am getting an error as "Uncaught ReferenceError: ol is not defined". How to solve the problem in the browser debugger Console? – Subburaj Jun 27 '18 at 16:06
1

Try with http://openlayers.org/en/v4.6.5/examples/simple.html. OpenLayers is now version 5 and the issue you encounter is related. PS: updated in my answer – Thomas Gratier Jun 27 '18 at 17:21
Thank you so Much!!!. It is working fine in the above html. I have raised one more question to test it in my real time application. Can you please help me for the https://stackoverflow.com/questions/51067818/unable-to-use-openlayers-library-in-browser-debugger-console-react-js – Subburaj Jun 27 '18 at 17:25

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

1 Answers1