@scoova/mgl 1.0.0

package/src/ui/hash.test.ts

@@ -0,0 +1,404 @@
+import {Hash} from './hash';
+import {createMap as globalCreateMap, beforeMapTest} from '../util/test/util';
+import type {Map} from './map';
+
+describe('hash', () => {
+    function createHash(name: string = undefined) {
+        const hash = new Hash(name);
+        hash._updateHash = hash._updateHashUnthrottled.bind(hash);
+        return hash;
+    }
+
+    function createMap() {
+        const container = window.document.createElement('div');
+        Object.defineProperty(container, 'clientWidth', {value: 512});
+        Object.defineProperty(container, 'clientHeight', {value: 512});
+        return globalCreateMap({container}, undefined);
+    }
+
+    let map: Map;
+
+    beforeEach(() => {
+        beforeMapTest();
+        map = createMap();
+    });
+
+    afterEach(() => {
+        if (map._removed === false) {
+            map.remove();
+        }
+        window.location.hash = '';
+    });
+
+    test('#addTo', () => {
+        const hash = createHash();
+
+        expect(hash._map).toBeFalsy();
+
+        hash.addTo(map);
+
+        expect(hash._map).toBeTruthy();
+    });
+
+    test('#remove', () => {
+        const hash = createHash()
+            .addTo(map);
+
+        expect(hash._map).toBeTruthy();
+
+        hash.remove();
+
+        expect(hash._map).toBeFalsy();
+    });
+
+    test('#_onHashChange', () => {
+        const hash = createHash()
+            .addTo(map);
+
+        window.location.hash = '#10/3.00/-1.00';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(-1);
+        expect(map.getCenter().lat).toBe(3);
+        expect(map.getZoom()).toBe(10);
+        expect(map.getBearing() === 0 ? 0 : map.getBearing()).toBe(0);
+        expect(map.getPitch()).toBe(0);
+
+        // map is created with `interactive: false`
+        // so explicitly enable rotation for this test
+        map.dragRotate.enable();
+        map.touchZoomRotate.enable();
+
+        window.location.hash = '#5/1.00/0.50/30/60';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(0.5);
+        expect(map.getCenter().lat).toBe(1);
+        expect(map.getZoom()).toBe(5);
+        expect(map.getBearing()).toBe(30);
+        expect(map.getPitch()).toBe(60);
+
+        // disable rotation to test that updating
+        // the hash's bearing won't change the map
+        map.dragRotate.disable();
+        map.touchZoomRotate.disable();
+
+        window.location.hash = '#5/1.00/0.50/-45/60';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(0.5);
+        expect(map.getCenter().lat).toBe(1);
+        expect(map.getZoom()).toBe(5);
+        expect(map.getBearing()).toBe(30);
+        expect(map.getPitch()).toBe(60);
+
+        // test that a hash with no bearing resets
+        // to the previous bearing when rotation is disabled
+        window.location.hash = '#5/1.00/0.50/';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(0.5);
+        expect(map.getCenter().lat).toBe(1);
+        expect(map.getZoom()).toBe(5);
+        expect(map.getBearing()).toBe(30);
+        expect(window.location.hash).toBe('#5/1/0.5/30');
+
+        window.location.hash = '#4/wrongly/formed/hash';
+
+        expect(hash._onHashChange()).toBeFalsy();
+
+        window.location.hash = '#map=10/3.00/-1.00&foo=bar';
+
+        expect(hash._onHashChange()).toBeFalsy();
+    });
+
+    test('#_onHashChange empty', () => {
+        const hash = createHash()
+            .addTo(map);
+
+        window.location.hash = '#10/3.00/-1.00';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(-1);
+        expect(map.getCenter().lat).toBe(3);
+        expect(map.getZoom()).toBe(10);
+        expect(map.getBearing() === 0 ? 0 : map.getBearing()).toBe(0);
+        expect(map.getPitch()).toBe(0);
+
+        window.location.hash = '';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(-1);
+        expect(map.getCenter().lat).toBe(3);
+        expect(map.getZoom()).toBe(10);
+        expect(map.getBearing() === 0 ? 0 : map.getBearing()).toBe(0);
+        expect(map.getPitch()).toBe(0);
+    });
+
+    test('#_onHashChange named', () => {
+        const hash = createHash('map')
+            .addTo(map);
+
+        window.location.hash = '#map=10/3.00/-1.00&foo=bar';
+
+        hash._onHashChange();
+
+        expect(map.getCenter().lng).toBe(-1);
+        expect(map.getCenter().lat).toBe(3);
+        expect(map.getZoom()).toBe(10);
+        expect(map.getBearing() === 0 ? 0 : map.getBearing()).toBe(0);
+        expect(map.getPitch()).toBe(0);
+
+        window.location.hash = '#map&foo=bar';
+
+        expect(hash._onHashChange()).toBeFalsy();
+
+        window.location.hash = '#map=4/5/baz&foo=bar';
+
+        expect(hash._onHashChange()).toBeFalsy();
+
+        window.location.hash = '#5/1.00/0.50/30/60';
+
+        expect(hash._onHashChange()).toBeFalsy();
+    });
+
+    test('#_getCurrentHash', () => {
+        const hash = createHash()
+            .addTo(map);
+
+        window.location.hash = '#10/3.00/-1.00';
+
+        const currentHash = hash._getCurrentHash();
+
+        expect(currentHash[0]).toBe('10');
+        expect(currentHash[1]).toBe('3.00');
+        expect(currentHash[2]).toBe('-1.00');
+    });
+
+    test('#_getCurrentHash named', () => {
+        const hash = createHash('map')
+            .addTo(map);
+
+        window.location.hash = '#map=10/3.00/-1.00&foo=bar';
+
+        let currentHash = hash._getCurrentHash();
+
+        expect(currentHash[0]).toBe('10');
+        expect(currentHash[1]).toBe('3.00');
+        expect(currentHash[2]).toBe('-1.00');
+
+        window.location.hash = '#baz&map=10/3.00/-1.00';
+
+        currentHash = hash._getCurrentHash();
+
+        expect(currentHash[0]).toBe('10');
+        expect(currentHash[1]).toBe('3.00');
+        expect(currentHash[2]).toBe('-1.00');
+    });
+
+    test('#_updateHash', () => {
+        function getHash() {
+            return window.location.hash.split('/');
+        }
+
+        createHash()
+            .addTo(map);
+
+        expect(window.location.hash).toBeFalsy();
+
+        map.setZoom(3);
+        map.setCenter([2.0, 1.0]);
+
+        expect(window.location.hash).toBeTruthy();
+
+        let newHash = getHash();
+
+        expect(newHash).toHaveLength(3);
+        expect(newHash[0]).toBe('#3');
+        expect(newHash[1]).toBe('1');
+        expect(newHash[2]).toBe('2');
+
+        map.setPitch(60);
+
+        newHash = getHash();
+
+        expect(newHash).toHaveLength(5);
+        expect(newHash[0]).toBe('#3');
+        expect(newHash[1]).toBe('1');
+        expect(newHash[2]).toBe('2');
+        expect(newHash[3]).toBe('0');
+        expect(newHash[4]).toBe('60');
+
+        map.setBearing(135);
+
+        newHash = getHash();
+
+        expect(newHash).toHaveLength(5);
+        expect(newHash[0]).toBe('#3');
+        expect(newHash[1]).toBe('1');
+        expect(newHash[2]).toBe('2');
+        expect(newHash[3]).toBe('135');
+        expect(newHash[4]).toBe('60');
+    });
+
+    test('#_updateHash named', () => {
+        createHash('map')
+            .addTo(map);
+
+        expect(window.location.hash).toBeFalsy();
+
+        map.setZoom(3);
+        map.setCenter([1.0, 2.0]);
+
+        expect(window.location.hash).toBeTruthy();
+
+        expect(window.location.hash).toBe('#map=3/2/1');
+
+        map.setPitch(60);
+
+        expect(window.location.hash).toBe('#map=3/2/1/0/60');
+
+        map.setBearing(135);
+
+        expect(window.location.hash).toBe('#map=3/2/1/135/60');
+
+        window.location.hash += '&foo=bar';
+
+        map.setZoom(7);
+
+        expect(window.location.hash).toBe('#map=7/2/1/135/60&foo=bar');
+
+        window.location.hash = '#baz&map=7/2/1/135/60&foo=bar';
+
+        map.setCenter([2.0, 1.0]);
+
+        expect(window.location.hash).toBe('#baz&map=7/1/2/135/60&foo=bar');
+    });
+
+    test('#_removeHash', () => {
+        const hash = createHash()
+            .addTo(map);
+
+        map.setZoom(3);
+        map.setCenter([2.0, 1.0]);
+
+        expect(window.location.hash).toBe('#3/1/2');
+
+        hash._removeHash();
+
+        expect(window.location.hash).toBe('');
+
+        window.location.hash = '#3/1/2&foo=bar';
+
+        hash._removeHash();
+
+        expect(window.location.hash).toBe('#foo=bar');
+    });
+
+    test('#_removeHash named', () => {
+        const hash = createHash('map')
+            .addTo(map);
+
+        map.setZoom(3);
+        map.setCenter([2.0, 1.0]);
+
+        expect(window.location.hash).toBe('#map=3/1/2');
+
+        hash._removeHash();
+
+        expect(window.location.hash).toBe('');
+
+        window.location.hash = '#map=3/1/2&foo=bar';
+
+        hash._removeHash();
+
+        expect(window.location.hash).toBe('#foo=bar');
+
+        window.location.hash = '#baz&map=7/2/1/135/60&foo=bar';
+
+        hash._removeHash();
+
+        expect(window.location.hash).toBe('#baz&foo=bar');
+    });
+
+    test('initialize http://localhost/#', () => {
+        window.location.href = 'http://localhost/#';
+        createHash().addTo(map);
+        map.setZoom(3);
+        expect(window.location.hash).toBe('#3/0/0');
+        expect(window.location.href).toBe('http://localhost/#3/0/0');
+        map.setCenter([2.0, 1.0]);
+        expect(window.location.hash).toBe('#3/1/2');
+        expect(window.location.href).toBe('http://localhost/#3/1/2');
+    });
+
+    test('initialize http://localhost/##', () => {
+        window.location.href = 'http://localhost/##';
+        createHash().addTo(map);
+        map.setZoom(3);
+        expect(window.location.hash).toBe('#3/0/0');
+        expect(window.location.href).toBe('http://localhost/#3/0/0');
+        map.setCenter([2.0, 1.0]);
+        expect(window.location.hash).toBe('#3/1/2');
+        expect(window.location.href).toBe('http://localhost/#3/1/2');
+    });
+
+    test('initialize http://localhost#', () => {
+        window.location.href = 'http://localhost#';
+        createHash().addTo(map);
+        map.setZoom(4);
+        expect(window.location.hash).toBe('#4/0/0');
+        expect(window.location.href).toBe('http://localhost/#4/0/0');
+        map.setCenter([2.0, 1.0]);
+        expect(window.location.hash).toBe('#4/1/2');
+        expect(window.location.href).toBe('http://localhost/#4/1/2');
+    });
+
+    test('initialize http://localhost/', () => {
+        window.location.href = 'http://localhost/';
+        createHash().addTo(map);
+        map.setZoom(5);
+        expect(window.location.hash).toBe('#5/0/0');
+        expect(window.location.href).toBe('http://localhost/#5/0/0');
+        map.setCenter([2.0, 1.0]);
+        expect(window.location.hash).toBe('#5/1/2');
+        expect(window.location.href).toBe('http://localhost/#5/1/2');
+    });
+
+    test('initialize default value for window.location.href', () => {
+        createHash().addTo(map);
+        map.setZoom(5);
+        expect(window.location.hash).toBe('#5/0/0');
+        expect(window.location.href).toBe('http://localhost/#5/0/0');
+        map.setCenter([2.0, 1.0]);
+        expect(window.location.hash).toBe('#5/1/2');
+        expect(window.location.href).toBe('http://localhost/#5/1/2');
+    });
+
+    test('initialize http://localhost', () => {
+        window.location.href = 'http://localhost';
+        createHash().addTo(map);
+        map.setZoom(4);
+        expect(window.location.hash).toBe('#4/0/0');
+        expect(window.location.href).toBe('http://localhost/#4/0/0');
+        map.setCenter([2.0, 1.0]);
+        expect(window.location.hash).toBe('#4/1/2');
+        expect(window.location.href).toBe('http://localhost/#4/1/2');
+    });
+
+    test('map#remove', () => {
+        const container = window.document.createElement('div');
+        Object.defineProperty(container, 'clientWidth', {value: 512});
+        Object.defineProperty(container, 'clientHeight', {value: 512});
+
+        map.remove();
+
+        expect(map).toBeTruthy();
+    });
+});

package/src/ui/hash.ts

@@ -0,0 +1,153 @@
+import {throttle} from '../util/throttle';
+
+import type {Map} from './map';
+
+/**
+ * Adds the map's position to its page's location hash.
+ * Passed as an option to the map object.
+ *
+ * @group Markers and Controls
+ */
+export class Hash {
+    _map: Map;
+    _hashName: string;
+
+    constructor(hashName?: string | null) {
+        this._hashName = hashName && encodeURIComponent(hashName);
+    }
+
+    /**
+     * Map element to listen for coordinate changes
+     *
+     * @param map - The map object
+     */
+    addTo(map: Map) {
+        this._map = map;
+        addEventListener('hashchange', this._onHashChange, false);
+        this._map.on('moveend', this._updateHash);
+        return this;
+    }
+
+    /**
+     * Removes hash
+     */
+    remove() {
+        removeEventListener('hashchange', this._onHashChange, false);
+        this._map.off('moveend', this._updateHash);
+        clearTimeout(this._updateHash());
+        this._removeHash();
+
+        delete this._map;
+        return this;
+    }
+
+    getHashString(mapFeedback?: boolean) {
+        const center = this._map.getCenter(),
+            zoom = Math.round(this._map.getZoom() * 100) / 100,
+            // derived from equation: 512px * 2^z / 360 / 10^d < 0.5px
+            precision = Math.ceil((zoom * Math.LN2 + Math.log(512 / 360 / 0.5)) / Math.LN10),
+            m = Math.pow(10, precision),
+            lng = Math.round(center.lng * m) / m,
+            lat = Math.round(center.lat * m) / m,
+            bearing = this._map.getBearing(),
+            pitch = this._map.getPitch();
+        let hash = '';
+        if (mapFeedback) {
+            // new map feedback site has some constraints that don't allow
+            // us to use the same hash format as we do for the Map hash option.
+            hash += `/${lng}/${lat}/${zoom}`;
+        } else {
+            hash += `${zoom}/${lat}/${lng}`;
+        }
+
+        if (bearing || pitch) hash += (`/${Math.round(bearing * 10) / 10}`);
+        if (pitch) hash += (`/${Math.round(pitch)}`);
+
+        if (this._hashName) {
+            const hashName = this._hashName;
+            let found = false;
+            const parts = window.location.hash.slice(1).split('&').map(part => {
+                const key = part.split('=')[0];
+                if (key === hashName) {
+                    found = true;
+                    return `${key}=${hash}`;
+                }
+                return part;
+            }).filter(a => a);
+            if (!found) {
+                parts.push(`${hashName}=${hash}`);
+            }
+            return `#${parts.join('&')}`;
+        }
+
+        return `#${hash}`;
+    }
+
+    _getCurrentHash = () => {
+        // Get the current hash from location, stripped from its number sign
+        const hash = window.location.hash.replace('#', '');
+        if (this._hashName) {
+            // Split the parameter-styled hash into parts and find the value we need
+            let keyval;
+            hash.split('&').map(
+                part => part.split('=')
+            ).forEach(part => {
+                if (part[0] === this._hashName) {
+                    keyval = part;
+                }
+            });
+            return (keyval ? keyval[1] || '' : '').split('/');
+        }
+        return hash.split('/');
+    };
+
+    _onHashChange = () => {
+        const loc = this._getCurrentHash();
+        if (loc.length >= 3 && !loc.some(v => isNaN(v))) {
+            const bearing = this._map.dragRotate.isEnabled() && this._map.touchZoomRotate.isEnabled() ? +(loc[3] || 0) : this._map.getBearing();
+            this._map.jumpTo({
+                center: [+loc[2], +loc[1]],
+                zoom: +loc[0],
+                bearing,
+                pitch: +(loc[4] || 0)
+            });
+            return true;
+        }
+        return false;
+    };
+
+    _updateHashUnthrottled = () => {
+        // Replace if already present, else append the updated hash string
+        const location = window.location.href.replace(/(#.*)?$/, this.getHashString());
+        window.history.replaceState(window.history.state, null, location);
+    };
+
+    _removeHash = () => {
+        const currentHash = this._getCurrentHash();
+        if (currentHash.length === 0) {
+            return;
+        }
+        const baseHash = currentHash.join('/');
+        let targetHash = baseHash;
+        if (targetHash.split('&').length > 0) {
+            targetHash = targetHash.split('&')[0]; // #3/1/2&foo=bar -> #3/1/2
+        }
+        if (this._hashName) {
+            targetHash = `${this._hashName}=${baseHash}`;
+        }
+        let replaceString = window.location.hash.replace(targetHash, '');
+        if (replaceString.startsWith('#&')) {
+            replaceString = replaceString.slice(0, 1) + replaceString.slice(2);
+        } else if (replaceString === '#') {
+            replaceString = '';
+        }
+        let location = window.location.href.replace(/(#.+)?$/, replaceString);
+        location = location.replace('&&', '&');
+        window.history.replaceState(window.history.state, null, location);
+    };
+
+    /**
+     * Mobile Safari doesn't allow updating the hash more than 100 times per 30 seconds.
+     */
+    _updateHash: () => ReturnType<typeof setTimeout> = throttle(this._updateHashUnthrottled, 30 * 1000 / 100);
+}