Skip to content

Commit dbc97a7

Browse files
GGBRWGGBRW
authored
Merge pull request #19 from allmaps/dev
Dev
2 parents 166ea01 + 5a2c5e9 commit dbc97a7

26 files changed

+1953
-1030
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
"vitest": "^3.0.0"
5252
},
5353
"dependencies": {
54-
"@allmaps/maplibre": "1.0.0-beta.30",
55-
"@allmaps/render": "1.0.0-beta.68",
54+
"@allmaps/maplibre": "1.0.0-beta.40",
55+
"@allmaps/render": "1.0.0-beta.79",
5656
"@fortawesome/fontawesome-free": "^6.7.2",
5757
"@maplibre/maplibre-gl-style-spec": "^24.3.1",
5858
"@protomaps/basemaps": "^5.7.0",

‎pnpm-lock.yaml‎

Lines changed: 230 additions & 146 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app.css‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
@import 'tailwindcss';
22

3+
:root {
4+
height: -webkit-fill-available;
5+
}
6+
7+
html, body {
8+
margin: 0;
9+
padding: 0;
10+
width: 100%;
11+
height: 100%;
12+
min-height: -webkit-fill-available;
13+
overflow: hidden;
14+
15+
touch-action: none;
16+
overscroll-behavior: none;
17+
18+
user-select: none;
19+
-webkit-user-select: none;
20+
}
21+
22+
323
.maplibregl-ctrl-bottom-left, .maplibregl-ctrl-bottom-right {
424
}
525

‎src/lib/AboutPanel.svelte‎

Lines changed: 40 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,47 @@
11
<script lang="ts">
2-
import { ImagesSquare, X } from 'phosphor-svelte';
3-
import { fly, fade } from 'svelte/transition';
4-
let { visible = $bindable() } = $props();
5-
2+
import { ImagesSquare, X } from 'phosphor-svelte';
3+
import { fly, fade } from 'svelte/transition';
4+
let { visible = $bindable() } = $props();
65
</script>
76

8-
<svelte:window
9-
onkeydown={(e) => { if(e.key == "Escape") visible = false }}
10-
></svelte:window>
7+
<svelte:window
8+
onkeydown={(e) => {
9+
if (e.key == 'Escape') visible = false;
10+
}}
11+
/>
1112

1213
{#if visible}
13-
<div
14-
class="fixed top-0 left-0 w-full h-full bg-[#33336688] z-1000"
15-
onclick={() => visible = false}
16-
transition:fade
17-
></div>
18-
<div
19-
class="z-1001 absolute top-50 left-1/2 w-120 -translate-x-1/2 overflow-hidden flex flex-col items-center p-6 shadow-lg rounded-[8px] border-gray-200 bg-white"
20-
transition:fly={{ y: -20, duration: 250 }}
21-
>
14+
<div
15+
class="fixed top-0 left-0 z-1000 h-full w-full bg-[#33336688]"
16+
onclick={() => (visible = false)}
17+
onkeydown={(e) => e.stopPropagation()}
18+
transition:fade
19+
></div>
20+
<div
21+
class="
22+
fixed top-1/2 left-1/2
23+
z-1001 flex
24+
w-[90vw] max-w-120 -translate-x-1/2 -translate-y-1/2
25+
flex-col items-center overflow-auto rounded-[8px] border border-gray-200
26+
bg-white px-4 py-8 shadow-lg shadow-lg sm:px-6 md:px-8
27+
"
28+
transition:fly={{ y: -20, duration: 250 }}
29+
>
30+
<button
31+
onclick={() => (visible = false)}
32+
class="absolute top-4 right-4 cursor-pointer rounded-[8px] bg-[#ff44aa22] p-2 opacity-50 transition-opacity hover:opacity-100"
33+
>
34+
<X size="24" color="#f4a" weight="bold" class="opacity-67"></X>
35+
</button>
2236

23-
<button
24-
onclick={() => visible = false}
25-
class="absolute top-4 right-4 bg-[#ff44aa22] opacity-50 rounded-[8px] p-2 cursor-pointer hover:opacity-100 transition-opacity"
26-
>
27-
<X size="24" color="#f4a" weight="bold" class="opacity-67"></X>
28-
</button>
37+
<h1 class="text-[22px] font-[700] text-[#336]">Over Watertijdreis</h1>
2938

30-
<h1 class="text-[#336] font-[700] text-[22px]">Over Watertijdreis</h1>
31-
32-
<div class="p-8 mt-2 text-[#336]">
33-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
34-
</div>
35-
</div>
36-
{/if}
39+
<div class="mt-2 p-8 text-[#336]">
40+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
41+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
42+
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
43+
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
44+
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
45+
</div>
46+
</div>
47+
{/if}

‎src/lib/Geocoder.svelte‎

Lines changed: 80 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
<script lang="ts">
2-
import { ArrowBendDownLeft, ArrowElbowDownLeft, ArrowUDownLeft, MagnifyingGlass, MapPinSimple } from 'phosphor-svelte';
2+
import {
3+
ArrowBendDownLeft,
4+
ArrowElbowDownLeft,
5+
ArrowUDownLeft,
6+
MagnifyingGlass,
7+
MapPinSimple
8+
} from 'phosphor-svelte';
39
import { throttle } from 'lodash-es';
410
import type { GeocoderProvider } from '$lib/geocoder/provider';
511
import type { GeojsonPoint } from '@allmaps/types';
@@ -55,83 +61,83 @@
5561
}
5662
5763
$effect(() => {
58-
if(visible) inputEl.focus();
59-
else inputValue = "";
60-
})
64+
if (visible) inputEl.focus();
65+
else inputValue = '';
66+
});
6167
</script>
6268

6369
{#if visible}
64-
<div
65-
class="fixed top-0 left-0 w-full h-full bg-[#33336688] z-1000"
66-
onclick={() => visible = false}
67-
transition:fade
68-
></div>
69-
<div
70-
class="z-1001 absolute top-50 left-1/2 w-120 -translate-x-1/2 overflow-hidden shadow-lg rounded-[8px] border-gray-200 bg-white"
71-
transition:fly={{ y: -20, duration: 250 }}
72-
>
73-
<div class="relative w-full">
74-
<input
75-
bind:this={inputEl}
76-
bind:value={inputValue}
77-
onkeydown={(e) => {
78-
if(e.key == "Escape") visible = false;
79-
else if(e.key == "Enter" && features) { flyToFeature(features[selectedFeature]); visible = false }
80-
else if(e.key == "ArrowDown") selectedFeature = Math.min(++selectedFeature, features.length - 1)
81-
else if(e.key == "ArrowUp") selectedFeature = Math.max(--selectedFeature, 0)
82-
}}
83-
class="px-4 py-4 pl-14 font-[500] text-[20px] w-full rounded-[16px] pr-2 pl-10 focus:z-10 focus:outline-none"
84-
type="search"
85-
spellcheck="false"
86-
autocomplete="off"
87-
autofocus
88-
placeholder="Zoek een locatie..."
89-
/>
70+
<div
71+
class="fixed top-0 left-0 z-1000 h-full w-full bg-[#33336688]"
72+
onclick={() => (visible = false)}
73+
transition:fade
74+
></div>
75+
<div
76+
class="
77+
fixed top-1/4 left-1/2 z-1001
78+
w-[90vw] max-w-120 -translate-x-1/2
79+
overflow-hidden rounded-[8px] border-gray-200 bg-white shadow-lg"
80+
transition:fly={{ y: -20, duration: 250 }}
81+
>
82+
<div class="relative w-full">
83+
<input
84+
bind:this={inputEl}
85+
bind:value={inputValue}
86+
onkeydown={(e) => {
87+
e.stopPropagation();
88+
if (e.key == 'Escape') visible = false;
89+
else if (e.key == 'Enter' && features) {
90+
flyToFeature(features[selectedFeature]);
91+
visible = false;
92+
} else if (e.key == 'ArrowDown')
93+
selectedFeature = Math.min(++selectedFeature, features.length - 1);
94+
else if (e.key == 'ArrowUp') selectedFeature = Math.max(--selectedFeature, 0);
95+
}}
96+
class="w-full rounded-[16px] px-4 py-4 pr-2 pl-10 pl-14 text-[20px] font-[500] focus:z-10 focus:outline-none"
97+
type="search"
98+
spellcheck="false"
99+
autocomplete="off"
100+
autofocus
101+
placeholder="Zoek een locatie..."
102+
/>
90103

91-
<div class="pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-gray-400">
92-
<MagnifyingGlass size="24" color="#f4a"></MagnifyingGlass>
104+
<div class="pointer-events-none absolute top-1/2 left-4 -translate-y-1/2 text-gray-400">
105+
<MagnifyingGlass size="24" color="#f4a"></MagnifyingGlass>
106+
</div>
93107
</div>
94-
</div>
95-
96-
{#if inputValue !== ''}
97-
<ul
98-
transition:slide
99-
class="relative left-0 top-full text-[#336] z-20 w-full overflow-hidden"
100-
>
101-
{#if features.length > 0}
102-
{#each features as feature, i}
103-
<li
104-
class="flex cursor-pointer items-center justify-between px-4 py-3 text-[16px] font-[500] hover:bg-[#eef]"
105-
style:background={i == selectedFeature ? "#eef" : "transparent"}
106-
>
107-
<!-- <MapPinSimple size="20" class="inline"></MapPinSimple> -->
108-
<div class="truncate">
109-
{feature.properties.label}
110-
{#if feature.properties.alt}
111-
<span class="text-gray-500 before:mx-1 before:content-['·']">
112-
{feature.properties.alt}
113-
</span>
114-
{/if}
115-
</div>
116108

117-
{#if i == selectedFeature}
118-
<kbd
119-
class="bg-background-alt text-xxs pointer-events-none flex inline items-center gap-1 rounded-sm border px-1 font-sans font-medium opacity-50 shadow-[0px_2px_0px_0px_#59595b] select-none dark:border-[rgba(0,_0,_0,_0.10)] dark:bg-white dark:shadow-[0px_2px_0px_0px_#B8B8B8]"
120-
>
121-
<span class="text-foreground-alt text-[12px]">Enter</span>
122-
<ArrowElbowDownLeft size="16" class="inline"></ArrowElbowDownLeft>
123-
</kbd
109+
{#if inputValue !== ''}
110+
<ul transition:slide class="relative top-full left-0 z-20 w-full overflow-hidden text-[#336]">
111+
{#if features.length > 0}
112+
{#each features as feature, i}
113+
<li
114+
class="flex cursor-pointer items-center justify-between px-4 py-3 text-[16px] font-[500] hover:bg-[#eef]"
115+
style:background={i == selectedFeature ? '#eef' : 'transparent'}
124116
>
125-
{/if}
126-
127-
</li>
128-
{/each}
129-
{:else}
130-
<li class="px-4 py-3 text-sm text-[#33336688]">
131-
Geen resultaten gevonden
132-
</li>
133-
{/if}
134-
</ul>
135-
{/if}
136-
</div>
137-
{/if}
117+
<!-- <MapPinSimple size="20" class="inline"></MapPinSimple> -->
118+
<div class="truncate">
119+
{feature.properties.label}
120+
{#if feature.properties.alt}
121+
<span class="text-gray-500 before:mx-1 before:content-['·']">
122+
{feature.properties.alt}
123+
</span>
124+
{/if}
125+
</div>
126+
127+
{#if i == selectedFeature}
128+
<kbd
129+
class="bg-background-alt text-xxs pointer-events-none flex inline items-center gap-1 rounded-sm border px-1 font-sans font-medium opacity-50 shadow-[0px_2px_0px_0px_#59595b] select-none dark:border-[rgba(0,_0,_0,_0.10)] dark:bg-white dark:shadow-[0px_2px_0px_0px_#B8B8B8]"
130+
>
131+
<span class="text-foreground-alt text-[12px]">Enter</span>
132+
<ArrowElbowDownLeft size="16" class="inline"></ArrowElbowDownLeft>
133+
</kbd>
134+
{/if}
135+
</li>
136+
{/each}
137+
{:else}
138+
<li class="px-4 py-3 text-sm text-[#33336688]">Geen resultaten gevonden</li>
139+
{/if}
140+
</ul>
141+
{/if}
142+
</div>
143+
{/if}

0 commit comments

Comments
 (0)