Rotate symbols 180 degrees for relation roles set to 'backwards'? about leaflet.polylinedecorator HOT 6 OPEN

PS Labels: I must be blind, all I can see after I've posted the message is 'Labels None yet'

from leaflet.polylinedecorator.

There is no built-in feature right now to do that.
If you use rotated marker symbols, you could "cheat" by using an upside-down image. But if you use arrow symbols, the right way without reversing the coordinates is to define your own symbol behavior, by extending the existing class to add 180 to dirPoint.heading.

L.Symbol.ReverseArrow = L.Symbol.ArrowHead.extend({
  buildSymbol: function(dirPoint, latLngs, map, index, total) {
    dirPoint.heading += 180;
    return L.Symbol.ArrowHead.prototype.buildSymbol.call(this, dirPoint, latLngs, map, index, total);
  }
});
L.Symbol.reverseArrow = function (options) {
    return new L.Symbol.ReverseArrow(options);
};

(As for the GitHub labels, I can edit them with a gear icon, but maybe it's just available to repository admins)

from leaflet.polylinedecorator.

Thanks for that. It half works - As I zoom in & out, at random zoom levels it will flip all the arrow heads around to there original orientation. On looking at your code I assume it's some within RotatedMarker.js, but unsure what exactly.

from leaflet.polylinedecorator.

You're right, it's really strang !
But as I wrote the code above really quickly, it's no wonder there may be bugs. I think it's related to the cache system, which avoids recomputing angles at zooms which have been already displayed before. I'm looking at it.

from leaflet.polylinedecorator.

Found it, it was obvious and I really should be ashamed of myself :)
I was modifying the actual direction point object each time the pattern had to be redrawn, and as it's cached, each time you encountered the zoom level it added 180 to the same angle, which inverted direction.

That is the correct code, working on a clone of the object:

L.Symbol.ReverseArrow = L.Symbol.ArrowHead.extend({
  buildSymbol: function(dirPoint, latLngs, map, index, total) {
    var reverseDirPoint = {
      pt: dirPoint.pt,
      predecessor: dirPoint.predecessor,
      latLng: dirPoint.latLng,
      heading: (dirPoint.heading + 180) % 360
    };
    return L.Symbol.ArrowHead.prototype.buildSymbol.call(this, reverseDirPoint, latLngs, map, index, total);
  }
});
L.Symbol.reverseArrow = function (options) {
    return new L.Symbol.ReverseArrow(options);
};

from leaflet.polylinedecorator.

old thread but anyway, using headAngle: -290 works for me :

  Symbol.arrowHead({
                        pixelSize: 20,
                        polygon: false,
                        pathOptions: { stroke: true },
                        headAngle: -290,
                    })

from leaflet.polylinedecorator.