Leaflet: Arrows on polyLines

[alFReD-NSH]

Can we put arrows on polylines so it shows the direction of the path?

[mourner]

Currently not. And it's not a trivial thing to implement, so marked as a plugin candidate.

[alFReD-NSH]

I may start to work on it, but haven't really looked at the source code of leaflet, any ideas where to start? or what to do? any thing I should be aware of like the architecture?

[mourner]

You can look at similar Google Maps third-party extensions, such as this: http://www.bdcc.co.uk/Gmaps/BdccGmapBits.htm
In Leaflet, you will need to subclass from L.Polyline.

[alFReD-NSH]

I'm putting a custom marker instead of the arrow, and then rotate it. But I need to rotate it again when zoom level changed. Is there any event that can help me?

[mourner]

Yes, map event viewreset — it's called whenever map scale is changed or initialized. There's also a zoomend event.

Rotating markers is a nice light-weight solution by the way — would be glad to look at your code when it's ready.

[runanet]

To use only one image (arrow) as marker for all directions we should to rotate it. We can extend L.Marker class to overwrite _reset method:

var ArrowMarker = L.Marker.extend({
_reset: function() {
var pos = this._map.latLngToLayerPoint(this._latlng).round();

    L.DomUtil.setPosition(this._icon, pos);
    if (this._shadow) {
        L.DomUtil.setPosition(this._shadow, pos);
    }

    if (this.options.iconAngle) {
        this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
        this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
        this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';
        this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';
    }

    this._icon.style.zIndex = pos.y;
}

});

var midy;
var midx;
var icon; //path to image
var angle; //for e.g. 90
marker = new ArrowMarker(new L.LatLng(midy,midx), {icon: new L.Icon(icon), iconAngle: angle});

[coomsie]

Nice tip,

thanks for the code ... will implement in my mobile app, was thinking how i was going to sort out the 3d transforms for arrows!

[coomsie]

here is my code b.t.w

L.Marker.Compass = L.Marker.extend({    
_reset: function() {
var pos = this._map.latLngToLayerPoint(this._latlng).round();

L.DomUtil.setPosition(this._icon, pos);
if (this._shadow) {
    L.DomUtil.setPosition(this._shadow, pos);
}

if (this.options.iconAngle) {
    this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.iconAngle + 'deg)';
    this._icon.style.MozTransform = 'rotate(' + this.options.iconAngle + 'deg)';
    this._icon.style.MsTransform = 'rotate(' + this.options.iconAngle + 'deg)';
    this._icon.style.OTransform = 'rotate(' + this.options.iconAngle + 'deg)';
}

this._icon.style.zIndex = pos.y;
},

setIconAngle: function (iconAngle) {

    if (this._map) {
        this._removeIcon();
    }

    this.options.iconAngle = iconAngle;

    if (this._map) {
        this._initIcon();
        this._reset();
    }
}

});

[mourner]

Closing this, but leaving marker rotation issue #143

[p-j]

I was looking for a feature like this one, I found these :
bbecquet/Leaflet.PolylineDecorator
makinacorpus/Leaflet.TextPath

[aavmurphy]

There are 2 plugins that implement this , polyline decorator (uses svg) and textpath (uses text)