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