├── LICENSE
├── README.md
├── example
├── image.gif
└── index.html
└── leaflet-polygon.fillPattern.js
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2013 lnaweisu
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
6 | this software and associated documentation files (the "Software"), to deal in
7 | the Software without restriction, including without limitation the rights to
8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | leaflet-polygon-fillPattern
2 | ===========================
3 |
4 | Extend the Polygon Object to fill SVG Path element with an image pattern.
5 |
6 | Check out the [demo](http://lwsu.github.io/leaflet-polygon-fillPattern/example/).
7 |
8 | ### Usage example
9 |
10 | ```javascript
11 | var poly1 = [
12 | [24, 121],
13 | [24.5, 121],
14 | [24.5, 121.9],
15 | [24, 121.9]
16 | ];
17 | L.polygon(poly1, {fill:'url(image.gif)'}).addTo(map);
18 | ```
19 |
20 |
--------------------------------------------------------------------------------
/example/image.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudybay/leaflet-polygon-fillPattern/2649220813fd8849656eb30d29ccde853e154c39/example/image.gif
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 |
16 |
17 |
39 |
40 |
--------------------------------------------------------------------------------
/leaflet-polygon.fillPattern.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Extend the Polygon Object to set an image to fill the path in SVG
3 | * exp:
4 | * L.Polygon(points, {fill: 'url(image.gif)'});
5 | * Author: lanwei@cloudybay.com.tw
6 | */
7 |
8 | (function (window, document, undefined) {
9 |
10 | if (L.Browser.svg) {
11 | L.SVG.include({
12 | _updateStyle: function (layer) {
13 | var path = layer._path,
14 | options = layer.options;
15 |
16 | if (!path) { return; }
17 |
18 | if (options.stroke) {
19 | path.setAttribute('stroke', options.color);
20 | path.setAttribute('stroke-opacity', options.opacity);
21 | path.setAttribute('stroke-width', options.weight);
22 | path.setAttribute('stroke-linecap', options.lineCap);
23 | path.setAttribute('stroke-linejoin', options.lineJoin);
24 |
25 | if (options.dashArray) {
26 | path.setAttribute('stroke-dasharray', options.dashArray);
27 | } else {
28 | path.removeAttribute('stroke-dasharray');
29 | }
30 |
31 | if (options.dashOffset) {
32 | path.setAttribute('stroke-dashoffset', options.dashOffset);
33 | } else {
34 | path.removeAttribute('stroke-dashoffset');
35 | }
36 | } else {
37 | path.setAttribute('stroke', 'none');
38 | }
39 |
40 | if (options.fill) {
41 | if (typeof(options.fill) == "string" &&
42 | options.fill.match(/^url\(/)) {
43 | // here what we add
44 | this.__fillPattern(layer);
45 | }
46 | else {
47 | path.setAttribute('fill', options.fillColor || options.color);
48 | }
49 | path.setAttribute('fill-opacity', options.fillOpacity);
50 | path.setAttribute('fill-rule', options.fillRule || 'evenodd');
51 | } else {
52 | path.setAttribute('fill', 'none');
53 | }
54 | },
55 |
56 | __fillPattern: function(layer) {
57 | var path = layer._path,
58 | options = layer.options;
59 |
60 | if (!this._defs) {
61 | this._defs = L.SVG.create('defs');
62 | this._container.appendChild(this._defs);
63 | }
64 | var _img_url = options.fill.substring(4, options.fill.length-1);
65 | var _ref_id = _img_url + (Math.random() * Math.pow(10, 17) + Math.random() * Math.pow(10, 17));
66 | _ref_id += new Date().getUTCMilliseconds();
67 | var _p = document.getElementById(_ref_id);
68 | if (!_p) {
69 | var _im = new Image();
70 | _im.src = _img_url;
71 |
72 | _p = L.SVG.create('pattern');
73 | _p.setAttribute('id', _ref_id);
74 | _p.setAttribute('x', '0');
75 | _p.setAttribute('y', '0');
76 | _p.setAttribute('patternUnits', 'userSpaceOnUse');
77 | _p.setAttribute('width', '24');
78 | _p.setAttribute('height', '24');
79 | var _rect = L.SVG.create('rect');
80 | _rect.setAttribute('width', 24);
81 | _rect.setAttribute('height', 24);
82 | _rect.setAttribute('x', 0);
83 | _rect.setAttribute('x', 0);
84 | _rect.setAttribute('fill', options.fillColor || options.color);
85 |
86 | _p.appendChild(_rect);
87 | this._defs.appendChild(_p);
88 |
89 | var _img = L.SVG.create('image');
90 | _img.setAttribute('x', '0');
91 | _img.setAttribute('y', '0');
92 | _img.setAttributeNS('http://www.w3.org/1999/xlink', 'href', _img_url);
93 | _img.setAttribute('width', '24');
94 | _img.setAttribute('height', '24');
95 | _p.appendChild(_img);
96 |
97 | _im.onload = function() {
98 | _p.setAttribute('width', _im.width);
99 | _p.setAttribute('height', _im.height);
100 | _img.setAttribute('width', _im.width);
101 | _img.setAttribute('height', _im.height);
102 | };
103 | }
104 | path.setAttribute('fill', "url(#"+_ref_id+")");
105 | }
106 | });
107 | }
108 |
109 | }(this, document));
110 |
111 |
--------------------------------------------------------------------------------