mirror of
https://github.com/Leaflet/Leaflet.Icon.Glyph.git
synced 2025-07-20 18:27:26 +00:00
117 lines
4.9 KiB
JavaScript
117 lines
4.9 KiB
JavaScript
|
|
|
|
|
|
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=';
|