From 467f940d32d6cce01fdbba407d5ab36b4c6d075a Mon Sep 17 00:00:00 2001 From: Frank Elsinga Date: Sun, 4 Aug 2024 00:30:33 +0200 Subject: [PATCH] made sure that map-controls are lazy-loaded instead of potentially blocking rendering --- .../app/components/DetailsInteractiveMap.vue | 107 ++++++++--------- webclient/app/components/IndoorMap.vue | 109 +++++++++--------- 2 files changed, 109 insertions(+), 107 deletions(-) diff --git a/webclient/app/components/DetailsInteractiveMap.vue b/webclient/app/components/DetailsInteractiveMap.vue index 0896f17af..9bc18178d 100644 --- a/webclient/app/components/DetailsInteractiveMap.vue +++ b/webclient/app/components/DetailsInteractiveMap.vue @@ -99,59 +99,6 @@ function initMap(containerId: string) { attributionControl: false, }); - map.addControl(new NavigationControl({}), "top-left"); - - // (Browser) Fullscreen is enabled only on mobile, on desktop the map - // is maximized instead. This is determined once to select the correct - // container to maximize, and then remains unchanged even if the browser - // is resized (not relevant for users but for developers). - const isMobile = window.matchMedia && window.matchMedia("only screen and (max-width: 480px)").matches; - const fullscreenContainer = isMobile - ? document.getElementById("interactive-map") - : document.getElementById("interactive-map-container"); - const fullscreenCtl = new FullscreenControl({ - container: fullscreenContainer as HTMLElement, - }); - // "Backup" the maplibregl default fullscreen handler - const defaultOnClickFullscreen = fullscreenCtl._onClickFullscreen; - fullscreenCtl._onClickFullscreen = () => { - if (isMobile) defaultOnClickFullscreen(); - else { - if (fullscreenCtl._container.classList.contains("maximize")) { - fullscreenCtl._container.classList.remove("maximize"); - document.body.classList.remove("overflow-y-hidden"); - fullscreenCtl._fullscreenButton.classList.remove("maplibregl-ctrl-shrink"); - } else { - fullscreenCtl._container.classList.add("maximize"); - fullscreenCtl._fullscreenButton.classList.add("maplibregl-ctrl-shrink"); - document.body.classList.add("overflow-y-hidden"); - window.scrollTo({ top: 0, behavior: "auto" }); - } - - fullscreenCtl._fullscreen = fullscreenCtl._container.classList.contains("maximize"); - fullscreenCtl._fullscreenButton.ariaLabel = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; - fullscreenCtl._fullscreenButton.title = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; - fullscreenCtl._map.resize(); - } - }; - // There is a bug that the map doesn't update to the new size - // when changing between fullscreen in the mobile version. - if (isMobile && ResizeObserver) { - const fullscreenObserver = new ResizeObserver(() => { - fullscreenCtl._map.resize(); - }); - fullscreenObserver.observe(fullscreenCtl._container); - } - map.addControl(fullscreenCtl); - - const location = new GeolocateControl({ - positionOptions: { - enableHighAccuracy: true, - }, - trackUserLocation: true, - }); - map.addControl(location); - // Each source / style change causes the map to get // into "loading" state, so map.loaded() is not reliable // enough to know whether just the initial loading has @@ -159,6 +106,60 @@ function initMap(containerId: string) { map.on("load", () => { initialLoaded.value = true; + // controls + map.addControl(new NavigationControl({}), "top-left"); + + // (Browser) Fullscreen is enabled only on mobile, on desktop the map + // is maximized instead. This is determined once to select the correct + // container to maximize, and then remains unchanged even if the browser + // is resized (not relevant for users but for developers). + const isMobile = window.matchMedia && window.matchMedia("only screen and (max-width: 480px)").matches; + const fullscreenContainer = isMobile + ? document.getElementById("interactive-map") + : document.getElementById("interactive-map-container"); + const fullscreenCtl = new FullscreenControl({ + container: fullscreenContainer as HTMLElement, + }); + // "Backup" the maplibregl default fullscreen handler + const defaultOnClickFullscreen = fullscreenCtl._onClickFullscreen; + fullscreenCtl._onClickFullscreen = () => { + if (isMobile) defaultOnClickFullscreen(); + else { + if (fullscreenCtl._container.classList.contains("maximize")) { + fullscreenCtl._container.classList.remove("maximize"); + document.body.classList.remove("overflow-y-hidden"); + fullscreenCtl._fullscreenButton.classList.remove("maplibregl-ctrl-shrink"); + } else { + fullscreenCtl._container.classList.add("maximize"); + fullscreenCtl._fullscreenButton.classList.add("maplibregl-ctrl-shrink"); + document.body.classList.add("overflow-y-hidden"); + window.scrollTo({ top: 0, behavior: "auto" }); + } + + fullscreenCtl._fullscreen = fullscreenCtl._container.classList.contains("maximize"); + fullscreenCtl._fullscreenButton.ariaLabel = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; + fullscreenCtl._fullscreenButton.title = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; + fullscreenCtl._map.resize(); + } + }; + // There is a bug that the map doesn't update to the new size + // when changing between fullscreen in the mobile version. + if (isMobile && ResizeObserver) { + const fullscreenObserver = new ResizeObserver(() => { + fullscreenCtl._map.resize(); + }); + fullscreenObserver.observe(fullscreenCtl._container); + } + map.addControl(fullscreenCtl); + + const location = new GeolocateControl({ + positionOptions: { + enableHighAccuracy: true, + }, + trackUserLocation: true, + }); + map.addControl(location); + // The attributionControl is automatically open, which takes up a lot of // space on the small map display that we have. That's why we add it ourselves // and then toggle it. diff --git a/webclient/app/components/IndoorMap.vue b/webclient/app/components/IndoorMap.vue index da405281c..2261bd3d4 100644 --- a/webclient/app/components/IndoorMap.vue +++ b/webclient/app/components/IndoorMap.vue @@ -96,63 +96,10 @@ async function initMap(containerId: string) { center: [11.5748, 48.14], // Approx Munich zoom: 11, // Zoomed out so that the whole city is visible - // done manually, to have more controll over when it is extended + // done manually, to have more control over when it is extended attributionControl: false, }) as MaplibreMapWithIndoor; - map.addControl(new NavigationControl({}), "top-left"); - - // (Browser) Fullscreen is enabled only on mobile, on desktop the map - // is maximized instead. This is determined once to select the correct - // container to maximize, and then remains unchanged even if the browser - // is resized (not relevant for users but for developers). - const isMobile = window.matchMedia && window.matchMedia("only screen and (max-width: 480px)").matches; - const fullscreenContainer = isMobile - ? document.getElementById("interactive-map") - : document.getElementById("interactive-map-container"); - const fullscreenCtl = new FullscreenControl({ - container: fullscreenContainer as HTMLElement, - }); - // "Backup" the maplibregl default fullscreen handler - const defaultOnClickFullscreen = fullscreenCtl._onClickFullscreen; - fullscreenCtl._onClickFullscreen = () => { - if (isMobile) defaultOnClickFullscreen(); - else { - if (fullscreenCtl._container.classList.contains("maximize")) { - fullscreenCtl._container.classList.remove("maximize"); - document.body.classList.remove("overflow-y-hidden"); - fullscreenCtl._fullscreenButton.classList.remove("maplibregl-ctrl-shrink"); - } else { - fullscreenCtl._container.classList.add("maximize"); - fullscreenCtl._fullscreenButton.classList.add("maplibregl-ctrl-shrink"); - document.body.classList.add("overflow-y-hidden"); - window.scrollTo({ top: 0, behavior: "auto" }); - } - - fullscreenCtl._fullscreen = fullscreenCtl._container.classList.contains("maximize"); - fullscreenCtl._fullscreenButton.ariaLabel = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; - fullscreenCtl._fullscreenButton.title = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; - fullscreenCtl._map.resize(); - } - }; - // There is a bug that the map doesn't update to the new size - // when changing between fullscreen in the mobile version. - if (isMobile && ResizeObserver) { - const fullscreenObserver = new ResizeObserver(() => { - fullscreenCtl._map.resize(); - }); - fullscreenObserver.observe(fullscreenCtl._container); - } - map.addControl(fullscreenCtl); - - const location = new GeolocateControl({ - positionOptions: { - enableHighAccuracy: true, - }, - trackUserLocation: true, - }); - map.addControl(location); - // Each source / style change causes the map to get // into "loading" state, so map.loaded() is not reliable // enough to know whether just the initial loading has @@ -160,6 +107,60 @@ async function initMap(containerId: string) { map.on("load", () => { initialLoaded.value = true; + // add controlls + map.addControl(new NavigationControl({}), "top-left"); + + // (Browser) Fullscreen is enabled only on mobile, on desktop the map + // is maximized instead. This is determined once to select the correct + // container to maximize, and then remains unchanged even if the browser + // is resized (not relevant for users but for developers). + const isMobile = window.matchMedia && window.matchMedia("only screen and (max-width: 480px)").matches; + const fullscreenContainer = isMobile + ? document.getElementById("interactive-map") + : document.getElementById("interactive-map-container"); + const fullscreenCtl = new FullscreenControl({ + container: fullscreenContainer as HTMLElement, + }); + // "Backup" the maplibregl default fullscreen handler + const defaultOnClickFullscreen = fullscreenCtl._onClickFullscreen; + fullscreenCtl._onClickFullscreen = () => { + if (isMobile) defaultOnClickFullscreen(); + else { + if (fullscreenCtl._container.classList.contains("maximize")) { + fullscreenCtl._container.classList.remove("maximize"); + document.body.classList.remove("overflow-y-hidden"); + fullscreenCtl._fullscreenButton.classList.remove("maplibregl-ctrl-shrink"); + } else { + fullscreenCtl._container.classList.add("maximize"); + fullscreenCtl._fullscreenButton.classList.add("maplibregl-ctrl-shrink"); + document.body.classList.add("overflow-y-hidden"); + window.scrollTo({ top: 0, behavior: "auto" }); + } + + fullscreenCtl._fullscreen = fullscreenCtl._container.classList.contains("maximize"); + fullscreenCtl._fullscreenButton.ariaLabel = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; + fullscreenCtl._fullscreenButton.title = fullscreenCtl._fullscreen ? "Exit fullscreen" : "Enter fullscreen"; + fullscreenCtl._map.resize(); + } + }; + // There is a bug that the map doesn't update to the new size + // when changing between fullscreen in the mobile version. + if (isMobile && ResizeObserver) { + const fullscreenObserver = new ResizeObserver(() => { + fullscreenCtl._map.resize(); + }); + fullscreenObserver.observe(fullscreenCtl._container); + } + map.addControl(fullscreenCtl); + + const location = new GeolocateControl({ + positionOptions: { + enableHighAccuracy: true, + }, + trackUserLocation: true, + }); + map.addControl(location); + // The attributionControl is automatically open, which takes up a lot of // space on the small map display that we have. That's why we add it ourselves // and then toggle it.