Bi-directional arrow in Leaflet

Question

I'm using Leaflet to create a map of movements of a species of interest. I'm using polylineDecorator to draw arrows, but I would like to have a bi-directional arrow (example in figure below).

Right now my code for a single arrowhead looks like that:

       function pop_Seasonal_0(feature, layer) {
          var PD1 = L.polyline(layer.getLatLngs(), {
               color: "#8B0000",weight: 5,opacity: 1,dashArray: '4,12,20,12'
          }).addTo(layer_Seasonal_0);

          L.polylineDecorator(PD1, {
            patterns: [{
              offset: '110%',
              repeat: 0,
              symbol: L.Symbol.arrowHead({
                pixelSize: 20,
                pathOptions: {
                  color: "#8B0000",
                  fillOpacity: 1,
                  weight: 0
                }
              })
            }]
          }).addTo(layer_Seasonal_0);
        }

Is there a way to do it?

Answer 1

PolylineDecorator plugin out of the box does not offer possibility of changing directon of the arrow. To achieve this, L.Symbol.ArrowHead object has to be extended with modification of call to internal _buildArrowPath method that takes care of arrow creation.

In the modified call parameter that tells about polyline direction is modified by adding 180 degrees:

L.Symbol.ArrowHead.Opposite = L.Symbol.ArrowHead.extend({
  _buildArrowPath: function(dirPoint, map) {
    dirPoint.heading += 180;
    return L.Symbol.ArrowHead.prototype._buildArrowPath.call(this, dirPoint, map);
  }
});

L.Symbol.arrowHead.opposite = function(options) {
  return new L.Symbol.ArrowHead.Opposite(options);
}

Creating of line with arrows in both directions then looks like this:

var arrowSymbol = L.Symbol.arrowHead({pixelSize: 15, polygon: false, pathOptions: {stroke: true}});
var oppositeArrowSymbol = L.Symbol.arrowHead.opposite({pixelSize: 15, polygon: false, pathOptions: {stroke: true}});

var arrow = L.polyline([[57, -19], [60, -12]], {}).addTo(map);
var arrowHead = L.polylineDecorator(arrow, {
  patterns: [
    {offset: '100%', repeat: 0, symbol: arrowSymbol},
    {offset: '0%', repeat: 0, symbol: oppositeArrowSymbol}
  ]
}).addTo(map);