shakespeare.diy 58aaeb7b16 Map: add "you are here" user-location marker (SkateSpots logo + pulse) ...

After Near Me centers the map, there was no indicator of where the user
actually is. Add a Google-Maps-style location marker, brand-flavored:

- Circular badge using the SkateSpots logo (public/images/user-location.png)
  with a red (#ff0040) ring, sitting at the user's exact coordinates.
- Pulsing translucent accuracy halo (ssPulse keyframes) so it reads as a
  live "you are here" and doubles as subtle motion.
- Rendered above all other markers (zIndexOffset), with a "You are here"
  popup. Created/moved/removed reactively from a new `userLocation` prop.

Wired MapPage's userLocation state through to SpotMap (lat/lon → lat/lng).
Marker image path uses import.meta.env.BASE_URL so it resolves on both
web ('/') and the Capacitor APK ('./').

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

2026-07-25 00:55:52 +07:00

2.8 MiB

1024x1024px

Raw History