Bernt
bae705aa97
- Add NFC ePassport roadmap (ICAO 9303, eIDAS) - Add TensorFlow.js edge face detection (BlazeFace) - Add structured audit logger (GDPR-compliant) - Risk scoring support Part of KYC Apple Native UX v1.1.0
190 lines
5.7 KiB
Markdown
190 lines
5.7 KiB
Markdown
# Feature Spec: GPS-liknande uppdragsnavigering
|
|
**Status:** Backlog
|
|
**Prioritet:** Hög
|
|
**Tilldelad:** Johan
|
|
**Skapad:** 2026-06-16
|
|
**Källa:** Erik UX-prompt
|
|
|
|
---
|
|
|
|
## Översikt
|
|
|
|
När en Zoomer accepterar eller öppnar ett uppdrag ska kartan växla till ett navigeringsläge som efterliknar premium fordons-GPS (VW/Audi/BMW) kombinerat med Uber/Bolt-känsla för uppdragskort.
|
|
|
|
---
|
|
|
|
## Flöde
|
|
|
|
```
|
|
Uppdragslista → Klick på uppdrag → Uppdragskort (flytande)
|
|
↓
|
|
[Lås upp uppdrag] [Starta navigation] [Visa alternativa rutter]
|
|
↓
|
|
Navigeringsläge (turn-by-turn)
|
|
```
|
|
|
|
---
|
|
|
|
## Steg 1 — Uppdragskort (flytande overlay)
|
|
|
|
Visas när användaren klickar på ett uppdrag på kartan.
|
|
|
|
### Innehåll
|
|
- Titel
|
|
- Adress
|
|
- Avstånd från användaren (beräknat från GPS)
|
|
- Beräknad restid
|
|
- Beräknad ankomsttid (ETA)
|
|
|
|
### Exempel
|
|
```
|
|
📍 Fasadfotografering — Storgatan 12
|
|
14,2 km · 18 min · ETA 14:37
|
|
```
|
|
|
|
### Knappar
|
|
| Knapp | Funktion |
|
|
|-------|----------|
|
|
| **Lås upp uppdrag** | Reserverar uppdraget, drar kredit/visar pris |
|
|
| **Starta navigation** | Startar turn-by-turn |
|
|
| **Visa alternativa rutter** | Expanderar ruttval på kartan |
|
|
|
|
---
|
|
|
|
## Steg 2 — Kartbeteende vid öppnat uppdrag
|
|
|
|
### Auto-zoom & centrering
|
|
- Hämta GPS-position i realtid (`navigator.geolocation.watchPosition`)
|
|
- Zooma automatiskt till nivå där **både** Zoomer och destination syns
|
|
- Centrera kartan så hela rutten ryms med padding (~15% marginal)
|
|
- Använd `fitBounds()` med koordinater för [user_pos, destination]
|
|
|
|
### Markörer
|
|
- **Zoomer:** Blå pulsande cirkel (standard Mapbox user location dot)
|
|
- **Destination:** Uppdragets ikon/logotyp (custom marker)
|
|
|
|
### Rutt-ritning
|
|
- Hämta rutt från routing-API (se nedan)
|
|
- Rita primär rutt: solid linje, blå (#0066FF), 4px
|
|
- Rita alternativa rutter: grå, 2px, klickbar
|
|
- Visa avstånd + tid på varje ruttlinje
|
|
|
|
---
|
|
|
|
## Steg 3 — Navigeringsläge (turn-by-turn)
|
|
|
|
Aktiveras via "Starta navigation".
|
|
|
|
### Kartbeteende
|
|
- Rotera kartan i färdriktningen (heading-lock)
|
|
- 3D-perspektiv (pitch: ~45°)
|
|
- Zooma in till ~200m framförhållning
|
|
- Kontinuerlig positions-uppdatering
|
|
|
|
### UI-overlay (top bar)
|
|
```
|
|
┌─────────────────────────────────────────┐
|
|
│ ↰ Sväng vänster om 180 m │
|
|
│ Kungsgatan │
|
|
├──────────────┬──────────────┬───────────┤
|
|
│ 12 min │ 2,4 km │ ETA 14:37│
|
|
└──────────────┴──────────────┴───────────┘
|
|
```
|
|
|
|
### Funktioner
|
|
- Next maneuver (ikon + text + avstånd)
|
|
- Återstående tid, avstånd, ETA — uppdateras live
|
|
- **Auto-reroute** om avvikelse > 50m från rutten
|
|
- "Anlänt" när Zoomer är inom ~30m av destination
|
|
|
|
---
|
|
|
|
## Tech Stack
|
|
|
|
### Routing API — rekommendation: **Mapbox Directions API**
|
|
|
|
Anledning: Appen kör redan troligen Mapbox för 3D-kartan. Unified billing.
|
|
|
|
```
|
|
GET https://api.mapbox.com/directions/v5/mapbox/walking/{lon1},{lat1};{lon2},{lat2}
|
|
?alternatives=true
|
|
&geometries=geojson
|
|
&steps=true
|
|
&language=sv
|
|
&access_token={MAPBOX_TOKEN}
|
|
```
|
|
|
|
Returvärden vi använder:
|
|
- `routes[].duration` → restid (sekunder)
|
|
- `routes[].distance` → avstånd (meter)
|
|
- `routes[].geometry` → GeoJSON för ritning
|
|
- `routes[].legs[].steps[]` → turn-by-turn instruktioner
|
|
|
|
**Alternativ om Mapbox ej används:**
|
|
- Google Routes API (dyrare, men bättre ETA i Sverige)
|
|
- OSRM self-hosted (gratis, kräver infra)
|
|
|
|
### Kostnad Mapbox Directions
|
|
- Gratis: 100,000 requests/mån
|
|
- Sedan: $1/1,000 requests
|
|
- Zoomer gör ~1 request per uppdrag → vid 10,000 uppdrag/mån = $10
|
|
|
|
### Turn-by-turn
|
|
Mapbox Navigation SDK (iOS/Android) ger turn-by-turn gratis ovanpå Directions API.
|
|
|
|
---
|
|
|
|
## Visuell design
|
|
|
|
### Uppdragskort
|
|
- Mörkt tema (#0a0a0a bakgrund, vit text)
|
|
- Bottom sheet / sliding panel (60% skärmhöjd)
|
|
- Mjuk spring-animation vid öppning (300ms)
|
|
- Samma designspråk som nuvarande uppdragskort i appen
|
|
|
|
### Navigeringsläge
|
|
- Mörkt tema
|
|
- Top bar: svart, frostad glaseffekt
|
|
- Manöverikoner: vita, Mapbox standard set
|
|
- 3D-perspektiv: pitch 45°, bearing = heading
|
|
- Smooth rotation vid svängar
|
|
|
|
### Animationer
|
|
- `fitBounds()` med `animate: true, duration: 800ms` vid öppning
|
|
- Smooth heading-rotation: interpolera bearing varje GPS-tick
|
|
- Flytande transition uppdragsvy → navigation: 400ms
|
|
|
|
---
|
|
|
|
## Implementation — prioriterad ordning
|
|
|
|
1. **Routing API-integration** — hämta rutt + rita på karta
|
|
2. **Uppdragskort** — avstånd, restid, ETA
|
|
3. **Auto-zoom/fitBounds** — när uppdrag öppnas
|
|
4. **Alternativa rutter** — visa + väljbart
|
|
5. **Turn-by-turn UI** — top bar med manöver + stats
|
|
6. **Heading-rotation** — karta roterar med färdriktning
|
|
7. **Auto-reroute** — vid avvikelse
|
|
|
|
---
|
|
|
|
## Öppna frågor till Johan
|
|
|
|
- [ ] Vilken kart-lib använder appen? (Mapbox GL, MapLibre, Google Maps?)
|
|
- [ ] Finns det redan ett Mapbox-konto/token?
|
|
- [ ] iOS, Android, eller React Native/Flutter?
|
|
- [ ] Ska navigation köras in-app eller via deep link till Google Maps/Apple Maps?
|
|
|
|
---
|
|
|
|
## Acceptanskriterier
|
|
|
|
- [ ] Uppdragskort visar korrekt avstånd, restid och ETA
|
|
- [ ] Rutt ritas upp inom 2s efter uppdrag öppnas
|
|
- [ ] Alternativa rutter visas och är klickbara
|
|
- [ ] Navigeringsläge roterar kartan i färdriktning
|
|
- [ ] Auto-reroute fungerar vid avvikelse
|
|
- [ ] ETA uppdateras live under navigation
|
|
- [ ] "Anlänt"-signal vid ~30m från destination
|
|
- [ ] Fungerar offline (cached tiles) för basic kartvisning
|