use single query param

i18n/en.json

@@ -1050,6 +1050,7 @@
     "cant_get_number_of_comments": "Can't get number of comments",
     "cant_search_people": "Can't search people",
     "cant_search_places": "Can't search places",
+    "enable_webgl_for_map": "Enable WebGL to load the map.{isAdmin, select, true { To hide this warning, disable the map feature.} other {}}",
     "error_adding_assets_to_album": "Error adding assets to album",
     "error_adding_users_to_album": "Error adding users to album",
     "error_deleting_shared_user": "Error deleting shared user",
@@ -1245,6 +1246,7 @@
   "go_back": "Go back",
   "go_to_folder": "Go to folder",
   "go_to_search": "Go to search",
+  "go_to_settings": "Go to settings",
   "gps": "GPS",
   "gps_missing": "No GPS",
   "grant_permission": "Grant permission",

web/src/lib/components/shared-components/map/map.svelte

@@ -11,15 +11,17 @@
 <script lang="ts">
   import { afterNavigate } from '$app/navigation';
   import OnEvents from '$lib/components/OnEvents.svelte';
-  import { Theme } from '$lib/constants';
+  import { OpenQueryParam, Theme } from '$lib/constants';
   import { serverConfigManager } from '$lib/managers/server-config-manager.svelte';
   import { themeManager } from '$lib/managers/theme-manager.svelte';
   import MapSettingsModal from '$lib/modals/MapSettingsModal.svelte';
+  import { Route } from '$lib/route';
   import { mapSettings } from '$lib/stores/preferences.store';
+  import { user } from '$lib/stores/user.store';
   import { getAssetMediaUrl, handlePromiseError } from '$lib/utils';
   import { getMapMarkers, type MapMarkerResponseDto } from '@immich/sdk';
-  import { Icon, modalManager } from '@immich/ui';
+  import { Icon, Link, modalManager, Text } from '@immich/ui';
-  import { mdiCog, mdiMap, mdiMapMarker } from '@mdi/js';
+  import { mdiCog, mdiInformationOutline, mdiMap, mdiMapMarker } from '@mdi/js';
   import type { Feature, GeoJsonProperties, Geometry, Point } from 'geojson';
   import { isEqual, omit } from 'lodash-es';
   import { DateTime, Duration } from 'luxon';
@@ -301,6 +303,8 @@
 
 <OnEvents {onAssetsDelete} />
 
+<!-- Use svelte:boundary instead of MapLibre onerror until https://github.com/dimfeld/svelte-maplibre/issues/279 is fixed -->
+<svelte:boundary>
   <!--  We handle style loading ourselves so we set style blank here -->
   <MapLibre
     {hash}
@@ -407,3 +411,25 @@
       </GeoJSON>
     {/snippet}
   </MapLibre>
+
+  {#snippet failed(_)}
+    <div
+      class={[
+        'flex place-content-center place-items-center text-warning',
+        simplified ? 'gap-4 px-6 text-sm' : 'h-full mx-auto gap-6',
+      ]}
+    >
+      <div>
+        <Icon icon={mdiInformationOutline} size={simplified ? '18' : '24'} />
+      </div>
+      <div>
+        <Text>
+          {$t('errors.enable_webgl_for_map', { values: { isAdmin: $user.isAdmin } })}
+        </Text>
+        {#if $user.isAdmin}
+          <Link href={Route.systemSettings({ isOpen: OpenQueryParam.LOCATION })}>{$t('go_to_settings')}</Link>
+        {/if}
+      </div>
+    </div>
+  {/snippet}
+</svelte:boundary>

web/src/lib/constants.ts

@@ -65,6 +65,7 @@ export enum OpenQueryParam {
   OAUTH = 'oauth',
   JOB = 'job',
   STORAGE_TEMPLATE = 'storage-template',
+  LOCATION = 'location',
   NOTIFICATIONS = 'notifications',
   PURCHASE_SETTINGS = 'user-purchase-settings',
 }