Add behaviors to L.Symbol.Marker or provide a new symbol type to display oriented marker icons about leaflet.polylinedecorator HOT 2 CLOSED

Hi, and thanks for using my plugin!

I hoped to find a way to have rotation on markers without any new class, as the plugin already relies on many, but maybe I shouldn't care, and your solution is really simple and elegant.

Can I add your L.MarkerWithAngle class to the source, and provide a boolean option like rotate on L.Symbol.Marker, to choose it instead of the simple L.Marker class? I think it would be a good fix to this issue.
Or maybe you want to contribute a pull-request yourself?

About your question, it is complex matter, as nothing is really "wrong" technically speaking. The angle at each point seems to be properly computed, but on complex polylines it may result in overlaping symbols or worse, like on your 1st example, symbols that seem wrong although they indicate the right direction at the local level.

I don't see any easy solution right now, mainly because the drawing process is independant from the one computing points on the polyline.
It is somewhat linked to the bug #3 about dashes, although in that case I see quite well how to do it at the drawing step...

Can you elaborate on your idea of interpolating the points please?

I will think on the problem, thanks for pointing it!

from leaflet.polylinedecorator.

Hello!

I'm trying to use your nice plugin for adding direction arrows to a polyline.

Marker's rotation is planned in a "future" milestone: Leaflet/Leaflet#143
Meanwhile I've extended the L.Marker in this way:

L.MarkerWithAngle = L.Marker.extend({
    options: {
        angle: 0
    },
    _setPos: function (pos) {
        L.Marker.prototype._setPos.call(this, pos);
        this._icon.style.MozTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.angle + 'deg)';
        this._icon.style.MsTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.angle + 'deg)';
        this._icon.style.OTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.angle + 'deg)';
        this._icon.style.WebkitTransform = this._icon.style.WebkitTransform + ' rotate(' + this.options.angle + 'deg)';
    }
});

and added a new Symbol using a DivIcon for the marker using a plain-text rightwards arrow as html.

L.Symbol.Arrow = L.Class.extend({
    buildSymbol: function (directionPoint, latLngs, map, index, total) {
        var marker = new L.MarkerWithAngle(directionPoint.latLng, {
            clickable: false,
            draggable: false,
            icon: new L.DivIcon({
                html: '→'
            }),
            angle: directionPoint.heading - 90 // since icon's is a rightwards arrow
        });
        return marker;
    }
});

(You may need this CSS)

.leaflet-marker-icon.leaflet-div-icon {
    background: none;
    border: 0;
    color: blue;
    font-size: 18px;
}

While it works great for straight polylines, there're cases when it doesn't work (see attach), usually when there are curves. What would you do? The basic idea would just to not draw the decoration when it's "wrong", but also wecan interpolate the points in some way...

from leaflet.polylinedecorator.