Skip to content

feat(mobile): full-viewport map with geolocation centering#942

Merged
koala73 merged 1 commit intomainfrom
feat/mobile-map-fullscreen
Mar 4, 2026
Merged

feat(mobile): full-viewport map with geolocation centering#942
koala73 merged 1 commit intomainfrom
feat/mobile-map-fullscreen

Conversation

@koala73
Copy link
Owner

@koala73 koala73 commented Mar 3, 2026

Summary

  • Make mobile map full-viewport by default (Google Maps-like experience)
  • Auto-center map on user's precise geolocation (with permission prompt)
  • Geolocation fires in parallel with region resolve to avoid blocking init
  • Map defaults to expanded on first visit; explicit collapse persists via localStorage
  • CSS uses 100dvh with safe-area insets, 100vh fallback for older browsers
  • Added viewport-fit=cover meta for notched device support

Files Changed

File Change
src/utils/user-location.ts New resolvePreciseUserCoordinates() helper
src/App.ts Parallel geolocation in init(), apply coords post-map-creation
src/app/panel-layout.ts Toggle default: null → expanded
src/styles/main.css Mobile .map-section → full-viewport with dvh + safe-area
index.html viewport-fit=cover on viewport meta
e2e/mobile-map-native.spec.ts Geolocation centering + viewport height tests

Test plan

  • npx tsc --noEmit passes (verified — zero errors)
  • Dev tools mobile toggle (iPhone 14 Pro Max): map fills ~85-90% of viewport
  • Geolocation prompt appears → Allow → map recenters to user area at zoom 6
  • Deny geolocation → falls back to timezone-based region
  • Collapse map → refresh → stays collapsed (localStorage)
  • URL with ?lat=40&lon=-74&zoom=5 → skips geolocation, uses URL coords
  • npx playwright test e2e/mobile-map-native.spec.ts — new + existing tests pass

Make mobile map feel like Google Maps: full-viewport by default,
auto-centered on user's precise location.

- Add resolvePreciseUserCoordinates() that actively prompts geolocation
- Fire geolocation in parallel with resolveUserRegion() to avoid blocking init
- Default mobile map to expanded (first visit), respect localStorage collapse
- CSS: 100dvh map height with safe-area-inset support + 100vh fallback
- Add viewport-fit=cover for notched device support
- E2E: geolocation centering + viewport height assertion tests
@vercel
Copy link

vercel bot commented Mar 3, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
worldmonitor Ready Ready Preview, Comment Mar 3, 2026 8:29pm
worldmonitor-finance Ready Ready Preview, Comment Mar 3, 2026 8:29pm
worldmonitor-happy Ready Ready Preview, Comment Mar 3, 2026 8:29pm
worldmonitor-startup Ready Ready Preview, Comment Mar 3, 2026 8:29pm

Request Review

@chatgpt-codex-connector
Copy link

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant