#4375 remove hash string when hash remove

CHANGELOG.md

@@ -8,6 +8,7 @@
 ### 🐞 Bug fixes
 
 - Fix lag on fast map zoom ([#4366](https://github.com/maplibre/maplibre-gl-js/pull/4366))
+- Fix remove hash string when map is removed ([#4427](https://github.com/maplibre/maplibre-gl-js/pull/4427))
 - _...Add new stuff here..._
 
 ## 4.5.0

src/ui/hash.test.ts

@@ -281,6 +281,52 @@ describe('hash', () => {
         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('map#remove', () => {
         const container = window.document.createElement('div');
         Object.defineProperty(container, 'clientWidth', {value: 512});

src/ui/hash.ts

@@ -35,6 +35,7 @@ export class Hash {
         removeEventListener('hashchange', this._onHashChange, false);
         this._map.off('moveend', this._updateHash);
         clearTimeout(this._updateHash());
+        this._removeHash();
 
         delete this._map;
         return this;
@@ -118,13 +119,31 @@ export class Hash {
     _updateHashUnthrottled = () => {
         // Replace if already present, else append the updated hash string
         const location = window.location.href.replace(/(#.+)?$/, this.getHashString());
-        try {
-            window.history.replaceState(window.history.state, null, location);
-        } catch (SecurityError) {
-            // IE11 does not allow this if the page is within an iframe created
-            // with iframe.contentWindow.document.write(...).
-            // https://github.com/mapbox/mapbox-gl-js/issues/7410
+        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);
     };
 
     /**