/
LizmapZoomElement.js
54 lines (42 loc) · 1.52 KB
/
LizmapZoomElement.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
import {LizmapMapManager} from '../modules/LizmapGlobals.js';
import {library, findIconDefinition, icon} from '@fortawesome/fontawesome-svg-core';
import {faPlus, faMinus} from '@fortawesome/free-solid-svg-icons';
library.add(faPlus, faMinus);
export default class LizmapZoomElement extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this._mapId = this.getAttribute('map-id');
const zoomin = document.createElement('button');
const zoomout = document.createElement('button');
zoomin.type = 'button';
zoomin.classList = 'btn btn-danger btn-sm d-block mb-1';
zoomout.type = 'button';
zoomout.classList = 'btn btn-danger btn-sm d-block';
// Set icon
const iconPlus = icon(findIconDefinition({prefix: 'fa', iconName: 'plus'}), {
transform: {
size: 30
}
});
zoomin.appendChild(iconPlus.node[0]);
const iconMinus = icon(findIconDefinition({prefix: 'fa', iconName: 'minus'}), {
transform: {
size: 30
}
});
zoomout.appendChild(iconMinus.node[0]);
zoomin.addEventListener('click', () => {
LizmapMapManager.getMap(this.mapId).zoomIn();
});
zoomout.addEventListener('click', () => {
LizmapMapManager.getMap(this.mapId).zoomOut();
});
this.appendChild(zoomin);
this.appendChild(zoomout);
}
get mapId() {
return this._mapId;
}
}