Marker: linguaggio visivo e stati #41

Activity

1. rkestt

   added

   wayfinder:taskmattpocock skillsmattpocock skills

   on Nov 6, 2026
2. rkestt

   added a parent issue on Nov 6, 2026

   • Mappa: sistema di marker leggibile e interazione (epica) #40
3. rkestt commented on Nov 6, 2026

   

   rkestt

   on Nov 6, 2026

   OwnerAuthor

   More actions

   Specifica di design (proposta @designer, token verificati in globals.css)

   Stati

   Stato	Forma / misura	Fill	Bordo	Icona (lucide)	Ombra	z
   Default	cerchio 24px (z14)	--bg-elevated	2px --accent	MapPin 12px --accent	0 2px 6px rgba(0,0,0,.25)	10
   Lobby attiva	cerchio 28px	--success	2px --bg-elevated	Users 14px --bg-elevated	success @40%	30
   Segnalato	cerchio 24px	--danger	2px --bg-elevated	AlertTriangle 12px --bg-elevated	danger @35%	20
   Preferito	default + anello 2px --accent offset 2px + badge Star 10px	—	—	—	—	25
   Posizione utente	dot 12px --accent + alone 28px --accent-subtle	--accent	2px --bg-elevated	nessuna	alone esterno	40
   Selezionato	32px	fill dello stato	3px --accent-hover	icona stato	0 4px 12px rgba(0,0,0,.35)	50

   Nessun bordo bianco fisso: era il difetto principale (spariva sui tile chiari, sfumava su dark).

   Densità per zoom

   • z ≤ 12: dot 12px senza icona, opacità .85 (solo colore di stato)
   • z 13–14: cerchio 24/28px con icona, nessuna label
   • z ≥ 15: 32px + pill con nome campo (max 18ch, ellipsis) sotto il marker
   • cluster quando ≥3 marker entro ~30px schermo: bubble 32px con count (--bg-surface, bordo --cool-muted), tap espande con scale-in 150ms; soglia scende a 2 marker a z ≤ 13

   Interazione

   • hover desktop: scale 1.08 + tooltip nome/stato dopo 120ms
   • focus tastiera: ring 2px --accent offset 3px, visibile in entrambi i temi; Enter/Space apre l'anteprima (non naviga)
   • tap: apre anteprima (vedi Click su campo: anteprima in mappa invece di navigazione #43); il marker resta "selezionato" finché è aperta; Escape chiude
   • prefers-reduced-motion: nessun pulse/scale, solo cambio colore/bordo
   • target touch ≥44px anche se il segno visivo è più piccolo

   Perché

   L'icona attuale (cerchio barrato) si legge come "vietato" e il triangolo di warning è un alfabeto diverso: due simboli incoerenti a 16px. Con la gerarchia per stato il pallino smette di essere anonimo e la lobby attiva diventa il segnale più forte, che è l'informazione che l'utente cerca aprendo la mappa.

   Nota: --accent-hover, --accent-subtle, --success esistono già in globals.css per entrambi i temi, quindi il sistema non richiede nuovi token.