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
|
import {Icon} from './Icon';
import {toPoint as point} from '../../geometry/Point';
/*
* @class DivIcon
* @aka L.DivIcon
* @inherits Icon
*
* Represents a lightweight icon for markers that uses a simple `<div>`
* element instead of an image. Inherits from `Icon` but ignores the `iconUrl` and shadow options.
*
* @example
* ```js
* var myIcon = L.divIcon({className: 'my-div-icon'});
* // you can set .my-div-icon styles in CSS
*
* L.marker([50.505, 30.57], {icon: myIcon}).addTo(map);
* ```
*
* By default, it has a 'leaflet-div-icon' CSS class and is styled as a little white square with a shadow.
*/
export var DivIcon = Icon.extend({
options: {
// @section
// @aka DivIcon options
iconSize: [12, 12], // also can be set through CSS
// iconAnchor: (Point),
// popupAnchor: (Point),
// @option html: String = ''
// Custom HTML code to put inside the div element, empty by default.
html: false,
// @option bgPos: Point = [0, 0]
// Optional relative position of the background, in pixels
bgPos: null,
className: 'leaflet-div-icon'
},
createIcon: function (oldIcon) {
var div = (oldIcon && oldIcon.tagName === 'DIV') ? oldIcon : document.createElement('div'),
options = this.options;
div.innerHTML = options.html !== false ? options.html : '';
if (options.bgPos) {
var bgPos = point(options.bgPos);
div.style.backgroundPosition = (-bgPos.x) + 'px ' + (-bgPos.y) + 'px';
}
this._setIconStyles(div, 'icon');
return div;
},
createShadow: function () {
return null;
}
});
// @factory L.divIcon(options: DivIcon options)
// Creates a `DivIcon` instance with the given options.
export function divIcon(options) {
return new DivIcon(options);
}
|
