self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

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

Browse Source 
* chore(web): improve map pin

* zoom level
This commit is contained in:
Alex 2023-12-16 14:21:13 -06:00 committed by GitHub
parent 67f020380f
commit 62347edf43
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 20 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/src/lib/assets/location-pin.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 944 B

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

@ -569,7 +569,13 @@
{#if latlng && $featureFlags.loaded && $featureFlags.map} {#if latlng && $featureFlags.loaded && $featureFlags.map}
<div class="h-[360px]"> <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> <svelte:fragment slot="popup" let:marker>
{@const { lat, lon } = marker} {@const { lat, lon } = marker}
<div class="flex flex-col items-center gap-1"> <div class="flex flex-col items-center gap-1">

10
web/src/lib/components/shared-components/map/map.svelte
View File

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