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/components/MapErrorBoundary.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="relative h-full w-full">
+    <slot v-if="!caughtError" />
+    <div
+      v-else
+      class="absolute inset-0 z-[600] flex flex-col items-center justify-center gap-4 bg-base-200/95 p-8"
+      role="alert"
+    >
+      <p class="text-center text-lg font-medium">Map failed to load</p>
+      <p class="text-center text-sm text-base-content/80">
+        Something went wrong while loading the map. You can try reloading the page.
+      </p>
+      <button type="button" class="btn btn-primary" @click="reload">
+        Reload page
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const caughtError = ref<Error | null>(null)
+
+function reload() {
+  if (import.meta.client) {
+    window.location.reload()
+  }
+}
+
+onErrorCaptured((err) => {
+  caughtError.value = err
+  return true
+})
+</script>