ensures map resize gets triggered on fullscreen toggle

razorness · Aug 19, 2023 · 78171ce · 78171ce
1 parent f668723
commit 78171ce
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "vue-maplibre-gl",
-	"version": "3.0.0",
+	"version": "3.0.1",
 	"description": "Vue 3 plugin for maplibre-gl",
 	"keywords": [
 		"vue",

diff --git a/src/lib/components/controls/fullscreen.control.ts b/src/lib/components/controls/fullscreen.control.ts
@@ -1,4 +1,4 @@
-import { defineComponent, inject, onBeforeUnmount, PropType, toRef } from 'vue';
+import { defineComponent, inject, nextTick, onBeforeUnmount, PropType, toRef } from 'vue';
 import { Position, PositionProp, PositionValues } from '@/lib/components/controls/position.enum';
 import { isInitializedSymbol, mapSymbol } from '@/lib/types';
 import { FullscreenControl } from 'maplibre-gl';
@@ -25,8 +25,20 @@ export default /*#__PURE__*/ defineComponent({
 			  isInitialized = inject(isInitializedSymbol)!,
 			  control       = new FullscreenControl({ container: props.container || undefined });
 
+		// fire map.resize just a 2nd time
+		function triggerResize() {
+			nextTick(() => map.value?.resize());
+		}
+
+		control.on('fullscreenstart', triggerResize);
+		control.on('fullscreenend', triggerResize);
+
 		usePositionWatcher(toRef(props, 'position'), map, control);
-		onBeforeUnmount(() => isInitialized.value && map.value?.removeControl(control));
+		onBeforeUnmount(() => {
+			control.off('fullscreenstart', triggerResize);
+			control.off('fullscreenend', triggerResize);
+			isInitialized.value && map.value?.removeControl(control);
+		});
 
 	},
 	render() {