@scoova/mgl 1.0.0

package/src/ui/control/navigation_control.ts

@@ -0,0 +1,294 @@
+import Point from '@mapbox/point-geometry';
+
+import {DOM} from '../../util/dom';
+import {extend} from '../../util/util';
+import {generateMousePitchHandler, generateMouseRotationHandler, MousePitchHandler, MouseRotateHandler} from '../handler/mouse';
+import {generateOneFingerTouchPitchHandler, generateOneFingerTouchRotationHandler, OneFingerTouchPitchHandler, OneFingerTouchRotateHandler} from '../handler/one_finger_touch_drag';
+
+import type {Map} from '../map';
+import type {IControl} from './control';
+
+/**
+ * The {@link NavigationControl} options object
+ */
+type NavigationControlOptions = {
+    /**
+     * If `true` the compass button is included.
+     */
+    showCompass?: boolean;
+    /**
+     * If `true` the zoom-in and zoom-out buttons are included.
+     */
+    showZoom?: boolean;
+    /**
+     * If `true` the pitch is visualized by rotating X-axis of compass.
+     */
+    visualizePitch?: boolean;
+};
+
+const defaultOptions: NavigationControlOptions = {
+    showCompass: true,
+    showZoom: true,
+    visualizePitch: false
+};
+
+/**
+ * A `NavigationControl` control contains zoom buttons and a compass.
+ *
+ * @group Markers and Controls
+ *
+ * @example
+ * ```ts
+ * let nav = new NavigationControl();
+ * map.addControl(nav, 'top-left');
+ * ```
+ * @see [Display map navigation controls](https://maplibre.org/maplibre-gl-js/docs/examples/navigation/)
+ */
+export class NavigationControl implements IControl {
+    _map: Map;
+    options: NavigationControlOptions;
+    _container: HTMLElement;
+    _zoomInButton: HTMLButtonElement;
+    _zoomOutButton: HTMLButtonElement;
+    _compass: HTMLButtonElement;
+    _compassIcon: HTMLElement;
+    _handler: MouseRotateWrapper;
+
+    /**
+     * @param options - the control's options
+     */
+    constructor(options?: NavigationControlOptions) {
+        this.options = extend({}, defaultOptions, options);
+
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-group');
+        this._container.addEventListener('contextmenu', (e) => e.preventDefault());
+
+        if (this.options.showZoom) {
+            this._zoomInButton = this._createButton('maplibregl-ctrl-zoom-in', (e) => this._map.zoomIn({}, {originalEvent: e}));
+            DOM.create('span', 'maplibregl-ctrl-icon', this._zoomInButton).setAttribute('aria-hidden', 'true');
+            this._zoomOutButton = this._createButton('maplibregl-ctrl-zoom-out', (e) => this._map.zoomOut({}, {originalEvent: e}));
+            DOM.create('span', 'maplibregl-ctrl-icon', this._zoomOutButton).setAttribute('aria-hidden', 'true');
+        }
+        if (this.options.showCompass) {
+            this._compass = this._createButton('maplibregl-ctrl-compass', (e) => {
+                if (this.options.visualizePitch) {
+                    this._map.resetNorthPitch({}, {originalEvent: e});
+                } else {
+                    this._map.resetNorth({}, {originalEvent: e});
+                }
+            });
+            this._compassIcon = DOM.create('span', 'maplibregl-ctrl-icon', this._compass);
+            this._compassIcon.setAttribute('aria-hidden', 'true');
+        }
+    }
+
+    _updateZoomButtons = () => {
+        const zoom = this._map.getZoom();
+        const isMax = zoom === this._map.getMaxZoom();
+        const isMin = zoom === this._map.getMinZoom();
+        this._zoomInButton.disabled = isMax;
+        this._zoomOutButton.disabled = isMin;
+        this._zoomInButton.setAttribute('aria-disabled', isMax.toString());
+        this._zoomOutButton.setAttribute('aria-disabled', isMin.toString());
+    };
+
+    _rotateCompassArrow = () => {
+        const rotate = this.options.visualizePitch ?
+            `scale(${1 / Math.pow(Math.cos(this._map.transform.pitch * (Math.PI / 180)), 0.5)}) rotateX(${this._map.transform.pitch}deg) rotateZ(${this._map.transform.angle * (180 / Math.PI)}deg)` :
+            `rotate(${this._map.transform.angle * (180 / Math.PI)}deg)`;
+
+        this._compassIcon.style.transform = rotate;
+    };
+
+    /** {@inheritDoc IControl.onAdd} */
+    onAdd(map: Map) {
+        this._map = map;
+        if (this.options.showZoom) {
+            this._setButtonTitle(this._zoomInButton, 'ZoomIn');
+            this._setButtonTitle(this._zoomOutButton, 'ZoomOut');
+            this._map.on('zoom', this._updateZoomButtons);
+            this._updateZoomButtons();
+        }
+        if (this.options.showCompass) {
+            this._setButtonTitle(this._compass, 'ResetBearing');
+            if (this.options.visualizePitch) {
+                this._map.on('pitch', this._rotateCompassArrow);
+            }
+            this._map.on('rotate', this._rotateCompassArrow);
+            this._rotateCompassArrow();
+            this._handler = new MouseRotateWrapper(this._map, this._compass, this.options.visualizePitch);
+        }
+        return this._container;
+    }
+
+    /** {@inheritDoc IControl.onRemove} */
+    onRemove() {
+        DOM.remove(this._container);
+        if (this.options.showZoom) {
+            this._map.off('zoom', this._updateZoomButtons);
+        }
+        if (this.options.showCompass) {
+            if (this.options.visualizePitch) {
+                this._map.off('pitch', this._rotateCompassArrow);
+            }
+            this._map.off('rotate', this._rotateCompassArrow);
+            this._handler.off();
+            delete this._handler;
+        }
+
+        delete this._map;
+    }
+
+    _createButton(className: string, fn: (e?: any) => unknown) {
+        const a = DOM.create('button', className, this._container) as HTMLButtonElement;
+        a.type = 'button';
+        a.addEventListener('click', fn);
+        return a;
+    }
+
+    _setButtonTitle = (button: HTMLButtonElement, title: 'ZoomIn' | 'ZoomOut' | 'ResetBearing') => {
+        const str = this._map._getUIString(`NavigationControl.${title}`);
+        button.title = str;
+        button.setAttribute('aria-label', str);
+    };
+}
+
+class MouseRotateWrapper {
+
+    map: Map;
+    _clickTolerance: number;
+    element: HTMLElement;
+    // Rotation and pitch handlers are separated due to different _clickTolerance values
+    mouseRotate: MouseRotateHandler;
+    touchRotate: OneFingerTouchRotateHandler;
+    mousePitch: MousePitchHandler;
+    touchPitch: OneFingerTouchPitchHandler;
+    _startPos: Point;
+    _lastPos: Point;
+
+    constructor(map: Map, element: HTMLElement, pitch: boolean = false) {
+        this._clickTolerance = 10;
+        const mapRotateTolerance = map.dragRotate._mouseRotate.getClickTolerance();
+        const mapPitchTolerance = map.dragRotate._mousePitch.getClickTolerance();
+        this.element = element;
+        this.mouseRotate = generateMouseRotationHandler({clickTolerance: mapRotateTolerance, enable: true});
+        this.touchRotate = generateOneFingerTouchRotationHandler({clickTolerance: mapRotateTolerance, enable: true});
+        this.map = map;
+        if (pitch) {
+            this.mousePitch = generateMousePitchHandler({clickTolerance: mapPitchTolerance, enable: true});
+            this.touchPitch = generateOneFingerTouchPitchHandler({clickTolerance: mapPitchTolerance, enable: true});
+        }
+
+        DOM.addEventListener(element, 'mousedown', this.mousedown);
+        DOM.addEventListener(element, 'touchstart', this.touchstart, {passive: false});
+        DOM.addEventListener(element, 'touchcancel', this.reset);
+    }
+
+    startMouse(e: MouseEvent, point: Point) {
+        this.mouseRotate.dragStart(e, point);
+        if (this.mousePitch) this.mousePitch.dragStart(e, point);
+        DOM.disableDrag();
+    }
+
+    startTouch(e: TouchEvent, point: Point) {
+        this.touchRotate.dragStart(e, point);
+        if (this.touchPitch) this.touchPitch.dragStart(e, point);
+        DOM.disableDrag();
+    }
+
+    moveMouse(e: MouseEvent, point: Point) {
+        const map = this.map;
+        const {bearingDelta} = this.mouseRotate.dragMove(e, point) || {};
+        if (bearingDelta) map.setBearing(map.getBearing() + bearingDelta);
+        if (this.mousePitch) {
+            const {pitchDelta} = this.mousePitch.dragMove(e, point) || {};
+            if (pitchDelta) map.setPitch(map.getPitch() + pitchDelta);
+        }
+    }
+
+    moveTouch(e: TouchEvent, point: Point) {
+        const map = this.map;
+        const {bearingDelta} = this.touchRotate.dragMove(e, point) || {};
+        if (bearingDelta) map.setBearing(map.getBearing() + bearingDelta);
+        if (this.touchPitch) {
+            const {pitchDelta} = this.touchPitch.dragMove(e, point) || {};
+            if (pitchDelta) map.setPitch(map.getPitch() + pitchDelta);
+        }
+    }
+
+    off() {
+        const element = this.element;
+        DOM.removeEventListener(element, 'mousedown', this.mousedown);
+        DOM.removeEventListener(element, 'touchstart', this.touchstart, {passive: false});
+        DOM.removeEventListener(window, 'touchmove', this.touchmove, {passive: false});
+        DOM.removeEventListener(window, 'touchend', this.touchend);
+        DOM.removeEventListener(element, 'touchcancel', this.reset);
+        this.offTemp();
+    }
+
+    offTemp() {
+        DOM.enableDrag();
+        DOM.removeEventListener(window, 'mousemove', this.mousemove);
+        DOM.removeEventListener(window, 'mouseup', this.mouseup);
+        DOM.removeEventListener(window, 'touchmove', this.touchmove, {passive: false});
+        DOM.removeEventListener(window, 'touchend', this.touchend);
+    }
+
+    mousedown = (e: MouseEvent) => {
+        this.startMouse(extend({}, e, {ctrlKey: true, preventDefault: () => e.preventDefault()}), DOM.mousePos(this.element, e));
+        DOM.addEventListener(window, 'mousemove', this.mousemove);
+        DOM.addEventListener(window, 'mouseup', this.mouseup);
+    };
+
+    mousemove = (e: MouseEvent) => {
+        this.moveMouse(e, DOM.mousePos(this.element, e));
+    };
+
+    mouseup = (e: MouseEvent) => {
+        this.mouseRotate.dragEnd(e);
+        if (this.mousePitch) this.mousePitch.dragEnd(e);
+        this.offTemp();
+    };
+
+    touchstart = (e: TouchEvent) => {
+        if (e.targetTouches.length !== 1) {
+            this.reset();
+        } else {
+            this._startPos = this._lastPos = DOM.touchPos(this.element, e.targetTouches)[0];
+            this.startTouch(e, this._startPos);
+            DOM.addEventListener(window, 'touchmove', this.touchmove, {passive: false});
+            DOM.addEventListener(window, 'touchend', this.touchend);
+        }
+    };
+
+    touchmove = (e: TouchEvent) => {
+        if (e.targetTouches.length !== 1) {
+            this.reset();
+        } else {
+            this._lastPos = DOM.touchPos(this.element, e.targetTouches)[0];
+            this.moveTouch(e, this._lastPos);
+        }
+    };
+
+    touchend = (e: TouchEvent) => {
+        if (e.targetTouches.length === 0 &&
+            this._startPos &&
+            this._lastPos &&
+            this._startPos.dist(this._lastPos) < this._clickTolerance) {
+            this.element.click();
+        }
+        delete this._startPos;
+        delete this._lastPos;
+        this.offTemp();
+    };
+
+    reset = () => {
+        this.mouseRotate.reset();
+        if (this.mousePitch) this.mousePitch.reset();
+        this.touchRotate.reset();
+        if (this.touchPitch) this.touchPitch.reset();
+        delete this._startPos;
+        delete this._lastPos;
+        this.offTemp();
+    };
+}

package/src/ui/control/scale_control.test.ts

@@ -0,0 +1,52 @@
+import {createMap, beforeMapTest} from '../../util/test/util';
+import {ScaleControl} from './scale_control';
+
+beforeEach(() => {
+    beforeMapTest();
+});
+
+describe('ScaleControl', () => {
+    test('appears in bottom-left by default', () => {
+        const map = createMap(undefined, undefined);
+        map.addControl(new ScaleControl(undefined));
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale')
+        ).toHaveLength(1);
+    });
+
+    test('appears in the position specified by the position option', () => {
+        const map = createMap(undefined, undefined);
+        map.addControl(new ScaleControl(undefined), 'top-left');
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-left .maplibregl-ctrl-scale')
+        ).toHaveLength(1);
+    });
+
+    test('should change unit of distance after calling setUnit', () => {
+        const map = createMap(undefined, undefined);
+        const scale = new ScaleControl(undefined);
+        const selector = '.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale';
+        map.addControl(scale);
+
+        let contents = map.getContainer().querySelector(selector).innerHTML;
+        expect(contents).toMatch(/km/);
+
+        scale.setUnit('imperial');
+        contents = map.getContainer().querySelector(selector).innerHTML;
+        expect(contents).toMatch(/mi/);
+    });
+
+    test('should respect the maxWidth regardless of the unit and actual scale', () => {
+        const map = createMap(undefined, undefined);
+        const maxWidth = 100;
+        const scale = new ScaleControl({maxWidth, unit: 'nautical'});
+        const selector = '.maplibregl-ctrl-bottom-left .maplibregl-ctrl-scale';
+        map.addControl(scale);
+        map.setZoom(12.5);
+
+        const el = map.getContainer().querySelector(selector) as HTMLElement;
+        expect(parseFloat(el.style.width) <= maxWidth).toBeTruthy();
+    });
+});

package/src/ui/control/scale_control.ts

@@ -0,0 +1,152 @@
+import {DOM} from '../../util/dom';
+
+import type {Map} from '../map';
+import type {ControlPosition, IControl} from './control';
+
+/**
+ * The unit type for length to use for the {@link ScaleControl}
+ */
+export type Unit = 'imperial' | 'metric' | 'nautical';
+
+/**
+ * The {@link ScaleControl} options object
+ */
+type ScaleControlOptions = {
+    /**
+     * The maximum length of the scale control in pixels.
+     * @defaultValue 100
+     */
+    maxWidth?: number;
+    /**
+     * Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+     * @defaultValue 'metric'
+     */
+    unit?: Unit;
+};
+
+const defaultOptions: ScaleControlOptions = {
+    maxWidth: 100,
+    unit: 'metric'
+};
+
+/**
+ * A `ScaleControl` control displays the ratio of a distance on the map to the corresponding distance on the ground.
+ *
+ * @group Markers and Controls
+ *
+ * @example
+ * ```ts
+ * let scale = new ScaleControl({
+ *     maxWidth: 80,
+ *     unit: 'imperial'
+ * });
+ * map.addControl(scale);
+ *
+ * scale.setUnit('metric');
+ * ```
+ */
+export class ScaleControl implements IControl {
+    _map: Map;
+    _container: HTMLElement;
+    options: ScaleControlOptions;
+
+    /**
+     * @param options - the control's options
+     */
+    constructor(options?: ScaleControlOptions) {
+        this.options = {...defaultOptions, ...options};
+    }
+
+    getDefaultPosition(): ControlPosition {
+        return 'bottom-left';
+    }
+
+    _onMove = () => {
+        updateScale(this._map, this._container, this.options);
+    };
+
+    /** {@inheritDoc IControl.onAdd} */
+    onAdd(map: Map) {
+        this._map = map;
+        this._container = DOM.create('div', 'maplibregl-ctrl maplibregl-ctrl-scale', map.getContainer());
+
+        this._map.on('move', this._onMove);
+        this._onMove();
+
+        return this._container;
+    }
+
+    /** {@inheritDoc IControl.onRemove} */
+    onRemove() {
+        DOM.remove(this._container);
+        this._map.off('move', this._onMove);
+        this._map = undefined;
+    }
+
+    /**
+     * Set the scale's unit of the distance
+     *
+     * @param unit - Unit of the distance (`'imperial'`, `'metric'` or `'nautical'`).
+     */
+    setUnit = (unit: Unit) => {
+        this.options.unit = unit;
+        updateScale(this._map, this._container, this.options);
+    };
+}
+
+function updateScale(map, container, options) {
+    // A horizontal scale is imagined to be present at center of the map
+    // container with maximum length (Default) as 100px.
+    // Using spherical law of cosines approximation, the real distance is
+    // found between the two coordinates.
+    const maxWidth = options && options.maxWidth || 100;
+
+    const y = map._container.clientHeight / 2;
+    const left = map.unproject([0, y]);
+    const right = map.unproject([maxWidth, y]);
+    const maxMeters = left.distanceTo(right);
+    // The real distance corresponding to 100px scale length is rounded off to
+    // near pretty number and the scale length for the same is found out.
+    // Default unit of the scale is based on User's locale.
+    if (options && options.unit === 'imperial') {
+        const maxFeet = 3.2808 * maxMeters;
+        if (maxFeet > 5280) {
+            const maxMiles = maxFeet / 5280;
+            setScale(container, maxWidth, maxMiles, map._getUIString('ScaleControl.Miles'));
+        } else {
+            setScale(container, maxWidth, maxFeet, map._getUIString('ScaleControl.Feet'));
+        }
+    } else if (options && options.unit === 'nautical') {
+        const maxNauticals = maxMeters / 1852;
+        setScale(container, maxWidth, maxNauticals, map._getUIString('ScaleControl.NauticalMiles'));
+    } else if (maxMeters >= 1000) {
+        setScale(container, maxWidth, maxMeters / 1000, map._getUIString('ScaleControl.Kilometers'));
+    } else {
+        setScale(container, maxWidth, maxMeters, map._getUIString('ScaleControl.Meters'));
+    }
+}
+
+function setScale(container, maxWidth, maxDistance, unit) {
+    const distance = getRoundNum(maxDistance);
+    const ratio = distance / maxDistance;
+    container.style.width = `${maxWidth * ratio}px`;
+    container.innerHTML = `${distance} ${unit}`;
+}
+
+function getDecimalRoundNum(d) {
+    const multiplier = Math.pow(10, Math.ceil(-Math.log(d) / Math.LN10));
+    return Math.round(d * multiplier) / multiplier;
+}
+
+function getRoundNum(num) {
+    const pow10 = Math.pow(10, (`${Math.floor(num)}`).length - 1);
+    let d = num / pow10;
+
+    d = d >= 10 ? 10 :
+        d >= 5 ? 5 :
+            d >= 3 ? 3 :
+                d >= 2 ? 2 :
+                    d >= 1 ? 1 : getDecimalRoundNum(d);
+
+    return pow10 * d;
+}

package/src/ui/control/terrain_control.test.ts

@@ -0,0 +1,58 @@
+import {TerrainControl} from './terrain_control';
+import {createMap as globalCreateMap, beforeMapTest} from '../../util/test/util';
+
+function createMap() {
+
+    return globalCreateMap({
+        attributionControl: false,
+        style: {
+            version: 8,
+            sources: {
+                terrain: {
+                    minzoom: 5,
+                    maxzoom: 12,
+                    attribution: 'MapLibre',
+                    tiles: ['https://example.com/{z}/{x}/{y}.pngraw'],
+                    bounds: [-47, -7, -45, -5]
+                },
+            },
+            layers: [],
+            owner: 'maplibre',
+            id: 'demotiles',
+        },
+        hash: true
+    }, undefined);
+}
+
+let map;
+
+beforeEach(() => {
+    beforeMapTest();
+    map = createMap();
+});
+
+afterEach(() => {
+    map.remove();
+});
+
+describe('TerrainControl', () => {
+    test('appears in top-right by default', () => {
+        map.addControl(new TerrainControl({source: 'terrain'}));
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-right .maplibregl-ctrl-terrain')
+        ).toHaveLength(1);
+    });
+
+    test('appears in the position specified by the position option', () => {
+        map.addControl(new TerrainControl({source: 'terrain'}), 'bottom-right');
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-bottom-right .maplibregl-ctrl-terrain')
+        ).toHaveLength(1);
+
+        expect(
+            map.getContainer().querySelectorAll('.maplibregl-ctrl-top-right .maplibregl-ctrl-terrain')
+        ).toHaveLength(0);
+    });
+});

package/src/ui/control/terrain_control.ts

@@ -0,0 +1,74 @@
+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;
+
+    /**
+     * @param options - the control's options
+     */
+    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');
+        }
+    };
+}

package/src/ui/default_locale.ts

@@ -0,0 +1,25 @@
+export const defaultLocale = {
+    'AttributionControl.ToggleAttribution': 'Toggle attribution',
+    'AttributionControl.MapFeedback': 'Map feedback',
+    'FullscreenControl.Enter': 'Enter fullscreen',
+    'FullscreenControl.Exit': 'Exit fullscreen',
+    'GeolocateControl.FindMyLocation': 'Find my location',
+    'GeolocateControl.LocationNotAvailable': 'Location not available',
+    'LogoControl.Title': 'MapLibre logo',
+    'Map.Title': 'Map',
+    'Marker.Title': 'Map marker',
+    'NavigationControl.ResetBearing': 'Reset bearing to north',
+    'NavigationControl.ZoomIn': 'Zoom in',
+    'NavigationControl.ZoomOut': 'Zoom out',
+    'Popup.Close': 'Close popup',
+    'ScaleControl.Feet': 'ft',
+    'ScaleControl.Meters': 'm',
+    'ScaleControl.Kilometers': 'km',
+    'ScaleControl.Miles': 'mi',
+    'ScaleControl.NauticalMiles': 'nm',
+    'TerrainControl.Enable': 'Enable terrain',
+    'TerrainControl.Disable': 'Disable terrain',
+    'CooperativeGesturesHandler.WindowsHelpText': 'Use Ctrl + scroll to zoom the map',
+    'CooperativeGesturesHandler.MacHelpText': 'Use ⌘ + scroll to zoom the map',
+    'CooperativeGesturesHandler.MobileHelpText': 'Use two fingers to move the map',
+};