improved map state reset

Author: digitaltom

app/javascript/controllers/map_controller.js

@@ -1,13 +1,20 @@
 import { Controller } from '@hotwired/stimulus'
 import * as functions from 'helpers/functions'
-import { initializeMap, setBackgroundMapLayer, initializeViewMode, 
+import { initializeMap, setBackgroundMapLayer, initializeViewMode,
   initializeStaticMode, addFeature } from 'maplibre/map'
 import { initializeEditMode } from 'maplibre/edit'
 import { initializeSocket, mapChannel } from 'channels/map_channel'
-import { addUndoState } from 'maplibre/undo'
+import { addUndoState, clearUndoHistory } from 'maplibre/undo'
+import { resetInitializationState } from 'maplibre/layers/layers'
+import { clearImageState } from 'maplibre/styles/styles'
 
 export default class extends Controller {
   async connect () {
+    // Clear module-level state from previous map
+    resetInitializationState()
+    clearImageState()
+    clearUndoHistory()
+
     functions.e('#map-header nav', e => { e.style.display = 'none' })
     await initializeMap('maplibre-map')
     // static mode is used for screenshots
@@ -20,6 +27,26 @@ export default class extends Controller {
     setBackgroundMapLayer()
   }
 
+  disconnect() {
+    // Clean up when navigating away from the map
+    console.log('Map controller disconnecting, cleaning up...')
+
+    // Remove the map instance
+    if (window.map) {
+      try {
+        window.map.remove()
+        window.map = null
+      } catch (e) {
+        console.warn('Error removing map instance:', e)
+      }
+    }
+
+    // Clear module-level state
+    resetInitializationState()
+    clearImageState()
+    clearUndoHistory()
+  }
+
   // paste feature from clipboard
   async paste(_event) {
 

app/javascript/maplibre/layers/layers.js

@@ -7,6 +7,15 @@ export let layers // Layer instances: GeoJSONLayer, OverpassLayer, WikipediaLaye
 // Cached promise to ensure initializeLayers only runs once
 let initializePromise = null
 
+/**
+ * Resets the initialization state when navigating to a new map.
+ * This allows layers to be re-initialized from scratch.
+ */
+export function resetInitializationState() {
+  initializePromise = null
+  layers = null
+}
+
 /**
  * Loads layer definitions from server and initializes them.
  * Combines loadLayerDefinitions(), initializeLayerSources(), and initializeLayerStyles()

app/javascript/maplibre/styles/styles.js

@@ -10,6 +10,7 @@ import {
 } from 'maplibre/feature'
 import { getFeature } from 'maplibre/layers/layers'
 import { frontFeature, map, removeStyleLayers } from 'maplibre/map'
+import { defaultFont } from 'maplibre/styles/basemaps'
 
 export const viewStyleNames = [
   'polygon-layer',
@@ -120,6 +121,12 @@ export function initializeClusterStyles(sourceName, icon) {
 // loading images from 'marker-image-url' attributes
 // avoid loading the same image by each web worker
 const imageState = {} // 'loading' | 'loaded' | 'error'
+
+// Clear image state when navigating to a new map
+export function clearImageState() {
+  Object.keys(imageState).forEach(key => delete imageState[key])
+}
+
 export async function loadImage (e) {
   // Skip if already loading, loaded, or failed
   if (imageState[e.id]) {
@@ -319,7 +326,7 @@ const labelSize = [
 ]
 
 // default font is set in basemap def basemaps[backgroundMapLayer]['font']
-export let labelFont // array
+export let labelFont = [defaultFont] // array - initialize with default to prevent null errors
 
 // Shared configuration for symbols layers
 function symbolsLayerStyles(mode) {

app/javascript/maplibre/undo.js

@@ -8,6 +8,23 @@ import { resetDirections } from 'maplibre/routing/osrm'
 let undoStack = []
 let redoStack = []
 
+/**
+ * Clears undo/redo history when navigating to a new map
+ */
+export function clearUndoHistory() {
+  undoStack = []
+  redoStack = []
+  // Try to hide buttons if they exist
+  try {
+    const undoBtn = document.querySelector('button.maplibregl-ctrl-undo')
+    const redoBtn = document.querySelector('button.maplibregl-ctrl-redo')
+    if (undoBtn) undoBtn.classList.add('hidden')
+    if (redoBtn) redoBtn.classList.add('hidden')
+  } catch (_e) {
+    // Buttons may not exist yet
+  }
+}
+
 export function addUndoState(type, state, clearRedo = true) {
   // Deep clone to avoid mutation
   undoStack.push({ type: type, state: JSON.parse(JSON.stringify(state)) })