Leaflet simple arrow

[cladocora]

Sorry but I'm new. There is a way to put a static arrow into a polyline that I have? I tried in this mode but doesn't work. var pathPattern = L.polylineDecorator([ [Lat], [ Long ]], {patterns: [{ offset: 12, repeat: 25, symbol: L.Symbol.arrow({pixelSize: 10, pathOptions: {color: '#f0000', weight: 2}}) },{ offset: 0, repeat: 25, symbol: L.Symbol.arrow({pixelSize: 0}) }]} ).addTo(map); Thanks Giuseppe

[EllanVhow]

Apologies, but this prompted a simple question. I have been told that it is not possible to draw a simple arrow ... line with an arrowhead at the end ... with PolylineDecorator. Could you clarify if it is possible to draw a simple arrow? Thanks.

I assumed endOffset = 0 and no offset parameter, but I am told that doesn't work.

[bbecquet]

Hi @EllanVhow.

Yes you can, but you have to use a 100% offset instead of using endOffset. Like this:

var arrow = L.polyline([[57, -19], [60, -12]]).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
    patterns: [
        {
            offset: '100%',
            repeat: 0,
            symbol: L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}})
        }
    ]
}).addTo(map);

endOffset has been introduced quite late in the project, now I understand it may be counter-intuitive that it doesn't behave like you thought.

(BTW, sorry @cladocora for never having answered your question in the first place :/)

[EllanVhow]

Yes. Thank you. I should have clarified that we were trying to use the fixed pixel offset. The problem is that we need to hold the arrowhead back from the destination icon so that it is not covered by the icon. When we try to choose a percentage to hold the arrowhead back, it is just right for short segments and then is held way back from the destination in the long segments. It is not consistently "at the end" of the line. We could calculate a shorter polyline and hold back the actual end point, but again, we have to figure out that hold back in pixels somehow rather than in geo-coordinates.

If we had two decorations .. perhaps a dot for the start and an arrowhead for the end, would the endOffset in pixels work? ... be applied to the arrowhead?

Thank you!

[EllanVhow]

Alternatively, could we 'draw' the polyline from End to Start and then put a Reverse Arrowhead at a pixel offset from the start of the line (which is actually our End point)?

[EllanVhow]

The latter worked. Reversed the start and end in the point list, then set headAngle to -290 in L.Symbol.ArrowHead and adjusted the offset for the pixel size of the arrowhead.

[EllanVhow]

The icons are fixed size and the arrowhead just touches the icon no matter what length the arrow polyline is. Thanks!