| 1 |
L.SVGIcon = L.Icon.extend({ |
| 2 |
options: { |
| 3 |
iconSize: [26, 42], |
| 4 |
popupAnchor: [1, -42], |
| 5 |
tooltipAnchor: [16, -28], |
| 6 |
iconClass: '', |
| 7 |
background: '#2b82cb', |
| 8 |
color: 'white' |
| 9 |
}, |
| 10 |
createIcon: function (oldIcon) { |
| 11 |
var div = (oldIcon && oldIcon.tagName === 'DIV') ? |
| 12 |
oldIcon : document.createElement('div'); |
| 13 |
var options = this.options; |
| 14 |
var size = options.iconSize; |
| 15 |
var x = size[0]; |
| 16 |
var y = size[1]; |
| 17 |
|
| 18 |
var svgCreate = function svgCreate (tag, attrs) { |
| 19 |
var el = document.createElementNS('http://www.w3.org/2000/svg', tag); |
| 20 |
for (var k in attrs) { |
| 21 |
el.setAttribute(k, attrs[k]); |
| 22 |
} |
| 23 |
return el; |
| 24 |
}; |
| 25 |
|
| 26 |
var svg = svgCreate('svg', { |
| 27 |
viewBox: '0 0 365 560' |
| 28 |
}); |
| 29 |
|
| 30 |
var path = svgCreate('path', { |
| 31 |
fill: this.options.background, |
| 32 |
d: 'M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,' + |
| 33 |
'283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9' + |
| 34 |
'C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,' + |
| 35 |
'175.3,357.4S182.9,551.7,182.9,551.7z' |
| 36 |
}); |
| 37 |
|
| 38 |
svg.appendChild(path); |
| 39 |
div.appendChild(svg); |
| 40 |
|
| 41 |
div.setAttribute('style', 'margin-left: ' + (-x/2) + 'px;' + |
| 42 |
'margin-top: ' + -y + 'px;' + |
| 43 |
'width: ' + x + 'px;' + |
| 44 |
'height: ' + y + 'px;' |
| 45 |
); |
| 46 |
|
| 47 |
// add icon |
| 48 |
var i = document.createElement('i'); |
| 49 |
i.className = this.options.iconClass; |
| 50 |
i.setAttribute('style', 'position:absolute;' + |
| 51 |
'top: 34%;' + |
| 52 |
'left: 50%;' + |
| 53 |
'transform: translate3d(-50%, -34%, 0);' + |
| 54 |
'color: ' + (this.options.color) + ';' + |
| 55 |
'line-height: 0;' |
| 56 |
); |
| 57 |
div.appendChild(i); |
| 58 |
|
| 59 |
return div; |
| 60 |
} |
| 61 |
}); |
| 62 |
|
| 63 |
L.SVGMarker = L.Marker.extend({ |
| 64 |
initialize: function (latlng, options) { |
| 65 |
options = options || {}; |
| 66 |
var svg_options = L.extend({}, |
| 67 |
L.SVGIcon.prototype.options, |
| 68 |
options |
| 69 |
); |
| 70 |
options.icon = new L.SVGIcon( svg_options ); |
| 71 |
L.Marker.prototype.initialize.call(this, latlng, options); |
| 72 |
} |
| 73 |
}); |
