-
-
Notifications
You must be signed in to change notification settings - Fork 643
/
terrain_control.ts
71 lines (63 loc) · 2.32 KB
/
terrain_control.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
67
68
69
70
71
import {DOM} from '../../util/dom';
import type {Map} from '../map';
import type {IControl} from './control';
import type {TerrainSpecification} from '@maplibre/maplibre-gl-style-spec';
/**
* A `TerrainControl` control contains a button for turning the terrain on and off.
*
* @group Markers and Controls
*
* @example
* ```ts
* let map = new Map({TerrainControl: false})
* .addControl(new TerrainControl({
* source: "terrain"
* }));
* ```
*/
export class TerrainControl implements IControl {
options: TerrainSpecification;
_map: Map;
_container: HTMLElement;
_terrainButton: HTMLButtonElement;
constructor(options: TerrainSpecification) {
this.options = options;
}
/** {@inheritDoc IControl.onAdd} */
onAdd(map: Map) {
this._map = map;
this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
this._terrainButton = DOM.create('button', 'maplibregl-ctrl-terrain', this._container);
DOM.create('span', 'maplibregl-ctrl-icon', this._terrainButton).setAttribute('aria-hidden', 'true');
this._terrainButton.type = 'button';
this._terrainButton.addEventListener('click', this._toggleTerrain);
this._updateTerrainIcon();
this._map.on('terrain', this._updateTerrainIcon);
return this._container;
}
/** {@inheritDoc IControl.onRemove} */
onRemove() {
DOM.remove(this._container);
this._map.off('terrain', this._updateTerrainIcon);
this._map = undefined;
}
_toggleTerrain = () => {
if (this._map.getTerrain()) {
this._map.setTerrain(null);
} else {
this._map.setTerrain(this.options);
}
this._updateTerrainIcon();
};
_updateTerrainIcon = () => {
this._terrainButton.classList.remove('maplibregl-ctrl-terrain');
this._terrainButton.classList.remove('maplibregl-ctrl-terrain-enabled');
if (this._map.terrain) {
this._terrainButton.classList.add('maplibregl-ctrl-terrain-enabled');
this._terrainButton.title = this._map._getUIString('TerrainControl.Disable');
} else {
this._terrainButton.classList.add('maplibregl-ctrl-terrain');
this._terrainButton.title = this._map._getUIString('TerrainControl.Enable');
}
};
}