diff --git a/webmap/src/Pl3xMap.ts b/webmap/src/Pl3xMap.ts index 76253c292..47ec38a24 100644 --- 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 index 191f61e7d..9aba483a6 100644 --- 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("Pl3xMap © 2020-2023"); 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(); + } }