self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-07-04 05:50:38 +02:00
Code Issues Releases Activity

feat(web): improve map styling and interaction (#2399)

Browse Source 
* improve map styling and interaction

* Update style
This commit is contained in:
Alex
2023-05-08 21:05:06 -05:00
committed by GitHub
parent 5885ec8e65
commit c2e9fe0aac
1 changed files with 31 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
web/src/lib/components/shared-components/leaflet/asset-marker-cluster.svelte
View File

@ -28,7 +28,8 @@
iconAnchor: [12, 41],
popupAnchor: [1, -34],
tooltipAnchor: [16, -28],
shadowSize: [41, 41]
shadowSize: [41, 41],
className: 'asset-marker-icon'
})
});
@ -67,6 +68,16 @@
dispatch('view', { assets: ids });
});
cluster.on('clustermouseover', (event: LeafletEvent) => {
if (event.sourceTarget.getChildCount() <= 10) {
event.sourceTarget.spiderfy();
}
});
cluster.on('clustermouseout', (event: LeafletEvent) => {
event.sourceTarget.unspiderfy();
});
for (let marker of markers) {
const leafletMarker = new AssetMarker(marker);
@ -91,7 +102,7 @@
<style>
:global(.leaflet-marker-icon) {
border-radius: 25%;
border-radius: 50%;
}
:global(.marker-cluster) {
@ -99,6 +110,15 @@
border-radius: 20px;
}
:global(.asset-marker-icon) {
border-radius: 50%;
object-fit: cover;
border: 1px solid rgb(69, 80, 169);
box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px,
rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px,
rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
}
:global(.marker-cluster div) {
width: 40px;
height: 40px;
@ -110,7 +130,16 @@
font-weight: bold;
background-color: rgb(236, 237, 246);
border: 1px solid rgb(69, 80, 169);
color: rgb(69, 80, 169);
box-shadow: rgba(5, 5, 122, 0.12) 0px 2px 4px 0px, rgba(4, 4, 230, 0.32) 0px 2px 16px 0px;
}
:global(.dark .marker-cluster div) {
background-color: #adcbfa;
border: 1px solid black;
color: black;
}
:global(.marker-cluster span) {