diff --git a/web/src/lib/components/asset-viewer/detail-panel.svelte b/web/src/lib/components/asset-viewer/detail-panel.svelte index f607f9f98d..b4b1d24607 100644 --- a/web/src/lib/components/asset-viewer/detail-panel.svelte +++ b/web/src/lib/components/asset-viewer/detail-panel.svelte @@ -15,33 +15,43 @@ let marker: any; export let asset: ImmichAsset; - $: { - // Redraw map - if (map && leaflet) { - map.removeLayer(marker); - map.setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17); - marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]); - map.addLayer(marker); - } + $: if (asset.exifInfo) { + drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude); } onMount(async () => { if (browser) { + if (asset.exifInfo) { + await drawMap(asset.exifInfo.latitude, asset.exifInfo.longitude); + } + } + }); + + async function drawMap(lat: number, lon: number) { + if (!leaflet) { // @ts-ignore leaflet = await import('leaflet'); - map = leaflet.map('map').setView([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0], 17); + } + if (!map) { + map = leaflet.map('map'); leaflet .tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap', }) .addTo(map); - - marker = leaflet.marker([asset.exifInfo?.latitude || 0, asset.exifInfo?.longitude || 0]); - - map.addLayer(marker); } - }); + + if (marker) { + map.removeLayer(marker); + } + + map.setView([lat || 0, lon || 0], 17); + + marker = leaflet.marker([lat || 0, lon || 0]); + marker.bindPopup(`${(lat || 0).toFixed(7)},${(lon || 0).toFixed(7)}`); + map.addLayer(marker); + } const dispatch = createEventDispatcher(); const getHumanReadableString = (sizeInByte: number) => { @@ -131,7 +141,7 @@

{asset.exifInfo.make || ''} {asset.exifInfo.model || ''}

{`f/${asset.exifInfo.fNumber}` || ''}

-

{`1/${1 / asset.exifInfo.exposureTime}` || ''}

+

{`1/${Math.floor(1 / asset.exifInfo.exposureTime)}` || ''}

{`${asset.exifInfo.focalLength}mm` || ''}

{`ISO${asset.exifInfo.iso}` || ''}