Rotate symbols 180 degrees for relation roles set to 'backwards'?

[DaveF63]

Hi Is there a simple way within decorator to rotate the symbol 180 degrees so that they point in the correct direction for any relation 'roles' that are set to 'backward'? The only other way I can think of is to reverse the coordinates for those ways.

Thanks

[DaveF63]

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

[bbecquet]

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)

[DaveF63]

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.

[bbecquet]

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.

[bbecquet]

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);
};

[mmouterde]

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

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