Implement error handling and visual enhancements in map components

- Introduced MapErrorBoundary component to handle map loading errors gracefully.
- Enhanced MapView with a reconnection status indicator for live updates.
- Added tile freshness animation to indicate updated tiles visually.
- Preloaded marker icon images to improve rendering performance.
- Updated various pages to utilize the new MapErrorBoundary for better user experience.

frontend-nuxt/composables/useMapInit.ts

@@ -6,6 +6,31 @@ import type { MapInfo } from '~/types/api'
 
 type SmartTileLayerInstance = InstanceType<typeof SmartTileLayer>
 
+/** Known marker icon paths (without .png) to preload so markers render without broken images. */
+const MARKER_ICON_PATHS = [
+  'gfx/terobjs/mm/custom',
+  'gfx/terobjs/mm/tower',
+  'gfx/terobjs/mm/village',
+  'gfx/terobjs/mm/dungeon',
+  'gfx/terobjs/mm/cave',
+  'gfx/terobjs/mm/settlement',
+  'gfx/invobjs/small/bush',
+  'gfx/invobjs/small/bumling',
+]
+
+/**
+ * Preloads marker icon images so they are in the browser cache before markers render.
+ * Call from client only. resolvePath should produce absolute URLs for static assets.
+ */
+export function preloadMarkerIcons(resolvePath: (path: string) => string): void {
+  if (import.meta.server) return
+  for (const base of MARKER_ICON_PATHS) {
+    const url = resolvePath(`${base}.png`)
+    const img = new Image()
+    img.src = url
+  }
+}
+
 export interface MapInitResult {
   map: L.Map
   layer: SmartTileLayerInstance
@@ -87,5 +112,11 @@ export async function initLeafletMap(
   const markerIconPath = baseURL.endsWith('/') ? baseURL : baseURL + '/'
   L.Icon.Default.imagePath = markerIconPath
 
+  const resolvePath = (path: string) => {
+    const p = path.startsWith('/') ? path : `/${path}`
+    return baseURL === '/' ? p : `${baseURL.replace(/\/$/, '')}${p}`
+  }
+  preloadMarkerIcons(resolvePath)
+
   return { map, layer, overlayLayer, coordLayer, markerLayer, backendBase }
 }