Skip to content

feat(map): make zoom-in message clickable #664

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
escapedcat wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat(map): make zoom-in message clickable #664

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions src/routes/map/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
CLUSTERING_DISABLED_ZOOM,
BOOSTED_CLUSTERING_MAX_ZOOM,
MERCHANT_LIST_LOW_ZOOM,
MERCHANT_LIST_MIN_ZOOM,
MERCHANT_LIST_MAX_ITEMS,
NEARBY_RADIUS_MULTIPLIER,
MAX_LOADED_MARKERS,
Expand Down Expand Up @@ -877,6 +878,26 @@
navigateToPlace(place, { targetZoom: 19 });
};

// Zoom to nearby level (when user clicks "zoom in" message)
const zoomToNearbyLevel = () => {
if (!map || !browser) return;

trackEvent('zoom_in_click');

// Get current map center and zoom to MERCHANT_LIST_MIN_ZOOM (15)
const currentCenter = map.getCenter();
const { visibleCenterX, mapSize } = getPanelOffset();

// Calculate offset at target zoom level
const offsetX = mapSize.x / 2 - visibleCenterX;
const targetPoint = map.project([currentCenter.lat, currentCenter.lng], MERCHANT_LIST_MIN_ZOOM);
const offsetPoint = leaflet.point(targetPoint.x + offsetX, targetPoint.y);
const offsetLatLng = map.unproject(offsetPoint, MERCHANT_LIST_MIN_ZOOM);

// Animate to the new view with panel offset compensation
map.setView(offsetLatLng, MERCHANT_LIST_MIN_ZOOM, { animate: true, duration: 0.3 });
};

const initializeElements = async () => {
if (elementsLoaded) {
return;
Expand Down Expand Up @@ -1347,6 +1368,7 @@
<MerchantListPanel
onPanToNearbyMerchant={panToNearbyMerchant}
onZoomToSearchResult={zoomToSearchResult}
onZoomToNearbyLevel={zoomToNearbyLevel}
onFitSearchResultBounds={fitBoundsToSearchResults}
onHoverStart={(place) => highlightMarker(loadedMarkers, place.id)}
onHoverEnd={(place) => {
Expand Down
18 changes: 10 additions & 8 deletions src/routes/map/components/MerchantListPanel.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,8 @@
export let onPanToNearbyMerchant: ((place: Place) => void) | undefined = undefined;
// Callback to zoom to a search result (may be far away, need to fly there)
export let onZoomToSearchResult: ((place: Place) => void) | undefined = undefined;
// Callback to zoom to nearby level (when user clicks "zoom in" message)
export let onZoomToNearbyLevel: (() => void) | undefined = undefined;
// Callbacks for hover highlighting
export let onHoverStart: ((place: Place) => void) | undefined = undefined;
export let onHoverEnd: ((place: Place) => void) | undefined = undefined;
Expand Down Expand Up @@ -456,15 +458,15 @@
</ul>
{/if}
{:else if showZoomInMessage}
<!-- Nearby mode: zoom in message -->
<!-- Nearby mode: zoom in message (only icon is clickable) -->
<div class="flex flex-col items-center justify-center gap-3 px-4 py-12 text-center">
<Icon
w="48"
h="48"
icon="zoom_in"
type="material"
class="text-gray-300 dark:text-white/30"
/>
<button
on:click={onZoomToNearbyLevel}
class="rounded-full p-2 transition-colors hover:bg-gray-100 focus:ring-2 focus:ring-primary/20 focus:outline-none dark:hover:bg-white/10"
aria-label="Zoom in to see nearby merchants"
>
<Icon w="48" h="48" icon="zoom_in" type="material" class="text-link dark:text-white" />
</button>
<div>
<p class="text-sm font-medium text-primary dark:text-white">
Zoom in to see nearby merchants
Expand Down
Loading