From cb1b9276c878017357a6ef5569e9a53fcbd8fae5 Mon Sep 17 00:00:00 2001 From: Adam Soltys Date: Fri, 27 Feb 2026 11:44:26 -0800 Subject: map fixes --- src/components/LocationsMap.svelte | 113 ++++++++++--------------------------- 1 file changed, 29 insertions(+), 84 deletions(-) (limited to 'src/components') diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte index 2f942e85..279c477f 100644 --- a/src/components/LocationsMap.svelte +++ b/src/components/LocationsMap.svelte @@ -13,8 +13,6 @@ let search: string = $state(""); let clearSearch = (e: any) => (search = ""); - let currentIndex = -1; - let timeout: any = $state(); let full = () => { if (!document.fullscreenElement) { @@ -56,49 +54,38 @@ let selected = $state(); function select(m: any) { selected = m; - stopFlying(); - currentIndex = inview.indexOf(m); - flyToMarker(m, 500); - } - - async function flyToMarker(marker, duration = 1500) { - if (!marker) return; + if (m.category && !activeFilters.has(m.category)) { + activeFilters.add(m.category); + activeFilters = new Set(activeFilters); + } map.flyTo({ zoom: 12, - center: marker.getLngLat(), + center: m.getLngLat(), essential: true, - easing: function (t) { - return 1 - Math.pow(1 - t, 3); - }, - duration, + duration: 500, }); - - await new Promise((r) => setTimeout(r, duration)); - marker.getElement().style.display = ""; - marker.getElement().click(); - updateLabelVisibility(); - await new Promise((r) => setTimeout(r, 2500)); - - if (!timeout) return; + setTimeout(() => { + m.getElement().style.display = ""; + m.getElement().click(); + updateLabelVisibility(); + }, 500); } - let toggle = () => { - if (timeout) stopFlying(); - else startFlying(); - }; - let toggleList = () => { showList = !showList; showFilters = false; if (showList) scrollToFirstActive(); }; + function scrollToCategory(el: Element | null) { + if (el) el.scrollIntoView({ block: "start" }); + } + function scrollToFirstActive() { tick().then(() => { let target = lastToggledOn && activeFilters.has(lastToggledOn) ? lastToggledOn : activeFilters.values().next().value; if (!target) return; - let el = document.querySelector(`[data-category="${target}"]`); - if (el) el.scrollIntoView({ block: "start" }); + scrollToCategory(document.querySelector(`[data-category="${target}"]`)); }); } let showList = $state(true); @@ -146,7 +133,8 @@ if (turningOn) { tick().then(() => { let el = document.querySelector(`[data-category="${slug}"]`); - if (el) el.scrollIntoView({ block: "start" }); + if (!el) el = document.querySelector(`[data-category]`); + scrollToCategory(el); }); } } @@ -172,17 +160,6 @@ updateClusterSource(); }); - let currentPopup; - function startFlying() { - currentIndex++; - - for (let p in popups) popups[p].remove(); - if (currentIndex >= inview.length) currentIndex = 0; - flyToMarker(inview[currentIndex]); - - timeout = setTimeout(startFlying, 4000); - } - function debounce(func: any, delay: any) { let timeout: any; let immediate = true; @@ -203,20 +180,6 @@ }; } - function stopFlying() { - updateLabelVisibility(); - if (!timeout) return; - clearTimeout(timeout); - timeout = undefined; - - if (currentPopup) { - currentPopup.remove(); - } - - map.jumpTo({ center: map.getCenter(), zoom: map.getZoom() }); - map.off("moveend"); - } - let inview: any[] = $state([]); function syncMarkerVisibility() { @@ -250,7 +213,7 @@ marker.getElement().style.display = passesFilter ? "" : "none"; } - if (isInView && passesFilter) inview.push(marker); + if (isInView) inview.push(marker); } inview = inview.sort((a, b) => a.tags.name.localeCompare(b.tags.name)); @@ -338,7 +301,7 @@ let marker = new maplibre.Marker({ element: createCategoryMarker(tags) }) .setLngLat([lon, lat]) - .setPopup(new maplibre.Popup().setDOMContent(popupContainer)) + .setPopup(new maplibre.Popup({ offset: [0, -46] }).setDOMContent(popupContainer)) .addTo(map); marker.id = counter++; @@ -581,11 +544,6 @@ map.on("moveend", fetchOnMove); }); - map.on("mousedown", stopFlying); - map.on("touchstart", stopFlying); - map.on("wheel", stopFlying); - map.on("dragstart", stopFlying); - let resize = () => map && map.resize(); document.addEventListener("fullscreenchange", resize, false); @@ -609,7 +567,7 @@ let categoryLabelMap = Object.fromEntries(categoryLabels.map((c) => [c.slug, c.name])); let presentCategories = $derived( - categoryLabels.filter((c) => markers.some((m) => m.category === c.slug)), + categoryLabels.filter((c) => inview.some((m) => m.category === c.slug)), ); let allList = $derived( @@ -647,12 +605,10 @@
{#if showList} -
-
- -
+
+
+ +
{#if search}
- +
{#each groupedList as group} {@const active = activeFilters.has(group.slug)} {/each} {/each} +
{/if} {#if showFilters} @@ -731,30 +687,19 @@ {/if}
-
-- cgit v1.2.3