your personal website on atproto - mirror
blento.app
Merge pull request #185 from unbedenklich/fixMapCard
fixed focus in viewmode and zoom on mobile view
+52
-27
+51
-26
src/lib/cards/core/MapCard/Map.svelte
+51
-26
src/lib/cards/core/MapCard/Map.svelte
···
1
1
<script lang="ts">
2
2
import type { Item } from '$lib/types';
3
3
import { MapLibre, Projection, Marker } from 'svelte-maplibre-gl';
4
+
import type maplibregl from 'maplibre-gl';
4
5
5
-
let { item = $bindable() }: { item: Item } = $props();
6
+
let { item = $bindable(), isEditing = false }: { item: Item; isEditing?: boolean } = $props();
6
7
7
8
let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) });
8
9
let showAttribution = $state(false);
10
+
let map: maplibregl.Map | undefined = $state();
11
+
12
+
const fixedCenter = { lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) };
13
+
14
+
function handleZoom() {
15
+
if (!isEditing && map) {
16
+
map.setCenter(fixedCenter);
17
+
}
18
+
}
19
+
20
+
$effect(() => {
21
+
if (!isEditing && map) {
22
+
map.getCanvas().style.touchAction = 'pan-x pan-y';
23
+
}
24
+
});
9
25
</script>
10
26
11
-
<div class="absolute inset-0 isolate h-full w-full">
12
-
<MapLibre
13
-
class="h-full w-full"
14
-
style="https://tiles.openfreemap.org/styles/liberty"
15
-
zoom={item.cardData.zoom}
16
-
{center}
17
-
attributionControl={false}
18
-
dragPan={false}
19
-
dragRotate={false}
20
-
keyboard={false}
21
-
touchZoomRotate={true}
22
-
scrollZoom={true}
23
-
boxZoom={false}
24
-
pitchWithRotate={false}
25
-
touchPitch={false}
26
-
>
27
-
<Projection type="globe" />
27
+
<div
28
+
class="absolute inset-0 isolate h-full w-full"
29
+
onfocusin={(e) => {
30
+
if (!isEditing && e.target instanceof HTMLElement) e.target.blur();
31
+
}}
32
+
>
33
+
<div class="h-full w-full">
34
+
<MapLibre
35
+
bind:map
36
+
class="h-full w-full"
37
+
style="https://tiles.openfreemap.org/styles/liberty"
38
+
zoom={item.cardData.zoom}
39
+
{center}
40
+
attributionControl={false}
41
+
dragPan={isEditing}
42
+
dragRotate={false}
43
+
keyboard={false}
44
+
touchZoomRotate={true}
45
+
scrollZoom={true}
46
+
boxZoom={false}
47
+
pitchWithRotate={false}
48
+
touchPitch={false}
49
+
onzoom={handleZoom}
50
+
>
51
+
<Projection type="globe" />
28
52
29
-
<Marker bind:lnglat={center}>
30
-
{#snippet content()}
31
-
<div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
32
-
<div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
33
-
</div>
34
-
{/snippet}
35
-
</Marker>
36
-
</MapLibre>
53
+
<Marker bind:lnglat={center}>
54
+
{#snippet content()}
55
+
<div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
56
+
<div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
57
+
</div>
58
+
{/snippet}
59
+
</Marker>
60
+
</MapLibre>
61
+
</div>
37
62
38
63
{#snippet infoIcon()}
39
64
<svg