0ct0pu5/immich
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Clean up leaflet imports

Browse source
This commit is contained in:
Matthias Rupp 2023-05-04 21:45:07 -11:00
parent 0f302c76d7
commit d341fc0d1d
2 changed files with 9 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,8 +1,8 @@
<script lang="ts" context="module">
import { createContext } from '$lib/utils/context';
import L from 'leaflet';
import { MarkerClusterGroup, Marker, Icon, LeafletEvent } from 'leaflet';
const { get: getContext, set: setClusterContext } = createContext<() => L.MarkerClusterGroup>();
const { get: getContext, set: setClusterContext } = createContext<() => MarkerClusterGroup>();
export const getClusterContext = () => {
return getContext()();
@ -16,12 +16,12 @@
import { MapMarkerResponseDto, api } from '@api';
import { createEventDispatcher } from 'svelte';
class AssetMarker extends L.Marker {
class AssetMarker extends Marker {
marker: MapMarkerResponseDto;
constructor(marker: MapMarkerResponseDto) {
super([marker.lat, marker.lon], {
icon: new L.Icon({
icon: new Icon({
iconUrl: api.getAssetThumbnailUrl(marker.id),
iconRetinaUrl: api.getAssetThumbnailUrl(marker.id),
iconSize: [60, 60],
@ -46,12 +46,12 @@
const map = getMapContext();
let cluster: L.MarkerClusterGroup;
let cluster: MarkerClusterGroup;
setClusterContext(() => cluster);
onMount(() => {
cluster = new L.MarkerClusterGroup({
cluster = new MarkerClusterGroup({
showCoverageOnHover: false,
zoomToBoundsOnClick: false,
spiderfyOnMaxZoom: false,
@ -60,7 +60,7 @@
spiderfyDistanceMultiplier: 3
});
cluster.on('clusterclick', (event: L.LeafletEvent) => {
cluster.on('clusterclick', (event: LeafletEvent) => {
const ids = event.sourceTarget
.getAllChildMarkers()
.map((marker: AssetMarker) => marker.getAssetId());

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

@ -1,6 +1,6 @@
<script lang="ts">
import { onDestroy, onMount } from 'svelte';
import L, { TileLayer, type TileLayerOptions } from 'leaflet';
import { TileLayer, type TileLayerOptions } from 'leaflet';
import { getMapContext } from './map.svelte';
export let urlTemplate: string;
@ -12,7 +12,7 @@
const map = getMapContext();
onMount(() => {
tileLayer = new L.TileLayer(urlTemplate, {
tileLayer = new TileLayer(urlTemplate, {
className: allowDarkMode ? 'leaflet-layer-dynamic' : 'leaflet-layer',
...options
}).addTo(map);