/
Leaflet.Icon.Glyph.js
116 lines (95 loc) · 4.88 KB
/
Leaflet.Icon.Glyph.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
L.Icon.Glyph = L.Icon.extend({
options: {
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41],
// iconUrl: 'glyph-marker-icon.png',
// iconSize: [35, 45],
// iconAnchor: [17, 42],
// popupAnchor: [1, -32],
// shadowAnchor: [10, 12],
// shadowSize: [36, 16],
// bgPos: (Point)
className: '',
prefix: '',
glyph: 'home',
glyphColor: 'white',
glyphSize: '11px', // in CSS units
glyphAnchor: [0, -7] // In pixels, counting from the center of the image.
},
createIcon: function () {
var div = document.createElement('div'),
options = this.options;
if (options.glyph) {
div.appendChild(this._createGlyph());
}
this._setIconStyles(div, options.className);
return div;
},
_createGlyph: function() {
var glyphClass,
textContent,
options = this.options;
if (!options.prefix) {
glyphClass = '';
textContent = options.glyph;
} else if((options.prefix === "fab") || (options.prefix === "fal") || (options.prefix === "far") || (options.prefix === "fas")) {
// Hack for Font Awesome 5 - it needs two different prefixes.
glyphClass = "fa-" + options.glyph;
} else if(options.glyph.slice(0, options.prefix.length+1) === options.prefix + "-") {
glyphClass = options.glyph;
} else {
glyphClass = options.prefix + "-" + options.glyph;
}
var span = L.DomUtil.create('span', options.prefix + ' ' + glyphClass);
span.style.fontSize = options.glyphSize;
span.style.color = options.glyphColor;
span.style.width = options.iconSize[0] + 'px';
span.style.lineHeight = options.iconSize[1] + 'px';
span.style.textAlign = 'center';
span.style.marginLeft = options.glyphAnchor[0] + 'px';
span.style.marginTop = options.glyphAnchor[1] + 'px';
span.style.pointerEvents = 'none';
span.style.display = 'inline-block';
if (textContent) {
span.innerHTML = textContent;
}
return span;
},
_setIconStyles: function (div, name) {
if (name === 'shadow') {
return L.Icon.prototype._setIconStyles.call(this, div, name);
}
var options = this.options,
size = L.point(options['iconSize']),
anchor = L.point(options.iconAnchor);
if (!anchor && size) {
anchor = size.divideBy(2, true);
}
div.className = 'leaflet-marker-icon leaflet-glyph-icon ' + name;
var src = this._getIconUrl('icon');
if (src) {
div.style.backgroundImage = "url('" + src + "')";
}
if (options.bgPos) {
div.style.backgroundPosition = (-options.bgPos.x) + 'px ' + (-options.bgPos.y) + 'px';
}
if (options.bgSize) {
div.style.backgroundSize = (options.bgSize.x) + 'px ' + (options.bgSize.y) + 'px';
}
if (anchor) {
div.style.marginLeft = (-anchor.x) + 'px';
div.style.marginTop = (-anchor.y) + 'px';
}
if (size) {
div.style.width = size.x + 'px';
div.style.height = size.y + 'px';
}
}
});
L.icon.glyph = function (options) {
return new L.Icon.Glyph(options);
};
// Base64-encoded version of glyph-marker-icon.png
L.Icon.Glyph.prototype.options.iconUrl = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAApCAYAAADAk4LOAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAN1wAADdcBQiibeAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAUlSURBVFjDrZdLiBxVFIb/e289uqt6kkx6zIiIoKgLRReKuMhCcaOIAUEIiCCE4CIPggZ8kBjooPgM0TiYEUUjqBGchZqAQlyYRTA+kJiJQiJGMjN5zYzT3dP1rrr3HBeTjDGTSfc8Dvyruud89Z9z6kIJdBj31763MivsJXKuZYF6dak5++2mh7NOcsXVHq6sHbhOK/24kOJJMO4AE1vKygwZhxlKSHGKiD+RSu09vOXB43OCrHz96y6T2lsh+OmKXzFdlbLne2UopSAupBhjECcZgjDMgiiSxPhcK/nCr1sfOtcWcm/tq9uEsL4rl0vdK67pKVu2jUwTMk0wBBAzpBCQAnAtiZIlwWQwPlHPglZQAFj1Y23VwVkh92zbd59U+Kanp+p2L12mooKQ5AbcpuclS6LiKoRhxOfHzhXMcs3PtVV7Z0DufXH/LSzpSG9vr1/p6kIz0dDUrvx/IYXAsrJCkWc4e/Z0Zpgf+KX26A/TkNtrXziesY9Xq8tvWNZdVfVYg7hzwKVv3O3ZiKMWj46OTrq5fdOh1x5pSADwjdzo2nbv0u6qqkca2jCIMGcZAuqRhu8vEX7ZK2V2WgMAcXdtvyeKbPS662+osCohzMycHVweniNREoShoZO5KYobpciSh23bFq7rIUgNiLFghRkBlg2v7GlpiccsCHrcryzxUk3zmsNskeYGvt/lxVH4hMWEu9xSWaQFYQ7L1B6iGZ5bBoy+zWKiHiltFHpqeIsVhWaosg1iqlgg4wAAEYEXsV3EmNppJmExMFYUxfVSuIs6E0sI5FkBBhLJzH9laQxLSjBj0WQJgSJPweDTkknvS4JGbCuxKOt7UY4lEQfNnAu9TzLxN2nUdAQTLAEw8YIlAVgAkmDCSBL75eCutSeY+GTUqqNkqUVxUbIl4qgJo4vWzecrhyQAMJldYf1MXLLl1EIsYBZgoGwpRI2zMTPtGBhYbSQAlJF9lieRzNMIriVBzPOWawvoIkYaNC0u9IcAIAHgp75NLQl8ENbPZJ6jgAU48RyFqHEuZyE+Pda/vjENAQBD5s209Y+kPJlyM4+r3lUS0AWSyVEhpHnjYu1pyO+7N4ywwPvhxHDiuwo8j1b5rkQwMZIziYHBXetPzIAAgIV8exZOSMoieI6aU5vKtgR0jqw1JtiYbZfW/R/kSN+mcWbxdtwYjn1XTd9B7cQAfNdCWB/OhBR7jvWv/3tWCAAoO3ktjyZZJ0HHbsq2AooERVQXzPKly2vOgPz29jNNBr+e1IcSz5YAM4hmFzPDtyWS+lDK4N2DfU+dbgsBAFHyd+oszE3agt/GjWcrUBEjj5sQBb96pXpXhAzueDJi4u1p41TsuQpCiFln4bkKeXMoJeadg++tG+sYAgBBXOo3RRrruAnfkWDmGfIdCeQhiiQgQbxjtlqzQk59vCZlNluL5lDiORLyMjcA4DsKeXM4AfDKxa97ThAAqPaMfaR1Nq6jOiqOAhOm5TsKJg1QZGGRedY7V6tzVcjBWk1D0JZ8cigt2RJSimkXnqOgW8MxQLUTb6wN5g0BgGPV0c9BekTH41xx5YXrQ8FkTRgdpxU7ea9djbYQ1GokmJ43wUhWtgRcS04tQjAcw9CWw29tThYOAXD03XVfMps/TTTOy30blDZgiqxFK6p7OsnvCDJ1UD9LyUjORoPDkUQyPfdHbXW+qJCjfRsOwOAoNY4z6Xz01rHq3k5zO4ZMHTabYSIhJD87MLB64f8Ys8WdG/tfBljMJedfwY+s/2P4Pv8AAAAASUVORK5CYII=';