How do I draw a polyline in Leaflet using pixel coordinates?

Question

My map is set up and the markers are in place, and it's working perfectly. I now want to add lines between the markers; so I used the code example from Leaflet and added the coords from a couple markers, but the line isn't showing on the map.

var polylinePoints = [
    [3474, 12427],
    [2298, 11596],
];

var polyline = L.polyline(polylinePoints).addTo(map);

Then I tried this...

var pointA = new L.LatLng(3474, 12427);
var pointB = new L.LatLng(2298, 11596);
var pointList = [pointA, pointB];

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

...and the line still isn't showing.

Could the problem be that I'm using pixel coordinates and not actual lat and lng coords? If so, how do I draw lines between markers using pixel coordinates?

peeebeee peeebeee · Accepted Answer · 2019-11-13T15:06:31

Could the problem be that I'm using pixel coordinates and not actual lat and lng coords? If so, how do I draw lines between markers using pixel coordinates?

Definitely.

Try this:

var pointA = map.layerPointToLatLng(L.point(3474, 12427));
var pointB = map.layerPointToLatLng(L.point(2298, 11596));
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
    color: 'red',
    weight: 3,
    opacity: 0.5,
    smoothFactor: 1
});
firstpolyline.addTo(map);

You may run in to problems with origin next, though, see map.getPixelOrigin()

How do I draw a polyline in Leaflet using pixel coordinates?

1 Answers