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.

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

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

Answer 5

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