-
Notifications
You must be signed in to change notification settings - Fork 0
/
materialIcons.ts
67 lines (50 loc) · 1.67 KB
/
materialIcons.ts
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
import { Icon, IconOptions } from 'leaflet';
import * as L from 'leaflet';
export interface MaterialIconOptions extends IconOptions {
iconName?;
iconColor?;
iconXOffset?;
iconYOffset?;
}
export class MaterialIcon extends Icon {
options: MaterialIconOptions;
constructor(options: IconOptions) {
super(options);
}
createIcon() {
const div = document.createElement('div');
const options = this.options;
if (options.iconName) {
div.appendChild(this._createIcon());
}
return div;
}
_createIcon() {
const options = this.options;
// container div
const iconDiv = L.DomUtil.create('div', 'leaflet-material-icons-markers');
// feature icon
const iconI = L.DomUtil.create('i', 'material-icons feature-icon');
iconI.innerHTML = options.iconName;
iconI.style.color = options.iconColor;
iconI.style.textAlign = 'center';
// XY position adjustments
if(options.iconYOffset && options.iconYOffset !== 0) {
iconI.style.marginTop = options.iconYOffset + 'px';
}
if(options.iconXOffset && options.iconXOffset !== 0) {
iconI.style.marginLeft = options.iconXOffset + 'px';
}
const iconImg = document.createElement('div');
iconImg.className = 'marker-icon';
iconImg.innerHTML = '<img ' + 'src="' + options.iconUrl + '" ' + '</img>';
iconImg.style.marginTop = '-41px';
const shadowImg = document.createElement('div');
shadowImg.className = 'marker-icon-shadow';
shadowImg.innerHTML = '<img ' + 'src="' + options.shadowUrl + '" ' + '</img>';
iconDiv.appendChild(shadowImg);
iconDiv.appendChild(iconImg);
iconDiv.appendChild(iconI);
return iconDiv;
}
}