curved polyline about leaflet-arrowheads HOT 5 CLOSED

This is a bit tricky to do in a true and correct fashion, as leaflet-arrowheads calculates arrowheads based on latlngs, and leaflet.curve creates its curved from svg bezier functions.

However, after toying around for a bit with it, I see that leaflet.curve offers a .trace function, which returns latlng values at specified intervals along the bezier curves. Using this, you can create a ghost polyline, apply arrowheads to it, extract the arrowheads, and remove the ghost:

const latlngs = pathThree.trace([0,0.1,0.2,0.3,0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])

const ghost =  L.polyline(latlngs).arrowheads({color:'orange'}).addTo(map)
const arrowheads = ghost.getArrowheads()
ghost.remove()
arrowheads.addTo(map)

Working codesandbox

This is not.a perfect solution, as .trace applies the trace equally to all segments of your shape, which probably will not give you evenly spaced arrowheads. Also, using a frequency other than the default (every vertex), will place arrowheads not on the line itself. It works, but you have limitations.

I'm not clear on what you mean when you say:

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

Trying to make leaflet-arrowheads work properly with leaflet.curve would require a total rewrite based on svg, which I don't think I'm going to do. However, depending on your needs, using the .trace method to create a ghost polyline and keeping just its arrowheads may work just fine.

from leaflet-arrowheads.

Great thank you for this, it works like a charm!

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

what i meant was that having two straight polyline A -> B and B <- A would results in complete overlapping of the two.
I used svg to creates a curve to avoid that! That's something reasonable for example in flight path to simulate travel.
again thank you!

from leaflet-arrowheads.

Ah, I see what you're saying. You're using bezier curves to differentiate between the coming and going vectors. And you want the arrowheads in opposite directions along each curve for a nice visual. Makes sense. Well for a relatively simple curve like a flight path, I think the .trace method will work well for you. Glad I could help.

from leaflet-arrowheads.

This is a bit tricky to do in a true and correct fashion, as leaflet-arrowheads calculates arrowheads based on latlngs, and leaflet.curve creates its curved from svg bezier functions.

However, after toying around for a bit with it, I see that leaflet.curve offers a .trace function, which returns latlng values at specified intervals along the bezier curves. Using this, you can create a ghost polyline, apply arrowheads to it, extract the arrowheads, and remove the ghost:

const latlngs = pathThree.trace([0,0.1,0.2,0.3,0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])

const ghost =  L.polyline(latlngs).arrowheads({color:'orange'}).addTo(map)
const arrowheads = ghost.getArrowheads()
ghost.remove()
arrowheads.addTo(map)

Working codesandbox

This is not.a perfect solution, as .trace applies the trace equally to all segments of your shape, which probably will not give you evenly spaced arrowheads. Also, using a frequency other than the default (every vertex), will place arrowheads not on the line itself. It works, but you have limitations.

I'm not clear on what you mean when you say:

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

Trying to make leaflet-arrowheads work properly with leaflet.curve would require a total rewrite based on svg, which I don't think I'm going to do. However, depending on your needs, using the .trace method to create a ghost polyline and keeping just its arrowheads may work just fine.

This is a bit tricky to do in a true and correct fashion, as leaflet-arrowheads calculates arrowheads based on latlngs, and leaflet.curve creates its curved from svg bezier functions.

However, after toying around for a bit with it, I see that leaflet.curve offers a .trace function, which returns latlng values at specified intervals along the bezier curves. Using this, you can create a ghost polyline, apply arrowheads to it, extract the arrowheads, and remove the ghost:

const latlngs = pathThree.trace([0,0.1,0.2,0.3,0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])

const ghost =  L.polyline(latlngs).arrowheads({color:'orange'}).addTo(map)
const arrowheads = ghost.getArrowheads()
ghost.remove()
arrowheads.addTo(map)

Working codesandbox

This is not.a perfect solution, as .trace applies the trace equally to all segments of your shape, which probably will not give you evenly spaced arrowheads. Also, using a frequency other than the default (every vertex), will place arrowheads not on the line itself. It works, but you have limitations.

I'm not clear on what you mean when you say:

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

Trying to make leaflet-arrowheads work properly with leaflet.curve would require a total rewrite based on svg, which I don't think I'm going to do. However, depending on your needs, using the .trace method to create a ghost polyline and keeping just its arrowheads may work just fine.

Not a perfect solution as the arrowheads do not resize on zoom. Also, their positions go wrong on zoom.

from leaflet-arrowheads.

This is a bit tricky to do in a true and correct fashion, as leaflet-arrowheads calculates arrowheads based on latlngs, and leaflet.curve creates its curved from svg bezier functions.
However, after toying around for a bit with it, I see that leaflet.curve offers a .trace function, which returns latlng values at specified intervals along the bezier curves. Using this, you can create a ghost polyline, apply arrowheads to it, extract the arrowheads, and remove the ghost:

const latlngs = pathThree.trace([0,0.1,0.2,0.3,0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])

const ghost =  L.polyline(latlngs).arrowheads({color:'orange'}).addTo(map)
const arrowheads = ghost.getArrowheads()
ghost.remove()
arrowheads.addTo(map)

Working codesandbox

This is not.a perfect solution, as .trace applies the trace equally to all segments of your shape, which probably will not give you evenly spaced arrowheads. Also, using a frequency other than the default (every vertex), will place arrowheads not on the line itself. It works, but you have limitations.
I'm not clear on what you mean when you say:

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

Trying to make leaflet-arrowheads work properly with leaflet.curve would require a total rewrite based on svg, which I don't think I'm going to do. However, depending on your needs, using the .trace method to create a ghost polyline and keeping just its arrowheads may work just fine.

This is a bit tricky to do in a true and correct fashion, as leaflet-arrowheads calculates arrowheads based on latlngs, and leaflet.curve creates its curved from svg bezier functions.
However, after toying around for a bit with it, I see that leaflet.curve offers a .trace function, which returns latlng values at specified intervals along the bezier curves. Using this, you can create a ghost polyline, apply arrowheads to it, extract the arrowheads, and remove the ghost:

const latlngs = pathThree.trace([0,0.1,0.2,0.3,0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1])

const ghost =  L.polyline(latlngs).arrowheads({color:'orange'}).addTo(map)
const arrowheads = ghost.getArrowheads()
ghost.remove()
arrowheads.addTo(map)

Working codesandbox

This is not.a perfect solution, as .trace applies the trace equally to all segments of your shape, which probably will not give you evenly spaced arrowheads. Also, using a frequency other than the default (every vertex), will place arrowheads not on the line itself. It works, but you have limitations.
I'm not clear on what you mean when you say:

The problem with straight lines is that if you have two polylines
A -> B B -> A
One of the path would be overlapped

Trying to make leaflet-arrowheads work properly with leaflet.curve would require a total rewrite based on svg, which I don't think I'm going to do. However, depending on your needs, using the .trace method to create a ghost polyline and keeping just its arrowheads may work just fine.

Not a perfect solution as the arrowheads do not resize on zoom. Also, their positions go wrong on zoom.

I adjusted the sandbox so that the arrowheads are redrawn on moveend, so it looks nice now. Here's the crucial code:

let arrowheads;

const drawArrowheads = () => {
  if (arrowheads) {
    arrowheads.remove();
  }

  const ghost = L.polyline(latlngs)
    .arrowheads({ color: "orange", size: "15000m" })
    .addTo(map);
  arrowheads = ghost.getArrowheads();
  ghost.remove();
  arrowheads.addTo(map);
};

drawArrowheads();

map.on("moveend", drawArrowheads);

Working Sandbox

from leaflet-arrowheads.