Draw line between two points using OpenLayers

Question

I have two points having lolLat as 0,10 and 30,0

Now to draw a marker at this point i use this transform while generating marker for it

lonLat.transform(
                 new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                 map.getProjectionObject() // to Spherical Mercator Projection
             )

How can i draw line between them is there any way to do that in openlayers,i have tried doing it with linestring in vector layer but it doesn't seems to be working for me.

score 26 · Answer 1 · edited May 03 '15 at 12:30

26

In OpenLayers version 3.3, you can do this as

var points = [ [-89.8802, 32.5804], [-95.04286, 46.9235] ];

for (var i = 0; i < points.length; i++) {
    points[i] = ol.proj.transform(points[i], 'EPSG:4326', 'EPSG:3857');
}

var featureLine = new ol.Feature({
    geometry: new ol.geom.LineString(points)
});

var vectorLine = new ol.source.Vector({});
vectorLine.addFeature(featureLine);

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

Then add layer to map

map.addLayer(vectorLineLayer);

edited May 03 '15 at 12:30

laggingreflex

32,948
35
141
196

answered Mar 09 '15 at 07:08

Pratik Goenka

2,321
1
27
24

2

can confirm this is working. thanks. Using Leaflet, you'd only need `L.polyline(array).addTo(map)`. How these guys could make a basic feature so complicated is beyond me – phil294 Nov 26 '16 at 21:54
I can confirm this is still working with OpenLayers 6.6.1 – Leroy Meijer Jul 20 '21 at 06:31

score 21 · Accepted Answer · answered Mar 19 '12 at 07:23

21

For example:

map = new OpenLayers.Map();

var start_point = new OpenLayers.Geometry.Point(0,10);
var end_point = new OpenLayers.Geometry.Point(30,0);

var vector = new OpenLayers.Layer.Vector();
vector.addFeatures([new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString([start_point, end_point]))]);
map.addLayers([vector]);

Live demo

answered Mar 19 '12 at 07:23

drnextgis

2,194
1
25
32

for some reason in the fiddle the ol source is gone – talsibony Jul 23 '15 at 07:47
2

Can you look at it again? It looks blank. – Jake Gaston Feb 27 '18 at 21:59
The example is wrong. The `LineString` constructor expects `Coordinates`, not `Point`s. `Coordinates` are just [x, y] arrays. Or you can use point.getCoordinates(). – bennlich Apr 28 '20 at 18:05
1

The live demo is dead: `35:1 ReferenceError: OpenLayers is not defined` – Pedro Lobito Jun 08 '20 at 15:57

swatchai · Answer 3 · 2022-08-06T03:51:15.230

I am aware that this is an old question, but no up-to-date answer exists. Here is a runnable code as an answer, using current version of Openlayers (August 2022).

const Feature = ol.Feature;
const VectorSource = ol.source.Vector;
const VectorLayer = ol.layer.Vector;
const LineString = ol.geom.LineString;
//const Point = ol.geom.Point;
const Style = ol.style.Style;
const Stroke = ol.style.Stroke;
const fromLonLat = ol.proj.fromLonLat;
const Overlay = ol.Overlay;

// Two locations with long/lat values in degrees
const lonlat0 = [100.538142, 13.765230];
const lonlat1 = [100.529321, 13.793656];

/* BEGIN: Code for the line joining the 2 points */
var points = [fromLonLat(lonlat0), fromLonLat(lonlat1)];
var line_feat1 = new Feature({
  geometry: new LineString(points),
  name: "My_Simple_LineString"
});
var line_vsrc = new VectorSource({
  features: [line_feat1],
  wrapX: false
});
var lineStyle = new Style({
  stroke: new Stroke({
    color: "red",
    width: 5,
    //lineDash: [4, 4, 4],
    lineCap: "butt"
    /* https://openlayers.org/en/latest/apidoc/module-ol_style_Stroke.html */
  })
});
var veclay_line = new VectorLayer({
  source: line_vsrc,
  style: lineStyle
});
// `veclay_line` is the outcome of this complicate code
/* END: Code for the line joining the 2 points */

// Create map
// Note: `veclay_line`, containing the LineString is used within `layers`
var map = new ol.Map({
  target: "map",
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    veclay_line
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat(lonlat0),
    zoom: 13
  })
});

.map {
  height: 400px;
  width: 100%;
}

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/css/ol.css" type="text/css">

  <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.15.1/build/ol.js"></script>
  <title>OpenLayers 6</title>
</head>
<body>
  <div id="map" class="map"></div>
</body>

Sergey · Answer 4 · 2022-08-06T09:29:14.193

As this question comes up on top in search results, I figured giving the current v6 answer would be beneficial.

It's a bit more complicated now, need to create a bunch of intermediary objects (at least as far as I understood):

const raster = new ol.layer.Tile({
    source: new ol.source.OSM(),
});

const source = new ol.source.Vector();

const p1 = [-12500000, 6500000];
const p2 = [-10000000, 4000000];
const line = new ol.geom.LineString([p1, p2]);
const feature = new ol.Feature({
    geometry: line,
    name: "Line"
});
source.addFeature(feature);

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

const map = new ol.Map({
    layers: [raster, vector],
    target: 'mapdiv',
    view: new ol.View({
        center: [-11000000, 4600000],
        zoom: 4,
    }),
});

You can then also modify the geometry on the fly with e.g. line.appendCoodrinate([long,lat]); and the map will be updated extending the line.

Here's a working demo for v6: Live demo

I don't get why the coord format is this way (10000ths of a degree), the docs on Coordinates, for example, show "normal" values, but code examples use that.

Not sure what you mean by more complicated but you can pass the line geometry directly to the feature constructor. For the coord format, openlayers use epsg 3857 coordinate system by default. You can set 4326 if you like to work with degrees. — BR75, Jul 25 '22 at 05:40

Draw line between two points using OpenLayers

4 Answers4

Linked