atmo.rsvp
Clean up map component and improve attibution styling
+41
-121
+22
-1
src/app.css
+22
-1
src/app.css
···
9
9
@import '@foxui/core/theme.css';
10
10
11
11
@source "../node_modules/@foxui";
12
-
12
+
13
+
.maplibregl-ctrl-bottom-left > .maplibregl-ctrl.maplibregl-ctrl-attrib {
14
+
font: 7px / 10px monospace;
15
+
border-top-right-radius: 0.5rem;
16
+
border: none;
17
+
box-shadow: none;
18
+
min-height: 1rem;
19
+
background-color: rgba(0, 0, 0, 0.45);
20
+
}
21
+
22
+
.maplibregl-ctrl-attrib-button {
23
+
display: none;
24
+
}
25
+
26
+
.maplibregl-ctrl.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner {
27
+
color: rgba(255, 255, 255, 0.85);
28
+
line-height: 1rem;
29
+
}
30
+
31
+
.maplibregl-ctrl.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a {
32
+
color: inherit;
33
+
}
+19
-120
src/lib/components/Map.svelte
+19
-120
src/lib/components/Map.svelte
···
1
1
<script lang="ts">
2
-
import { MapLibre, Projection, Marker } from 'svelte-maplibre-gl';
3
-
import type maplibregl from 'maplibre-gl';
2
+
import { MapLibre, Projection, Marker, AttributionControl } from 'svelte-maplibre-gl';
3
+
import maplibregl from 'maplibre-gl';
4
4
5
-
let {
6
-
lat,
7
-
lng,
8
-
zoom = 14
9
-
}: {
10
-
lat: number;
11
-
lng: number;
12
-
zoom?: number;
13
-
} = $props();
5
+
let { lat, lng, zoom = 11 }: { lat: number; lng: number; zoom?: number } = $props();
14
6
15
-
let center = $state({ lng, lat });
16
-
let showAttribution = $state(false);
17
7
let map: maplibregl.Map | undefined = $state();
18
-
19
-
const fixedCenter = { lng, lat };
20
-
21
-
function handleZoom() {
22
-
if (map) {
23
-
map.setCenter(fixedCenter);
24
-
}
25
-
}
26
-
27
-
$effect(() => {
28
-
if (map) {
29
-
map.getCanvas().style.touchAction = 'pan-x pan-y';
30
-
}
31
-
});
32
8
</script>
33
9
34
-
<div
35
-
class="relative isolate h-full w-full overflow-hidden rounded-xl"
36
-
onfocusin={(e) => {
37
-
if (e.target instanceof HTMLElement) e.target.blur();
38
-
}}
10
+
<MapLibre
11
+
bind:map
12
+
class="h-full w-full overflow-hidden rounded-xl"
13
+
style="https://tiles.openfreemap.org/styles/liberty"
14
+
{zoom}
15
+
center={[lng, lat]}
16
+
attributionControl={false}
39
17
>
40
-
<MapLibre
41
-
bind:map
42
-
class="h-full w-full"
43
-
style="https://tiles.openfreemap.org/styles/liberty"
44
-
{zoom}
45
-
{center}
46
-
attributionControl={false}
47
-
dragPan={false}
48
-
dragRotate={false}
49
-
keyboard={false}
50
-
touchZoomRotate={true}
51
-
scrollZoom={true}
52
-
boxZoom={false}
53
-
pitchWithRotate={false}
54
-
touchPitch={false}
55
-
onzoom={handleZoom}
56
-
>
57
-
<Projection type="globe" />
58
-
59
-
<Marker bind:lnglat={center}>
60
-
{#snippet content()}
61
-
<div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
62
-
<div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
63
-
</div>
64
-
{/snippet}
65
-
</Marker>
66
-
</MapLibre>
67
-
68
-
{#snippet infoIcon()}
69
-
<svg
70
-
xmlns="http://www.w3.org/2000/svg"
71
-
width="24"
72
-
height="24"
73
-
fill-rule="evenodd"
74
-
viewBox="0 0 20 20"
75
-
>
76
-
<path
77
-
d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0"
78
-
/>
79
-
</svg>
80
-
{/snippet}
81
-
82
-
{#if showAttribution}
83
-
<div
84
-
class="absolute right-2.5 bottom-2.5 z-10 rounded-xl bg-white text-black"
85
-
style="width: calc(100% - 20px); max-width: 12rem;"
86
-
>
87
-
<button
88
-
class="float-right flex size-6 cursor-pointer items-center justify-center rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]"
89
-
onclick={() => (showAttribution = false)}
90
-
aria-label="Toggle attribution"
91
-
>
92
-
{@render infoIcon()}
93
-
</button>
94
-
<div class="p-2 text-left text-xs leading-snug text-black/75">
95
-
<a
96
-
href="https://openfreemap.org"
97
-
target="_blank"
98
-
rel="noopener noreferrer"
99
-
class="text-black/75 no-underline hover:underline"
100
-
onclick={(e) => e.stopPropagation()}>OpenFreeMap</a
101
-
>
102
-
<a
103
-
href="https://openmaptiles.org"
104
-
target="_blank"
105
-
rel="noopener noreferrer"
106
-
class="text-black/75 no-underline hover:underline"
107
-
onclick={(e) => e.stopPropagation()}>© OpenMapTiles</a
108
-
>
109
-
Data from
110
-
<a
111
-
href="https://www.openstreetmap.org/copyright"
112
-
target="_blank"
113
-
rel="noopener noreferrer"
114
-
class="text-black/75 no-underline hover:underline"
115
-
onclick={(e) => e.stopPropagation()}>OpenStreetMap</a
116
-
>
18
+
<AttributionControl position="bottom-left" compact={false} />
19
+
<Projection type="globe" />
20
+
<Marker lnglat={[lng, lat]}>
21
+
{#snippet content()}
22
+
<div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
23
+
<div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
117
24
</div>
118
-
</div>
119
-
{:else}
120
-
<button
121
-
class="absolute right-2.5 bottom-2.5 z-10 flex size-6 items-center justify-center rounded-full bg-white text-black"
122
-
onclick={() => (showAttribution = true)}
123
-
aria-label="Toggle attribution"
124
-
>
125
-
{@render infoIcon()}
126
-
</button>
127
-
{/if}
128
-
</div>
25
+
{/snippet}
26
+
</Marker>
27
+
</MapLibre>