fix: cleanup after a map has been removed

examples/snowbox/index.js

@@ -92,7 +92,7 @@
 		colorScheme,
 		startCenter: [565874, 5934140],
 		layers: [
 			// TODO: Add internalization to snowbox
 			{
 				id: basemapId,
 				visibility: true,
@@ -204,6 +204,7 @@
 	services
 )
 
+const additionalMaps = []
 document.getElementById('secondMap').addEventListener('click', async () => {
 	const secondMap = createMapElement(
 		{
@@ -227,9 +228,14 @@
 			layoutTag: 'TOP_RIGHT',
 		})
 	)
+	additionalMaps.push(secondMap)
 })
 document.getElementById('secondMapClean').addEventListener('click', () => {
-	document.getElementById('secondMapContainer').innerText = ''
+	additionalMaps.forEach((map, i) => {
+		map.remove()
+		delete additionalMaps[i]
+	})
+	additionalMaps.length = 0
 })
 
 addPlugin(
@@ -336,7 +342,7 @@
 			},
 		],
 		menus: [
 			// TODO: Delete the mock plugins including the components once the correct plugins have been implemented
 			[
 				{
 					plugin: pluginFullscreen({}),

src/core/components/PolarContainer.ce.vue

@@ -22,8 +22,9 @@
 <script setup lang="ts">
 import { toMerged } from 'es-toolkit'
 import i18next from 'i18next'
-import { storeToRefs } from 'pinia'
+import { disposePinia, getActivePinia, type Pinia, storeToRefs } from 'pinia'
 import {
+	getCurrentInstance,
 	onBeforeUnmount,
 	onMounted,
 	ref,
@@ -135,7 +136,7 @@
 	resizeObserver.observe(polarWrapper.value as Element)
 	updateClientDimensions()
 
 	// FIXME: Improve types for lightElement
 	// This is necessary for making `getStore` work
 	;(mainStore.lightElement as { store?: unknown }).store = useCoreStore()
 })
@@ -146,7 +147,21 @@
 		resizeObserver = null
 	}
 
+	const mapEl = mainStore.map.getTargetElement()
+	mainStore.map.dispose()
+	mapEl.replaceChildren()
+	delete (mainStore.lightElement as { store?: unknown }).store
 	mainStore.teardown()
+
+	disposePinia(getActivePinia() as Pinia)
+
+	const shadowRoot = getCurrentInstance()?.proxy?.$el?.getRootNode()
+	if (shadowRoot instanceof ShadowRoot) {
+		shadowRoot.adoptedStyleSheets = []
+		shadowRoot.querySelectorAll('style').forEach((s) => {
+			s.remove()
+		})
+	}
 })
 </script>
 

src/core/components/PolarMap.ce.vue

@@ -19,7 +19,14 @@ import { t } from 'i18next'
 import { easeOut } from 'ol/easing'
 import { defaults } from 'ol/interaction'
 import { storeToRefs } from 'pinia'
-import { computed, onMounted, useTemplateRef, watch } from 'vue'
+import {
+	computed,
+	markRaw,
+	onBeforeUnmount,
+	onMounted,
+	useTemplateRef,
+	watch,
+} from 'vue'
 
 import { useT } from '../composables/useT'
 import { useMainStore } from '../stores/main'
@@ -42,26 +49,28 @@ function onMove() {
 }
 
 function createMap() {
-	mainStore.map = api.map.createMap(
-		{
-			target: polarMapContainer.value,
-			extent: undefined,
-			...mainStore.configuration,
-			layerConf: mainStore.serviceRegister,
-		},
-		'2D',
-		{
-			mapParams: {
-				interactions: defaults({
-					altShiftDragRotate: false,
-					pinchRotate: false,
-					dragPan: false,
-					mouseWheelZoom: false,
-					keyboard: false,
-				}),
+	mainStore.map = markRaw(
+		api.map.createMap(
+			{
+				target: polarMapContainer.value,
+				extent: undefined,
+				...mainStore.configuration,
+				layerConf: mainStore.serviceRegister,
 			},
-		}
-	) as Map
+			'2D',
+			{
+				mapParams: {
+					interactions: defaults({
+						altShiftDragRotate: false,
+						pinchRotate: false,
+						dragPan: false,
+						mouseWheelZoom: false,
+						keyboard: false,
+					}),
+				},
+			}
+		) as Map
+	)
 	mainStore.map.on('moveend', onMove)
 
 	updateDragAndZoomInteractions(
@@ -126,17 +135,24 @@ onMounted(async () => {
 		mainStore.serviceRegister
 	)
 })
+onBeforeUnmount(() => {
+	mainStore.map.un('moveend', onMove)
+	hammer?.destroy()
+	hammer = null
+})
 
 const oneFingerPan = useT(() =>
 	t(($) => $.overlay.oneFingerPan, { ns: 'core' })
 )
+let hammer: { destroy: () => void } | null = null
 function updateListeners() {
 	if (
 		!hasWindowSize.value &&
 		polarMapContainer.value &&
 		mainStore.hasSmallDisplay
 	) {
-		new Hammer(polarMapContainer.value).on('pan', (e) => {
+		hammer?.destroy()
+		hammer = new Hammer(polarMapContainer.value).on('pan', (e) => {
 			if (
 				overlay.value &&
 				e.maxPointers === 1 &&

src/core/stores/main.ts

@@ -6,6 +6,9 @@
 import { acceptHMRUpdate, defineStore } from 'pinia'
 import { computed, ref, shallowRef, watch } from 'vue'
 
+import { teardownMarkers } from '@/core/utils/map/setupMarkers.ts'
+import { teardownInteractions } from '@/core/utils/map/updateDragAndZoomInteractions.ts'
+
 import type {
 	ColorScheme,
 	MapConfigurationIncludingDefaults,
@@ -35,7 +38,7 @@
 
 	const layout = computed(() => configuration.value.layout ?? 'nineRegions')
 
 	// TODO(dopenguin): Both will possibly be updated with different breakpoints -> Breakpoints are e.g. not valid on newer devices
 	const clientHeight = ref(0)
 	const clientWidth = ref(0)
 	const hasSmallHeight = computed(
@@ -85,6 +88,10 @@
 
 	function teardown() {
 		removeEventListener('resize', updateHasSmallDisplay)
+		teardownInteractions()
+		if (configuration.value.markers) {
+			teardownMarkers(map.value)
+		}
 	}
 
 	return {

src/core/stores/marker.ts

@@ -1,7 +1,7 @@
 import { Feature } from 'ol'
 import { Point } from 'ol/geom'
 import { acceptHMRUpdate, defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, shallowRef } from 'vue'
 
 import type { CallOnMapSelect } from '../types'
 
@@ -20,8 +20,8 @@ export const useMarkerStore = defineStore('marker', () => {
 		() => (configuration.value?.clusterClickZoom as boolean) || false
 	)
 
-	const hovered = ref<Feature | null>(null)
-	const selected = ref<Feature | null>(null)
+	const hovered = shallowRef<Feature | null>(null)
+	const selected = shallowRef<Feature | null>(null)
 	const selectedCoordinates = computed(() =>
 		selected.value === null
 			? null

src/core/utils/map/setupMarkers.ts

@@ -19,6 +19,8 @@ import type { MarkerLayer, MarkerStyle, PluginId } from '../../types'
 import { useMainStore } from '../../stores/main'
 import { getMarkerStyle } from '../../utils/markers'
 
+let stopWatcher: (() => void) | null = null
+
 // these have been measured to fit once and influence marker size
 const imgSize: [number, number] = [26, 36]
 const imgSizeMulti: [number, number] = [40, 36]
@@ -121,7 +123,7 @@ function updateSelection(
 	store.selected = markRaw(selectedCluster)
 	if (centerOnFeature) {
 		const mainStore = useMainStore()
-		mainStore.centerOnFeature(store.selected as Feature)
+		mainStore.centerOnFeature(store.selected)
 	}
 }
 
@@ -205,7 +207,7 @@ export function setupMarkers(map: Map) {
 
 	// // // STORE EVENT HANDLING
 
-	watch(
+	stopWatcher = watch(
 		() => store.hovered,
 		(feature) => {
 			if (feature !== null && feature !== toRaw(store.selected)) {
@@ -236,6 +238,19 @@ export function setupMarkers(map: Map) {
 	map.on('singleclick', mapSingleClick)
 }
 
+export function teardownMarkers(map: Map) {
+	stopWatcher?.()
+	stopWatcher = null
+	layers = []
+	lastClickEvent = null
+
+	map.un('moveend', mapMoveEnd)
+	map.un('pointermove', mapPointerMove)
+	map.un('click', mapClick)
+
+	map.un('singleclick', mapSingleClick)
+}
+
 // // // MAP EVENT HANDLING
 
 let lastClickEvent: MapBrowserEvent | null = null

src/core/utils/map/updateDragAndZoomInteractions.ts

@@ -18,3 +18,7 @@ export function updateDragAndZoomInteractions(
 		map.addInteraction(interaction)
 	}
 }
+
+export function teardownInteractions() {
+	interactions = []
+}

src/plugins/pins/store.ts

@@ -5,6 +5,7 @@
 /* eslint-enable tsdoc/syntax */
 
 import type { GeoJsonGeometryTypes, Point as GeoJsonPoint } from 'geojson'
+import type { MapBrowserEvent } from 'ol'
 import type { Coordinate } from 'ol/coordinate'
 
 import { toMerged } from 'es-toolkit'
@@ -82,19 +83,15 @@ export const usePinsStore = defineStore('plugins/pins', () => {
 	function setupPlugin() {
 		coreStore.map.addLayer(pinLayer)
 		pinLayer.setZIndex(100)
-		coreStore.map.on('singleclick', async ({ coordinate }) => {
-			await click(coordinate)
-		})
+		coreStore.map.on('singleclick', onSingleClick)
 		setupCoordinateSource()
 		setupInitial()
 		setupInteractions()
 	}
 
 	function teardownPlugin() {
 		const { map } = coreStore
-		map.un('singleclick', async ({ coordinate }) => {
-			await click(coordinate)
-		})
+		map.un('singleclick', onSingleClick)
 		removePin()
 		map.removeLayer(pinLayer)
 		map.removeInteraction(move)
@@ -185,6 +182,10 @@ export const usePinsStore = defineStore('plugins/pins', () => {
 		coreStore.map.addInteraction(translate)
 	}
 
+	async function onSingleClick({ coordinate }: MapBrowserEvent) {
+		await click(coordinate)
+	}
+
 	async function click(coordinate: Coordinate) {
 		const isDrawing = coreStore.map
 			.getInteractions()