Skip to content

feat(map): native mobile map experience#619

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

feat(map): native mobile map experience#619
koala73 merged 1 commit intomainfrom
feat/native-mobile-map

Conversation

@koala73
Copy link
Owner

@koala73 koala73 commented Mar 1, 2026

Summary

  • URL restore fix: lat/lon now override view center when explicitly in URL; handles 0° coordinates correctly
  • Touch scroll fix: 8px movement threshold before activating drag, preventDefault() once active; inertial animation on touchend
  • Location bootstrap: timezone-first region detection (no permission prompt), geolocation upgrade only if pre-granted
  • DeckGL on mobile: capability detection replaces blanket mobile block; low-memory guard (deviceMemory < 3GB)
  • DeckGL state sync: moveend/zoomend handlers now emit state changes for URL sync
  • Breakpoint fix: JS <<= to match CSS max-width: 768px
  • SVG country-click: click handler with CSS transform inversion → D3 projection invert → country detection
  • fitCountry(): DeckGL uses MapLibre fitBounds(), SVG uses projection-based pixel span calculation
  • E2E tests: timezone startup, URL restore, touch scroll, breakpoint consistency at 768px

Test plan

  • Open ?view=mena&lat=35&lon=50&zoom=5 — map centers on (35,50) not MENA preset
  • Open ?lat=0&lon=0&zoom=4 — map centers at equator/prime meridian
  • On phone, single-finger drag on map pans without scrolling page
  • Clear URL params on mobile — map starts in user's region (no permission prompt)
  • Open on phone — DeckGL with native pinch/momentum gestures
  • Pan/zoom on mobile DeckGL → URL params update
  • At exactly 768px width — JS and CSS agree on mobile
  • Force SVG mode → tap country → country brief opens
  • map.fitCountry('IR') — camera animates to Iran bounds
  • npx playwright test e2e/mobile-map-native.spec.ts

…ull feature parity

- Fix URL restore: lat/lon now override view center when explicitly provided
- Fix touch scroll: 8px threshold before drag activation, preventDefault once active
- Add location bootstrap: timezone-first detection, optional geolocation upgrade
- Enable DeckGL on mobile with deviceMemory capability guard
- Add DeckGL state sync on moveend/zoomend for URL param updates
- Fix breakpoint off-by-one: JS now uses <= to match CSS max-width: 768px
- Add country-click on SVG fallback with CSS transform inversion
- Add fitCountry() to both map engines (DeckGL uses fitBounds, SVG uses projection)
- Add SVG inertial touch animation with exponential velocity decay
- Add mobile map e2e tests for timezone, URL restore, touch, and breakpoint
@vercel
Copy link

vercel bot commented Mar 1, 2026

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

Project Deployment Actions Updated (UTC)
worldmonitor Building Building Preview, Comment Mar 1, 2026 0:32am
worldmonitor-finance Building Building Preview, Comment Mar 1, 2026 0:32am
worldmonitor-happy Building Building Preview, Comment Mar 1, 2026 0:32am
worldmonitor-startup Building Building Preview, Comment Mar 1, 2026 0:32am

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