diff --git a/packages/ripple-ui-maps/src/components/map/RplMap.vue b/packages/ripple-ui-maps/src/components/map/RplMap.vue
index 1a99e44304..30d566948f 100644
--- a/packages/ripple-ui-maps/src/components/map/RplMap.vue
+++ b/packages/ripple-ui-maps/src/components/map/RplMap.vue
@@ -2,6 +2,7 @@
import { RplIcon } from '@dpc-sdp/ripple-ui-core/vue'
import type { IRplMapFeature } from './../../types'
import { onMounted, onUnmounted, ref, inject, computed, watch } from 'vue'
+import { useFullscreen } from '@vueuse/core'
import { Map } from 'ol'
import { Point } from 'ol/geom'
import Icon from 'ol/style/Icon'
@@ -78,13 +79,10 @@ const center = computed(() => {
}
})
-const {
- onHomeClick,
- onZoomInClick,
- onZoomOutClick,
- onFullScreenClick,
- isFullScreenRef
-} = useMapControls(mapRef, center, props.initialZoom)
+const { isFullscreen } = useFullscreen()
+
+const { onHomeClick, onZoomInClick, onZoomOutClick, onFullScreenClick } =
+ useMapControls(mapRef, center, props.initialZoom)
const mapFeatures = computed(() => {
if (Array.isArray(props.features)) {
@@ -295,7 +293,7 @@ const noResultsRef = ref(null)
diff --git a/packages/ripple-ui-maps/src/composables/useMapControls.ts b/packages/ripple-ui-maps/src/composables/useMapControls.ts
index dc2d9157a3..138b5a3c63 100644
--- a/packages/ripple-ui-maps/src/composables/useMapControls.ts
+++ b/packages/ripple-ui-maps/src/composables/useMapControls.ts
@@ -1,9 +1,7 @@
import { easeOut } from 'ol/easing'
import { centerMap } from './../components/map/utils.ts'
-import { ref } from 'vue'
-export default (mapRef, center, initialZoom) => {
- const isFullScreenRef = ref(false)
+export default (mapRef, center, initialZoom) => {
/**
* @param {number} delta Zoom delta.
* @private
@@ -98,9 +96,9 @@ export default (mapRef, center, initialZoom) => {
if (!isFullScreenSupported(doc)) {
return
}
+
if (isFullScreen(doc)) {
exitFullScreen(doc)
- isFullScreenRef.value = false
} else {
const element = map.getTargetElement()
if (withKeys) {
@@ -108,7 +106,6 @@ export default (mapRef, center, initialZoom) => {
} else {
requestFullScreen(element)
}
- isFullScreenRef.value = true
}
}
@@ -129,7 +126,6 @@ export default (mapRef, center, initialZoom) => {
onHomeClick,
onZoomInClick,
onZoomOutClick,
- onFullScreenClick,
- isFullScreenRef
+ onFullScreenClick
}
}