How can I create a polyline offset between two markers with Leaflet?

Question

I've created my markers with a small offset so that the tip of the marker is exactly at the right location on my map. Now I want to draw lines between the markers, but when I do they are at the tip of the marker, and I'd like them to be at the center of the marker. I've checked the documentation, and searched SO and Google and don't see anything on creating a polyline offset, other than offsetting one line from another.

If I don't use an offset on my markers, the polyline is exactly where I want, but then my marker point is in the wrong location.

I'm also using pixel coordinates, as I'm using a custom map which is not a geographic location.

How can I do this?

Marker code

var baseIcon = L.Icon.extend({
    options: {
        shadowUrl: '/markers/shadow.png',
        iconSize: [40, 40],
        shadowSize: [41, 41],
        iconAnchor: [20, 44], // this is the marker offset
        shadowAnchor: [11, 45]
    }
});

Polyline code

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

Use Leaflet Polyline Offset plugin. See stackoverflow.com/questions/45193353/… — ghybs

Rahul Mahadik Rahul Mahadik · Accepted Answer · 2019-11-18T07:06:13

If I don't use an offset on my markers, the polyline is exactly where I want, but then my marker point is in the wrong location.

If marker plotted at wrong location, you need to change the values of iconAnchor and shadowAnchor option.

iconAnchor : The coordinates of the "tip" of the icon (relative to its top left corner). The icon will be aligned so that this point is at the marker's geographical location. Centered by default if size is specified, also can be set in CSS with negative margins.

shadowAnchor : The coordinates of the "tip" of the shadow (relative to its top left corner) (the same as iconAnchor if not specified).

So try to modify your marker code:

var baseIcon = L.Icon.extend({
    options: {
        shadowUrl: '/markers/shadow.png',
        iconSize: [40, 40],
        shadowSize: [41, 41],
        iconAnchor: [20, 44], // change this
        shadowAnchor: [11, 45]  // change this
    }
});

You can refer this for more details and documentation.

Hope this will helps you

How can I create a polyline offset between two markers with Leaflet?

Marker code

Polyline code

1 Answers