Skip to content

Commit

Permalink
made sure that map-controls are lazy-loaded instead of potentially bl…
Browse files Browse the repository at this point in the history 
…ocking rendering
  • Loading branch information
@CommanderStorm
CommanderStorm committed Aug 3, 2024
1 parent 3785923 commit 467f940
Show file tree
Hide file tree
Showing 2 changed files with 109 additions and 107 deletions.
107 changes: 54 additions & 53 deletions webclient/app/components/DetailsInteractiveMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,66 +99,67 @@ 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
// succeeded.
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.
Expand Down
109 changes: 55 additions & 54 deletions webclient/app/components/IndoorMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,70 +96,71 @@ 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
// succeeded.
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.
Expand Down

0 comments on commit 467f940

Please sign in to comment.