leaflet-polygon.fillPattern.js

/**
 *  Extend the Polygon Object to set an image to fill the path in SVG
 *  exp:
 *    L.Polygon(points, {fill: 'url(image.gif)'});
 *  Author: lanwei@cloudybay.com.tw
 */

(function (window, document, undefined) {

if (L.Browser.svg) {
    L.SVG.include({
        _updateStyle: function (layer) {
            var path = layer._path,
                options = layer.options;

            if (!path) { return; }

            if (options.stroke) {
                path.setAttribute('stroke', options.color);
                path.setAttribute('stroke-opacity', options.opacity);
                path.setAttribute('stroke-width', options.weight);
                path.setAttribute('stroke-linecap', options.lineCap);
                path.setAttribute('stroke-linejoin', options.lineJoin);

                if (options.dashArray) {
                    path.setAttribute('stroke-dasharray', options.dashArray);
                } else {
                    path.removeAttribute('stroke-dasharray');
                }

                if (options.dashOffset) {
                    path.setAttribute('stroke-dashoffset', options.dashOffset);
                } else {
                    path.removeAttribute('stroke-dashoffset');
                }
            } else {
                path.setAttribute('stroke', 'none');
            }

            if (options.fill) {
                if (typeof(options.fill) == "string" &&
                        options.fill.match(/^url\(/)) {
                    // here what we add
                    this.__fillPattern(layer);
                }
                else {
                    path.setAttribute('fill', options.fillColor || options.color);
                }
                path.setAttribute('fill-opacity', options.fillOpacity);
                path.setAttribute('fill-rule', options.fillRule || 'evenodd');
            } else {
                path.setAttribute('fill', 'none');
            }
        },

        __fillPattern: function(layer) {
            var path = layer._path,
                options = layer.options;

            if (!this._defs) {
                this._defs = L.SVG.create('defs');
                this._container.appendChild(this._defs);
            }
            var _img_url = options.fill.substring(4, options.fill.length-1);
            var _ref_id = _img_url + (Math.random() * Math.pow(10, 17) + Math.random() * Math.pow(10, 17));
            _ref_id += new Date().getUTCMilliseconds();
            var _p = document.getElementById(_ref_id);
            if (!_p) {
                var _im = new Image();
                _im.src = _img_url;

                _p = L.SVG.create('pattern');
                _p.setAttribute('id', _ref_id);
                _p.setAttribute('x', '0');
                _p.setAttribute('y', '0');
                _p.setAttribute('patternUnits', 'userSpaceOnUse');
                _p.setAttribute('width', '24');
                _p.setAttribute('height', '24');
                var _rect = L.SVG.create('rect');
                _rect.setAttribute('width', 24);
                _rect.setAttribute('height', 24);
                _rect.setAttribute('x', 0);
                _rect.setAttribute('x', 0);
                _rect.setAttribute('fill', options.fillColor || options.color);

                _p.appendChild(_rect);
                this._defs.appendChild(_p);

                var _img = L.SVG.create('image');
                _img.setAttribute('x', '0');
                _img.setAttribute('y', '0');
                _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _img_url);
                _img.setAttribute('width', '24');
                _img.setAttribute('height', '24');
                _p.appendChild(_img);

                _im.onload = function() {
                    _p.setAttribute('width', _im.width);
                    _p.setAttribute('height', _im.height);
                    _img.setAttribute('width', _im.width);
                    _img.setAttribute('height', _im.height);
                };
            }
            path.setAttribute('fill', "url(#"+_ref_id+")");
        }
    });
}

}(this, document));