Resize/Redraw map on page layout change

[pjmanning]

I have a sidebar that expands / collapses on hover. When I click to go to the page the map draws only on the available canvas space, but then as I hover away from the sidebar the map does not redraw.

It seems the map only resizes on window.resize - how could I resize the map based on the page elements resizing?

App.vue

<script setup>
const sidebarOpen = ref(false)

const storedSidebarExpanded = useStorage('sidebar-expanded', null)
const sidebarExpanded = ref(storedSidebarExpanded.value === null ? false : storedSidebarExpanded.value === 'true')

watch(sidebarExpanded, () => {
  storedSidebarExpanded.value = sidebarExpanded.value
})

const hoverOpen = ref(false)
const expandSidebar = () => {
  if (sidebarExpanded.value === true) return
  sidebarExpanded.value = true
  hoverOpen.value = true
}
const collapseSidebar = () => {
  if (hoverOpen.value === true) {
    sidebarExpanded.value = false
    hoverOpen.value = false
  }
}
</script>

<template>
  <div class="flex h-screen overflow-hidden bg-slate-50 dark:bg-midnight-600 dark:text-white">
    <TheSidebarMobile :sidebar-open="sidebarOpen" @close-sidebar="sidebarOpen = false" />

    <TheSidebar :sidebar-open="sidebarOpen" :sidebar-expanded="sidebarExpanded" @mouseenter="expandSidebar" @mouseleave="collapseSidebar" />

    <!-- Content area -->
    <div class="relative flex flex-1 flex-col overflow-y-auto overflow-x-hidden">
      <TheSearchBar @toggle-sidebar="sidebarOpen = !sidebarOpen" @toggle-sidebar-expansion="sidebarExpanded = !sidebarExpanded" />

      <main class="flex-1">
        <RouterView />
      </main>

      <footer>
        <TheFooter />
      </footer>
    </div>
  </div>
</template>

Map.vue

<script setup>
import { GChart } from 'vue-google-charts'

const myMapsApiKey = 'xxx'
const data = ref([
  ['Region', 'Risk'],
  ['Asia', 400],
  ['North America', 200],
  ['South America', 100],
  ['Europe', 150],
  ['Africa', 100],
  ['Oceania', 100],
])
const options = ref({
  sizeAxis: { minSize: 5, maxSize: 20 },
  width: '100%',
  height: '100%',
  displayMode: 'markers',
  colorAxis: { colors: ['#00853f', '#e31b23'] },
  backgroundColor: '#81d4fa',
  defaultColor: '#f5f5f5',
})
</script>

<template>
  <GChart class="h-full" type="GeoChart" :data="data" :options="options" :settings="{ packages: ['geochart', 'map'], mapsApiKey: myMapsApiKey }" />
</template>

<style scoped></style>

[DanyDes]

I've been working with similar stuff, but with four charts so I found that you can use window.dispatchEvent(new Event('resize')); to trigger the event manually.

Hope it helps.