chore(web): improve map pin (#5761)

* chore(web): improve map pin

* zoom level

web/src/lib/assets/location-pin.svg

@@ -0,0 +1 @@
+<svg fill="#2443c2" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="101px" height="101px" viewBox="0 0 425.963 425.963" xml:space="preserve" stroke="#2443c2"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g> <path d="M213.285,0h-0.608C139.114,0,79.268,59.826,79.268,133.361c0,48.202,21.952,111.817,65.246,189.081 c32.098,57.281,64.646,101.152,64.972,101.588c0.906,1.217,2.334,1.934,3.847,1.934c0.043,0,0.087,0,0.13-0.002 c1.561-0.043,3.002-0.842,3.868-2.143c0.321-0.486,32.637-49.287,64.517-108.976c43.03-80.563,64.848-141.624,64.848-181.482 C346.693,59.825,286.846,0,213.285,0z M274.865,136.62c0,34.124-27.761,61.884-61.885,61.884 c-34.123,0-61.884-27.761-61.884-61.884s27.761-61.884,61.884-61.884C247.104,74.736,274.865,102.497,274.865,136.62z"></path> </g> </g></svg>

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

@@ -569,7 +569,13 @@
 
 {#if latlng && $featureFlags.loaded && $featureFlags.map}
   <div class="h-[360px]">
-    <Map mapMarkers={[{ lat: latlng.lat, lon: latlng.lng, id: asset.id }]} center={latlng} zoom={14} simplified>
+    <Map
+      mapMarkers={[{ lat: latlng.lat, lon: latlng.lng, id: asset.id }]}
+      center={latlng}
+      zoom={15}
+      simplified
+      useLocationPin
+    >
       <svelte:fragment slot="popup" let:marker>
         {@const { lat, lon } = marker}
         <div class="flex flex-col items-center gap-1">

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

@@ -20,7 +20,7 @@
   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 { mdiCog, mdiMapMarker } from '@mdi/js';
   import { createEventDispatcher } from 'svelte';
 
   export let mapMarkers: MapMarkerResponseDto[];
@@ -29,6 +29,7 @@
   export let center: LngLatLike | undefined = undefined;
   export let simplified = false;
   export let clickable = false;
+  export let useLocationPin = false;
 
   let map: maplibregl.Map;
   let marker: maplibregl.Marker | null = null;
@@ -165,11 +166,16 @@
           $$slots.popup || handleAssetClick(event.detail.feature.properties.id, map);
         }}
       >
-        <img
+        {#if useLocationPin}
-          src={api.getAssetThumbnailUrl(feature.properties?.id)}
+          <Icon path={mdiMapMarker} size="60px" class="dark:text-immich-dark-primary text-immich-primary" />
-          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 object-contain bg-immich-primary"
+        {:else}
-          alt={`Image with id ${feature.properties?.id}`}
+          <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 object-cover bg-immich-primary"
+            alt={`Image with id ${feature.properties?.id}`}
+          />
+        {/if}
+
         {#if $$slots.popup}
           <Popup openOn="click" closeOnClickOutside>
             <slot name="popup" marker={asMarker(feature)} />