Support dashed lines

[JasonSanford]

I wanted my lines to be dashed in a Leaflet map I've been working on. This was very easy to implement if the client supports SVG. I added this code at line 86 of Path.SVG.js:

if (this.options.dasharray) {
    this._path.setAttribute('stroke-dasharray', this.options.dasharray);
}

This lets you set the "stroke-dasharray" attribute by changing a simple option to the Path object:

e.layer.setStyle({
    dasharray: "8,6"
});

The product is a pretty nice looking dashed line:

This obviously only works with SVG, but I wonder how much work it would be to implement in Canvas. There are some folks who have had some luck doing this.

Any thoughts, opinions?

[mourner]

Nice feature to have, and not too difficult to implement (dashes are usually implemented in Canvas with a moveTo/lineTo loop). The only catch is to rewrite drawing logic a bit to set path on fill and stroke separately in case of dashed stroke.

[danielschaefer]

is this feature still on to be realised in the near future?

or does anyone has a workaround for it?

[TotoLastro]

It does not work for me in v0.7.7

My workaround is to patch the L.Polyline._drawPath function like that :

// Add browser support for Canvas#dashedLine(...)
(function () {
    var CP = window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype;
    if (CP.lineTo) {
        CP.dashedLine = CP.dashedLine || function(x, y, x2, y2, da) {
            if (!da) da = [10,5];
            this.save();
            var dx = (x2-x), dy = (y2-y);
            var len = Math.sqrt(dx*dx + dy*dy);
            var rot = Math.atan2(dy, dx);
            this.translate(x, y);
            this.moveTo(0, 0);
            this.rotate(rot);      
            var dc = da.length;
            var di = 0, draw = true;
            x = 0;
            while (len > x) {
                x += da[di++ % dc];
                if (x > len) x = len;
                draw ? this.lineTo(x, 0): this.moveTo(x, 0);
                draw = !draw;
            }
            this.restore();
        }
    }
})();

// ----------------------------------------------------------------------------
// ----------------------------------------------------------------------------

L.Polyline.include(!L.Path.CANVAS ? {} : {
    _drawPath: function () {
        var i, j, len, len2, point1, point2, drawMethod;

        var optionDashArray = this.options.dashArray;
        if (optionDashArray) {
            optionDashArray = optionDashArray.split(" ");
            optionDashArray = optionDashArray.map(Number);
        }

        this._ctx.beginPath();

        for (i = 0, len = this._parts.length; i < len; i++) {
            point1 = this._parts[i][0];
            for (j = 1, len2 = this._parts[i].length; j < len2; j++) {
                point2 = this._parts[i][j];

                if (optionDashArray) {
                    this._ctx.dashedLine(point1.x, point1.y, point2.x, point2.y, optionDashArray);
                } else {
                    if (j === 1) {
                        this._ctx.moveTo(point1.x, point1.y);
                    }

                    this._ctx.lineTo(point2.x, point2.y);
                }

                point1 = point2;
            }
            // TODO refactor ugly hack
            if (this instanceof L.Polygon) {
                this._ctx.closePath();
            }
        }
    }
});

If it can help someone...