Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make compass and zoom controls optional #5348

Merged
merged 6 commits into from
Jan 10, 2018
Merged

Make compass and zoom controls optional #5348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
38b5a01
Refactor line separator between control buttons
matijs Sep 25, 2017
e16d3de
Make compass optional
matijs Sep 25, 2017
83d2822
Make zoom-in/out buttons optional
matijs Sep 25, 2017
a6adee4
Add documentation
matijs Sep 25, 2017
f274cbe
Update documentation
Oct 3, 2017
0a6fc07
Conditionally add the dragRotateHandler
matijs Jan 9, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions dist/mapbox-gl.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,19 +67,19 @@
padding: 0;
outline: none;
border: none;
border-bottom: 1px solid #ddd;
box-sizing: border-box;
background-color: rgba(0,0,0,0);
cursor: pointer;
}

.mapboxgl-ctrl-group > button + button {
border-top: 1px solid #ddd;
}
/* https://bugzilla.mozilla.org/show_bug.cgi?id=140562 */
.mapboxgl-ctrl > button::-moz-focus-inner {
border: 0;
padding: 0;
}
.mapboxgl-ctrl > button:last-child {
border-bottom: 0;
}
.mapboxgl-ctrl > button:hover {
background-color: rgba(0,0,0,0.05);
}
Expand Down
50 changes: 34 additions & 16 deletions src/ui/control/navigation_control.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,18 @@ const DragRotateHandler = require('../handler/drag_rotate');

import type Map from '../map';

const defaultOptions = {
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');
Expand All @@ -18,25 +26,31 @@ import type Map from '../map';
*/
class NavigationControl {
_map: Map;
options: any;
_container: HTMLElement;
_zoomInButton: HTMLElement;
_zoomOutButton: HTMLElement;
_compass: HTMLElement;
_compassArrow: HTMLElement;
_handler: DragRotateHandler;

constructor() {
util.bindAll([
'_rotateCompassArrow'
], this);
constructor(options: any) {
this.options = util.extend({}, defaultOptions, options);

this._container = DOM.create('div', 'mapboxgl-ctrl mapboxgl-ctrl-group');
this._container.addEventListener('contextmenu', (e) => e.preventDefault());

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());
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);
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) {
util.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() {
Expand All @@ -46,20 +60,24 @@ class NavigationControl {

onAdd(map: Map) {
this._map = map;
this._map.on('rotate', this._rotateCompassArrow);
this._rotateCompassArrow();
this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
this._handler.enable();
if (this.options.showCompass) {
this._map.on('rotate', this._rotateCompassArrow);
this._rotateCompassArrow();
this._handler = new DragRotateHandler(map, {button: 'left', element: this._compass});
this._handler.enable();
}
return this._container;
}

onRemove() {
DOM.remove(this._container);
this._map.off('rotate', this._rotateCompassArrow);
delete this._map;
if (this.options.showCompass) {
this._map.off('rotate', this._rotateCompassArrow);
this._handler.disable();
delete this._handler;
}

this._handler.disable();
delete this._handler;
delete this._map;
}

_createButton(className: string, ariaLabel: string, fn: () => mixed) {
Expand Down