mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
65daf342df
* First crude implementation of the global asset map in web * Use single DOM element for all markers * Minor layout changes * Refactor * Add asset viewer * Add API endpoint that returns only assets with location information (Thanks @EPP100) * Remove sidebar icon flip * Add dark theme support * Center map to most recent asset * Allow cluster viewing * Fix linter errors * Add newlines * Fix ts errors * Fix eslint error * Run prettier * Server code style * Fix openapi mobile code generation issues * Map markers test * fix: Support video thumbnails * Update API * Review suggestions * Review suggestions * Linter error * Chage mapMarker endpoint to map-marker * Clean up leaflet imports
34 lines
818 B
Svelte
34 lines
818 B
Svelte
<script lang="ts">
|
|
import { onDestroy, onMount } from 'svelte';
|
|
import { TileLayer, type TileLayerOptions } from 'leaflet';
|
|
import { getMapContext } from './map.svelte';
|
|
|
|
export let urlTemplate: string;
|
|
export let options: TileLayerOptions | undefined = undefined;
|
|
export let allowDarkMode = false;
|
|
|
|
let tileLayer: TileLayer;
|
|
|
|
const map = getMapContext();
|
|
|
|
onMount(() => {
|
|
tileLayer = new TileLayer(urlTemplate, {
|
|
className: allowDarkMode ? 'leaflet-layer-dynamic' : 'leaflet-layer',
|
|
...options
|
|
}).addTo(map);
|
|
});
|
|
|
|
onDestroy(() => {
|
|
if (tileLayer) tileLayer.remove();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
:global(.leaflet-layer-dynamic) {
|
|
filter: brightness(100%) contrast(100%) saturate(80%);
|
|
}
|
|
|
|
:global(.dark .leaflet-layer-dynamic) {
|
|
filter: invert(100%) brightness(130%) saturate(0%);
|
|
}
|
|
</style>
|