Drawing polyline in Leaflet?

Question

This is my coding I used in Leaflet:

    var pointA = new L.LatLng(28.635308, 77.22496);
    var pointB = new L.LatLng(28.984461, 77.70641);
    var pointList = [pointA, pointB];

    var firstpolyline = new L.Polyline(pointList {
    color: 'red',
    weight: 3,
    opacity: 0.5
    smoothFactor: 1

    });

    map.addLayer(firstpolyline);

The map is not showing any result. I just need straight line from one point to another, just visualize it, not geodetic correct. Points (in Leaflet "circles") are showing perfectly on the map.

score 49 · Accepted Answer · edited Dec 05 '16 at 03:13

49

Is your code pasted directly? If so,

var pointA = new L.LatLng(28.635308, 77.22496);
var pointB = new L.LatLng(28.984461, 77.70641);
var pointList = [pointA, pointB];

var firstpolyline = new L.polyline(pointList {
color: 'red',
weight: 3,
opacity: 0.5
smoothFactor: 1

});

has missing comma's on lines 5 & 8, and line 12 use firstpolyline.addTo(map). Make it

var pointA = new L.LatLng(28.635308, 77.22496);
var pointB = new L.LatLng(28.984461, 77.70641);
var pointList = [pointA, pointB];

var firstpolyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 1
});
firstpolyline.addTo(map);

edited Dec 05 '16 at 03:13

A1rPun

103
5

answered Jul 18 '12 at 22:53

Jason Scheirer

18,002
2
53
72

I can see only one error, and I fixed it. But polyline is still not showing on my map. What am I doing wrong? – againstflow Jul 19 '12 at 09:17
You just missed a small line of code at the end. The polyline was correctly coded, but it was not added to the map as Lealflet requires: firstpolyline.addTo(map); – Sep 07 '12 at 16:45

score 6 · Answer 2 · answered Sep 15 '20 at 11:43

I used following code to draw polyline between various Locations:

var polylinePoints = [
    [37.781814, -122.404740],
    [37.781719, -122.404637],
    [37.781489, -122.404949],
    [37.780704, -122.403945],
    [37.780012, -122.404827]
  ];
var polyline = L.polyline(polylinePoints).addTo(map);

For more Details you can follow this Link.

score 3 · Answer 3 · answered Feb 21 '14 at 15:32

3

addLayer doesn't work for me, had to do .addTo(map)

answered Feb 21 '14 at 15:32

Connor Leech

131
2

score 1 · Answer 4 · edited Jun 03 '13 at 08:41

1

Use lower case "polyline" in L.polyline(...). This will work.

edited Jun 03 '13 at 08:41

urcm

22,533
4
57
109

answered Jun 03 '13 at 08:12

Adam

11
1

score -1 · Answer 5 · answered Nov 01 '18 at 10:17

-1

If you want exact path(curve shapes), use polyline.antPath.

answered Nov 01 '18 at 10:17

TARAKA SEELAM

1
2

Drawing polyline in Leaflet?

5 Answers5

Linked