feat: Maplibre (#4294)

* maplibre on web, custom styles from server

Actually use new vector tile server, custom style.json

support multiple style files, light/dark mode

cleanup, use new map everywhere

send file directly instead of loading first

better light/dark mode switching

remove leaflet

fix mapstyles dto, first draft of map settings

delete and add styles

fix delete default styles

fix tests

only allow one light and one dark style url

revert config core changes

fix server config store

fix tests

move axios fetches to repo

fix package-lock

fix tests

* open api

* add assets to docker container

* web: use mapSettings color for style

* style: add unique ids to map styles

* mobile: use style json for vector / raster

* do not use svelte-material-icons

* add click events to markers, simplify asset detail map

* improve map performance by using asset thumbnails for markers instead of original file

* Remove custom attribution

(by request)

* mobile: update map attribution

* style: map dark mode

* style: map light mode

* zoom level for state

* styling

* overflow gradient

* Limit maxZoom to 14

* mobile: listen for mapStyle changes in MapThumbnail

* mobile: update concurrency

---------

Co-authored-by: shalong-tanwen <139912620+shalong-tanwen@users.noreply.github.com>
Co-authored-by: bo0tzz <git@bo0tzz.me>
Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/admin-page/settings/map-settings/map-settings.svelte

@@ -9,9 +9,9 @@
   import { fade } from 'svelte/transition';
   import SettingAccordion from '../setting-accordion.svelte';
   import SettingButtonsRow from '../setting-buttons-row.svelte';
-  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
   import SettingSwitch from '../setting-switch.svelte';
   import SettingSelect from '../setting-select.svelte';
+  import SettingInputField, { SettingInputFieldType } from '../setting-input-field.svelte';
 
   export let config: SystemConfigDto; // this is the config that is being edited
   export let disabled = false;
@@ -34,7 +34,8 @@
           ...current,
           map: {
             enabled: config.map.enabled,
-            tileUrl: config.map.tileUrl,
+            lightStyle: config.map.lightStyle,
+            darkStyle: config.map.darkStyle,
           },
           reverseGeocoding: {
             enabled: config.reverseGeocoding.enabled,
@@ -95,12 +96,19 @@
 
               <SettingInputField
                 inputType={SettingInputFieldType.TEXT}
-                label="Tile URL"
-                desc="URL to a leaflet compatible tile server"
-                bind:value={config.map.tileUrl}
-                required={true}
+                label="Light Style"
+                desc="URL to a style.json map theme"
+                bind:value={config.map.lightStyle}
                 disabled={disabled || !config.map.enabled}
-                isEdited={config.map.tileUrl !== savedConfig.map.tileUrl}
+                isEdited={config.map.lightStyle !== savedConfig.map.lightStyle}
+              />
+              <SettingInputField
+                inputType={SettingInputFieldType.TEXT}
+                label="Dark Style"
+                desc="URL to a style.json map theme"
+                bind:value={config.map.darkStyle}
+                disabled={disabled || !config.map.enabled}
+                isEdited={config.map.darkStyle !== savedConfig.map.darkStyle}
               />
             </div></SettingAccordion
           >

web/src/lib/components/asset-viewer/detail-panel.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { locale } from '$lib/stores/preferences.store';
-  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { featureFlags } from '$lib/stores/server-config.store';
   import { getAssetFilename } from '$lib/utils/asset-utils';
   import { AlbumResponseDto, AssetResponseDto, ThumbnailFormat, api } from '@api';
-  import type { LatLngTuple } from 'leaflet';
   import { DateTime } from 'luxon';
   import { createEventDispatcher } from 'svelte';
   import { asByteUnitString } from '../../utils/byte-units';
@@ -12,6 +11,7 @@
   import UserAvatar from '../shared-components/user-avatar.svelte';
   import { mdiCalendar, mdiCameraIris, mdiClose, mdiImageOutline, mdiMapMarkerOutline } from '@mdi/js';
   import Icon from '$lib/components/elements/icon.svelte';
+  import Map from '../shared-components/map/map.svelte';
 
   export let asset: AssetResponseDto;
   export let albums: AlbumResponseDto[] = [];
@@ -36,20 +36,10 @@
     const lng = asset.exifInfo?.longitude;
 
     if (lat && lng) {
-      return [Number(lat.toFixed(7)), Number(lng.toFixed(7))] as LatLngTuple;
+      return { lat: Number(lat.toFixed(7)), lng: Number(lng.toFixed(7)) };
     }
   })();
 
-  $: {
-    if (!asset.exifInfo) {
-      api.assetApi.getAssetById({ id: asset.id }).then((res) => {
-        asset.exifInfo = res.data?.exifInfo;
-      });
-    }
-  }
-  $: lat = latlng ? latlng[0] : undefined;
-  $: lng = latlng ? latlng[1] : undefined;
-
   $: people = asset.people || [];
 
   const dispatch = createEventDispatcher();
@@ -297,24 +287,21 @@
 
 {#if latlng && $featureFlags.loaded && $featureFlags.map}
   <div class="h-[360px]">
-    {#await import('../shared-components/leaflet') then { Map, TileLayer, Marker }}
-      <Map center={latlng} zoom={14}>
-        <TileLayer
-          urlTemplate={$serverConfig.mapTileUrl}
-          options={{
-            attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
-          }}
-        />
-        <Marker {latlng}>
-          <p>
-            {lat}, {lng}
-          </p>
-          <a href="https://www.openstreetmap.org/?mlat={lat}&mlon={lng}&zoom=15#map=15/{lat}/{lng}">
+    <Map mapMarkers={[{ lat: latlng.lat, lon: latlng.lng, id: asset.id }]} center={latlng} zoom={14} simplified>
+      <svelte:fragment slot="popup" let:marker>
+        {@const { lat, lon } = marker}
+        <div class="flex flex-col items-center gap-1">
+          <p class="font-bold">{lat.toPrecision(6)}, {lon.toPrecision(6)}</p>
+          <a
+            href="https://www.openstreetmap.org/?mlat={lat}&mlon={lon}&zoom=15#map=15/{lat}/{lon}"
+            target="_blank"
+            class="font-medium text-immich-primary"
+          >
             Open in OpenStreetMap
           </a>
-        </Marker>
-      </Map>
-    {/await}
+        </div>
+      </svelte:fragment>
+    </Map>
   </div>
 {/if}
 

web/src/lib/components/shared-components/leaflet/control.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
-  import { Control, type ControlPosition } from 'leaflet';
-  import { getMapContext } from './map.svelte';
-
-  export let position: ControlPosition | undefined = undefined;
-  let className: string | undefined = undefined;
-  export { className as class };
-
-  let control: Control;
-  let target: HTMLDivElement;
-
-  const map = getMapContext();
-
-  onMount(() => {
-    const ControlClass = Control.extend({
-      position,
-      onAdd: () => target,
-    });
-
-    control = new ControlClass().addTo(map);
-  });
-
-  onDestroy(() => {
-    control.remove();
-  });
-
-  $: if (control && position) {
-    control.setPosition(position);
-  }
-</script>
-
-<div bind:this={target} class={className}>
-  <slot />
-</div>

web/src/lib/components/shared-components/leaflet/index.ts

@@ -1,5 +0,0 @@
-export { default as Control } from './control.svelte';
-export { default as Map } from './map.svelte';
-export { default as AssetMarkerCluster } from './marker-cluster/asset-marker-cluster.svelte';
-export { default as Marker } from './marker.svelte';
-export { default as TileLayer } from './tile-layer.svelte';

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

@@ -1,50 +0,0 @@
-<script lang="ts" context="module">
-  import { createContext } from '$lib/utils/context';
-
-  const { get: getContext, set: setMapContext } = createContext<() => Map>();
-
-  export const getMapContext = () => {
-    const getMap = getContext();
-    return getMap();
-  };
-</script>
-
-<script lang="ts">
-  import { onMount, onDestroy } from 'svelte';
-  import { browser } from '$app/environment';
-  import { Map, type LatLngExpression, type MapOptions } from 'leaflet';
-  import 'leaflet/dist/leaflet.css';
-
-  export let center: LatLngExpression;
-  export let zoom: number;
-  export let options: MapOptions | undefined = undefined;
-  export let allowDarkMode = false;
-  let container: HTMLDivElement;
-  let map: Map;
-
-  setMapContext(() => map);
-
-  onMount(() => {
-    if (browser) {
-      map = new Map(container, options);
-    }
-  });
-
-  onDestroy(() => {
-    if (map) map.remove();
-  });
-
-  $: if (map) map.setView(center, zoom);
-</script>
-
-<div bind:this={container} class="h-full w-full" class:map-dark={allowDarkMode}>
-  {#if map}
-    <slot />
-  {/if}
-</div>
-
-<style>
-  :global(.dark) .map-dark :global(.leaflet-layer) {
-    filter: invert(100%) brightness(130%) saturate(0%);
-  }
-</style>

web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.css

@@ -1,31 +0,0 @@
-.asset-marker-icon {
-  @apply rounded-full;
-  @apply object-cover;
-  @apply border;
-  @apply border-immich-primary;
-  @apply transition-all;
-  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px,
-    rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
-}
-
-.marker-cluster-icon {
-  @apply h-full;
-  @apply w-full;
-  @apply flex;
-  @apply justify-center;
-  @apply items-center;
-  @apply rounded-full;
-  @apply font-bold;
-  @apply bg-violet-50;
-  @apply border;
-  @apply border-immich-primary;
-  @apply text-immich-primary;
-  box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
-}
-
-.dark .map-dark .marker-cluster-icon {
-  @apply bg-blue-200;
-  @apply text-black;
-  @apply border-blue-200;
-  box-shadow: none;
-}

web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker-cluster.svelte

@@ -1,102 +0,0 @@
-<script lang="ts" context="module">
-  import { createContext } from '$lib/utils/context';
-  import { MarkerClusterGroup } from 'leaflet';
-
-  const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
-
-  export const getClusterContext = () => {
-    return getContext()();
-  };
-</script>
-
-<script lang="ts">
-  import type { MapMarkerResponseDto } from '@api';
-  import { DivIcon, LeafletEvent, LeafletMouseEvent, MarkerCluster, Point } from 'leaflet';
-  import 'leaflet.markercluster';
-  import { createEventDispatcher, onDestroy, onMount } from 'svelte';
-  import { getMapContext } from '../map.svelte';
-  import AssetMarker from './asset-marker';
-  import './asset-marker-cluster.css';
-
-  export let markers: MapMarkerResponseDto[];
-  export let spiderfyLimit = 10;
-  let cluster: MarkerClusterGroup;
-
-  const map = getMapContext();
-  const dispatch = createEventDispatcher<{
-    view: { assetIds: string[]; activeAssetIndex: number };
-  }>();
-
-  setClusterContext(() => cluster);
-
-  onMount(() => {
-    cluster = new MarkerClusterGroup({
-      showCoverageOnHover: false,
-      zoomToBoundsOnClick: false,
-      spiderfyOnMaxZoom: false,
-      maxClusterRadius: (zoom) => 80 - zoom * 2,
-      spiderLegPolylineOptions: { opacity: 0 },
-      spiderfyDistanceMultiplier: 3,
-      iconCreateFunction: (options) => {
-        const childCount = options.getChildCount();
-        const iconSize = childCount > spiderfyLimit ? 45 : 40;
-
-        return new DivIcon({
-          html: `<div class="marker-cluster-icon">${childCount}</div>`,
-          className: '',
-          iconSize: new Point(iconSize, iconSize),
-        });
-      },
-    });
-
-    cluster.on('clusterclick', (event: LeafletEvent) => {
-      const markerCluster: MarkerCluster = event.sourceTarget;
-      const childCount = markerCluster.getChildCount();
-
-      if (childCount > spiderfyLimit) {
-        const markers = markerCluster.getAllChildMarkers() as AssetMarker[];
-        onView(markers, markers[0].id);
-      } else {
-        markerCluster.spiderfy();
-      }
-    });
-
-    cluster.on('click', (event: LeafletMouseEvent) => {
-      const marker: AssetMarker = event.sourceTarget;
-      const markerCluster = getClusterByMarker(marker);
-      const markers = markerCluster ? (markerCluster.getAllChildMarkers() as AssetMarker[]) : [marker];
-
-      onView(markers, marker.id);
-    });
-
-    map.addLayer(cluster);
-  });
-
-  /* eslint-disable-next-line  @typescript-eslint/no-explicit-any */
-  const getClusterByMarker = (marker: any): MarkerCluster | undefined => {
-    const mapZoom = map.getZoom();
-
-    while (marker && marker._zoom !== mapZoom) {
-      marker = marker.__parent;
-    }
-
-    return marker;
-  };
-
-  const onView = (markers: AssetMarker[], activeAssetId: string) => {
-    const assetIds = markers.map((marker) => marker.id);
-    const activeAssetIndex = assetIds.indexOf(activeAssetId) || 0;
-    dispatch('view', { assetIds, activeAssetIndex });
-  };
-
-  $: if (cluster) {
-    const leafletMarkers = markers.map((marker) => new AssetMarker(marker));
-
-    cluster.clearLayers();
-    cluster.addLayers(leafletMarkers);
-  }
-
-  onDestroy(() => {
-    if (cluster) cluster.remove();
-  });
-</script>

web/src/lib/components/shared-components/leaflet/marker-cluster/asset-marker.ts

@@ -1,37 +0,0 @@
-import { api, MapMarkerResponseDto } from '@api';
-import { Icon, Map, Marker } from 'leaflet';
-
-export default class AssetMarker extends Marker {
-  id: string;
-  private iconCreated = false;
-
-  constructor(marker: MapMarkerResponseDto) {
-    super([marker.lat, marker.lon]);
-    this.id = marker.id;
-  }
-
-  onAdd(map: Map) {
-    // Set icon when the marker gets actually added to the map. This only
-    // gets called for individual assets and when selecting a cluster, so
-    // creating an icon for every marker in advance is pretty wasteful.
-    if (!this.iconCreated) {
-      this.iconCreated = true;
-      this.setIcon(this.getIcon());
-    }
-
-    return super.onAdd(map);
-  }
-
-  getIcon() {
-    return new Icon({
-      iconUrl: api.getAssetThumbnailUrl(this.id),
-      iconRetinaUrl: api.getAssetThumbnailUrl(this.id),
-      iconSize: [60, 60],
-      iconAnchor: [12, 41],
-      popupAnchor: [1, -34],
-      tooltipAnchor: [16, -28],
-      shadowSize: [41, 41],
-      className: 'asset-marker-icon',
-    });
-  }
-}

web/src/lib/components/shared-components/leaflet/marker.svelte

@@ -1,50 +0,0 @@
-<script lang="ts">
-  import { onDestroy, onMount } from 'svelte';
-  import { Marker, Icon, type LatLngExpression } from 'leaflet';
-  import { getMapContext } from './map.svelte';
-  import iconUrl from 'leaflet/dist/images/marker-icon.png';
-  import iconRetinaUrl from 'leaflet/dist/images/marker-icon-2x.png';
-  import shadowUrl from 'leaflet/dist/images/marker-shadow.png';
-
-  export let latlng: LatLngExpression;
-  let popupHTML: string;
-  let marker: Marker;
-
-  const defaultIcon = new Icon({
-    iconUrl,
-    iconRetinaUrl,
-    shadowUrl,
-
-    // Default values from Leaflet
-    iconSize: [25, 41],
-    iconAnchor: [12, 41],
-    popupAnchor: [1, -34],
-    tooltipAnchor: [16, -28],
-    shadowSize: [41, 41],
-  });
-  const map = getMapContext();
-
-  onMount(() => {
-    marker = new Marker(latlng, {
-      icon: defaultIcon,
-    }).addTo(map);
-  });
-
-  onDestroy(() => {
-    if (marker) marker.remove();
-  });
-
-  $: if (marker) {
-    marker.setLatLng(latlng);
-
-    if (popupHTML) {
-      marker.bindPopup(popupHTML);
-    } else {
-      marker.unbindPopup();
-    }
-  }
-</script>
-
-<span contenteditable="true" bind:innerHTML={popupHTML} class="hide">
-  <slot />
-</span>

web/src/lib/components/shared-components/leaflet/tile-layer.svelte

@@ -1,20 +0,0 @@
-<script lang="ts">
-  import { TileLayer, type TileLayerOptions } from 'leaflet';
-  import { onDestroy, onMount } from 'svelte';
-  import { getMapContext } from './map.svelte';
-
-  export let urlTemplate: string;
-  export let options: TileLayerOptions | undefined = undefined;
-
-  let tileLayer: TileLayer;
-
-  const map = getMapContext();
-
-  onMount(() => {
-    tileLayer = new TileLayer(urlTemplate, options).addTo(map);
-  });
-
-  onDestroy(() => {
-    tileLayer?.remove();
-  });
-</script>

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

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import {
+    MapLibre,
+    GeoJSON,
+    MarkerLayer,
+    AttributionControl,
+    ControlButton,
+    Control,
+    ControlGroup,
+    Map,
+    FullscreenControl,
+    GeolocateControl,
+    NavigationControl,
+    ScaleControl,
+    Popup,
+  } from 'svelte-maplibre';
+  import { mapSettings } from '$lib/stores/preferences.store';
+  import { MapMarkerResponseDto, api } from '@api';
+  import type { GeoJSONSource, LngLatLike, StyleSpecification } from 'maplibre-gl';
+  import type { Feature, Geometry, GeoJsonProperties, Point } from 'geojson';
+  import Icon from '$lib/components/elements/icon.svelte';
+  import { mdiCog } from '@mdi/js';
+  import { createEventDispatcher } from 'svelte';
+
+  export let mapMarkers: MapMarkerResponseDto[];
+  export let showSettingsModal: boolean | undefined = undefined;
+  export let zoom: number | undefined = undefined;
+  export let center: LngLatLike | undefined = undefined;
+  export let simplified = false;
+
+  $: style = (async () => {
+    const { data } = await api.systemConfigApi.getMapStyle({ theme: $mapSettings.allowDarkMode ? 'dark' : 'light' });
+    return data as StyleSpecification;
+  })();
+
+  const dispatch = createEventDispatcher<{ selected: string[] }>();
+
+  function handleAssetClick(assetId: string, map: Map | null) {
+    if (!map) {
+      return;
+    }
+    dispatch('selected', [assetId]);
+  }
+
+  function handleClusterClick(clusterId: number, map: Map | null) {
+    if (!map) {
+      return;
+    }
+
+    const mapSource = map?.getSource('geojson') as GeoJSONSource;
+    mapSource.getClusterLeaves(clusterId, 10000, 0, (error, leaves) => {
+      if (error) {
+        return;
+      }
+
+      if (leaves) {
+        const ids = leaves.map((leaf) => leaf.properties?.id);
+        dispatch('selected', ids);
+      }
+    });
+  }
+
+  type FeaturePoint = Feature<Point, { id: string }>;
+
+  const asFeature = (marker: MapMarkerResponseDto): FeaturePoint => {
+    return {
+      type: 'Feature',
+      geometry: { type: 'Point', coordinates: [marker.lon, marker.lat] },
+      properties: {
+        id: marker.id,
+      },
+    };
+  };
+
+  const asMarker = (feature: Feature<Geometry, GeoJsonProperties>): MapMarkerResponseDto => {
+    const featurePoint = feature as FeaturePoint;
+    return {
+      lat: featurePoint.geometry.coordinates[0],
+      lon: featurePoint.geometry.coordinates[1],
+      id: featurePoint.properties.id,
+    };
+  };
+</script>
+
+{#await style then style}
+  <MapLibre {style} class="h-full" {center} {zoom} attributionControl={false} let:map>
+    <NavigationControl position="top-left" showCompass={!simplified} />
+    {#if !simplified}
+      <GeolocateControl position="top-left" fitBoundsOptions={{ maxZoom: 12 }} />
+      <FullscreenControl position="top-left" />
+      <ScaleControl />
+      <AttributionControl compact={false} />
+    {/if}
+    {#if showSettingsModal !== undefined}
+      <Control>
+        <ControlGroup>
+          <ControlButton on:click={() => (showSettingsModal = true)}><Icon path={mdiCog} size="100%" /></ControlButton>
+        </ControlGroup>
+      </Control>
+    {/if}
+    <GeoJSON
+      data={{
+        type: 'FeatureCollection',
+        features: mapMarkers.map((marker) => {
+          return asFeature(marker);
+        }),
+      }}
+      id="geojson"
+      cluster={{ maxZoom: 14, radius: 500 }}
+    >
+      <MarkerLayer
+        applyToClusters
+        asButton
+        let:feature
+        on:click={(event) => {
+          handleClusterClick(event.detail.feature.properties.cluster_id, map);
+        }}
+      >
+        <div
+          class="rounded-full w-[40px] h-[40px] bg-immich-primary text-immich-gray flex justify-center items-center font-mono font-bold shadow-lg hover:bg-immich-dark-primary transition-all duration-200 hover:text-immich-dark-bg opacity-90"
+        >
+          {feature.properties?.point_count}
+        </div>
+      </MarkerLayer>
+      <MarkerLayer
+        applyToClusters={false}
+        asButton
+        let:feature
+        on:click={(event) => {
+          $$slots.popup || handleAssetClick(event.detail.feature.properties.id, map);
+        }}
+      >
+        <img
+          src={api.getAssetThumbnailUrl(feature.properties?.id)}
+          class="rounded-full w-[60px] h-[60px] border-2 border-immich-primary shadow-lg hover:border-immich-dark-primary transition-all duration-200 hover:scale-150"
+          alt={`Image with id ${feature.properties?.id}`}
+        />
+        {#if $$slots.popup}
+          <Popup openOn="click" closeOnClickOutside>
+            <slot name="popup" marker={asMarker(feature)} />
+          </Popup>
+        {/if}
+      </MarkerLayer>
+    </GeoJSON>
+  </MapLibre>
+{/await}