2

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).

Bi-directional arrow

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?

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);
  • Thanks! It works like a charm! :) – Piera Nov 16 at 23:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.