/
navigation_control.js
99 lines (85 loc) · 3.4 KB
/
navigation_control.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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
// @flow
import DOM from '../../util/dom';
import { extend, bindAll } from '../../util/util';
import DragRotateHandler from '../handler/drag_rotate';
import type Map from '../map';
type Options = {
showCompass?: boolean,
showZoom?: boolean
};
const defaultOptions: Options = {
showCompass: true,
showZoom: true
};
/**
* A `NavigationControl` control contains zoom buttons and a compass.
*
* @implements {IControl}
* @param {Object} [options]
* @param {Boolean} [options.showCompass=true] If `true` the compass button is included.
* @param {Boolean} [options.showZoom=true] If `true` the zoom-in and zoom-out buttons are included.
* @example
* var nav = new mapboxgl.NavigationControl();
* map.addControl(nav, 'top-left');
* @see [Display map navigation controls](https://www.mapbox.com/mapbox-gl-js/example/navigation/)
* @see [Add a third party vector tile source](https://www.mapbox.com/mapbox-gl-js/example/third-party/)
*/
class NavigationControl {
_map: Map;
options: Options;
_container: HTMLElement;
_zoomInButton: HTMLElement;
_zoomOutButton: HTMLElement;
_compass: HTMLElement;
_compassArrow: HTMLElement;
_handler: DragRotateHandler;
constructor(options: Options) {
this.options = extend({}, defaultOptions, options);
this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
this._container.addEventListener('contextmenu', (e) => e.preventDefault());
if (this.options.showZoom) {
this._zoomInButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-in', 'Zoom In', () => this._map.zoomIn());
this._zoomOutButton = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-zoom-out', 'Zoom Out', () => this._map.zoomOut());
}
if (this.options.showCompass) {
bindAll([
'_rotateCompassArrow'
], this);
this._compass = this._createButton('mapboxgl-ctrl-icon mapboxgl-ctrl-compass', 'Reset North', () => this._map.resetNorth());
this._compassArrow = DOM.create('span', 'mapboxgl-ctrl-compass-arrow', this._compass);
}
}
_rotateCompassArrow() {
const rotate = `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
this._compassArrow.style.transform = rotate;
}
onAdd(map: Map) {
this._map = map;
if (this.options.showCompass) {
this._map.on('rotate', this._rotateCompassArrow);
this._rotateCompassArrow();
this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
DOM.addEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
this._handler.enable();
}
return this._container;
}
onRemove() {
DOM.remove(this._container);
if (this.options.showCompass) {
this._map.off('rotate', this._rotateCompassArrow);
DOM.removeEventListener(this._compass, 'mousedown', this._handler.onMouseDown);
this._handler.disable();
delete this._handler;
}
delete this._map;
}
_createButton(className: string, ariaLabel: string, fn: () => mixed) {
const a = DOM.create('button', className, this._container);
a.type = 'button';
a.setAttribute('aria-label', ariaLabel);
a.addEventListener('click', fn);
return a;
}
}
export default NavigationControl;