fix map size on load

fixes android browser url bar pushing page off-screen https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
granny · Dec 25, 2024 · b615d44 · b615d44
1 parent 85965e7
commit b615d44
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/webmap/src/Pl3xMap.ts b/webmap/src/Pl3xMap.ts
@@ -43,6 +43,13 @@ export class Pl3xMap {
             }
         });
 
+        // update map size when window size, scale, or orientation changes
+        'orientationchange resize'.split(' ').forEach((event: string): void => {
+            window.addEventListener(event, (): void => {
+                this._map.updateSizeToWindow();
+            }, {passive: true});
+        });
+
         this._controlManager = new ControlManager(this);
         this._playerManager = new PlayerManager(this);
         this._worldManager = new WorldManager(this);

diff --git a/webmap/src/map/Pl3xMapLeafletMap.ts b/webmap/src/map/Pl3xMapLeafletMap.ts
@@ -39,6 +39,15 @@ export default class Pl3xMapLeafletMap extends L.Map {
         this.attributionControl.setPrefix("<a href='https://modrinth.com/plugin/pl3xmap/'>Pl3xMap &copy; 2020-2023</a>");
 
         this._pl3xmap = pl3xmap;
+
+        // stuff to do after the map fully loads
+        this.on('load', (): void => this.onLoad());
+    }
+
+    onLoad(): void {
+        // fix map size on load - fixes android browser url bar pushing page off-screen
+        // https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
+        this.updateSizeToWindow();
     }
 
     // https://stackoverflow.com/a/60391674/3530727
@@ -72,4 +81,11 @@ export default class Pl3xMapLeafletMap extends L.Map {
     public getCurrentZoom(): number {
         return this.getMaxZoomOut() - this.getZoom();
     }
+
+    public updateSizeToWindow(): void {
+        const style: CSSStyleDeclaration = this.getContainer().style;
+        style.width = `${window.innerWidth}px`;
+        style.height = `${window.innerHeight}px`;
+        this.invalidateSize();
+    }
 }