Mirrors/regenbogenkarte
2
0
Fork 0
mirror of https://github.com/Queer-Lexikon/regenbogenkarte synced 2024-11-21 19:53:07 +00:00
Code Issues Projects Releases Packages Wiki Activity

Extra Button für Location-Abfrage (#36)

Browse source 
* Add button for location access instead of automatically locating

Co-authored-by: Jasmin <98263758+chloe-the-catgirl@users.noreply.github.com>
This commit is contained in:
CherryKitten 2022-10-23 14:19:03 +02:00 committed by GitHub
parent 62ac82f230
commit fd8a843b91
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 55 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
index.html
View file

@ -59,6 +59,31 @@
class="focus:ring-accent-300 focus:border-accent-500 block w-full sm:text-sm border-gray-300 rounded text-neutral-900"
placeholder="Entenhausen"
/>
<button
class="locate-button inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
>
<!-- Heroicon: map-pin -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
/>
</svg>
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
</button>
<button
type="submit"
class="inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
@ -119,6 +144,31 @@
placeholder="Entenhausen"
aria-describedby="city-description"
/>
<button
class="locate-button inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"
>
<!-- Heroicon: map-pin -->
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
stroke-width="1.5"
stroke="currentColor"
class="w-6 h-6"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M15 10.5a3 3 0 11-6 0 3 3 0 016 0z"
/>
<path
stroke-linecap="round"
stroke-linejoin="round"
d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1115 0z"
/>
</svg>
<span class="sr-only">Meinen aktuellen Standort verwenden</span>
</button>
<button
type="submit"
class="inline-flex items-center px-4 py-2 border border-white text-sm font-medium rounded text-white bg-accent-800 hover:bg-accent-900 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-accent-600"

6
ts/map.ts
View file

@ -30,7 +30,11 @@ type Organisation = {
let map: L.Map;
export function initializeMap() {
map = L.map("map").setView([51.351, 10.454], MIN_ZOOM_LEVEL); // focus on germany
map.locate({ setView: true, maxZoom: DEFAULT_ZOOM_LEVEL });
document.querySelectorAll(".locate-button").forEach((item) => {
item.addEventListener("click", (event) => {
map.locate({ setView: true, maxZoom: DEFAULT_ZOOM_LEVEL });
});
});
L.tileLayer("https://{s}.tile.openstreetmap.de/{z}/{x}/{y}.png", {
maxZoom: MAX_ZOOM_LEVEL,