/** * V1.52 — IL CONTRATTO DEL MARKER. * * IL PROBLEMA CHE CHIUDE * Le icone predefinite sono PNG 192x192. La loro misura viveva in una * regola dentro editor.css — un foglio editoriale — e quando quel file * e' stato eliminato i marker della mappa sono diventati nove volte * troppo grandi. Una immagine da 192px non deve MAI dipendere da una * classe nascosta in un CSS di pagina. * * Da qui in avanti `.festamap-marker-image` ha una misura in questo * file, sempre. Una superficie puo' cambiarla, ma solo dichiarando una * variabile: non puo' toglierla. * * IL CONTRATTO * Ogni superficie che monta la mappa dichiara le sue variabili sul * proprio contenitore e non riscrive la geometria: * * --map-marker-size il lato della TESTA della goccia; la * silhouette e' alta 1.25 volte tanto, e * la proporzione non si dichiara: e' * quella del viewBox * --map-marker-edge il filo di contorno della forma * --map-marker-icon-size l'icona dentro * --map-marker-border-width il bordo bianco che la stacca dalla mappa * --map-marker-bg * --map-marker-shadow * --map-cluster-size * * `--marker-color` invece la scrive il controller sul singolo marker: * e' il colore della categoria, e cambia da un punto all'altro. */ /* V1.61 — LA MISURA SEGUE LO ZOOM. `--map-marker-zoom-scale` la scrive il controller sul contenitore della mappa, una volta per cambio di zoom, e i marker la ereditano. Vale 1 se nessuno la scrive, quindi una superficie che non passa dal controller resta esattamente com'era. SI CAMBIA LA MISURA, NON SI APPLICA UN `transform: scale()`. L'ancora dei marker e' un `translateY(50%)`, cioe' meta' ALTEZZA: una trasformazione non cambia il layout, l'altezza resterebbe quella piena e il marker scivolerebbe via dalla propria coordinata mentre rimpicciolisce. Cambiando la misura, l'ancora si aggiorna da sola. Resta libero il `transform` del marker SELEZIONATO: non tocca il layout, quindi non tocca l'ancora, e si compone con la scala dello zoom invece di litigarci. */ .festamap-marker { /* IL RIQUADRO E' QUELLO DELLA SILHOUETTE. `--map-marker-size` resta il lato della TESTA, come l'hanno sempre dichiarato le superfici; l'altezza segue la proporzione del viewBox (40/32), perche' la punta e' parte della forma e non un pezzo appeso sotto. Il bordo inferiore di questo riquadro E' la punta, quindi e' la coordinata: Google ancora il contenuto per il fondo, e qui non c'e' niente da compensare. */ --marker-box: calc( var(--map-marker-size, 30px) * var(--map-marker-zoom-scale, 1) ); position: relative; display: block; width: var(--marker-box); min-width: var(--marker-box); height: calc(var(--marker-box) * 1.25); padding: 0; } /* LA FORMA. Un path, nessuna giunzione. L'ombra e' un `drop-shadow`: segue la silhouette invece di disegnare il rettangolo del riquadro, ed e' cio' che fa sembrare il marker un oggetto e non un adesivo. Il filo di contorno e' sottilissimo e serve solo a staccare il bianco dal bianco della mappa. */ .festamap-marker-shape { display: block; width: 100%; height: 100%; fill: var(--map-marker-bg, var(--surface-panel)); stroke: var(--map-marker-edge, rgba(20, 19, 18, .14)); stroke-width: 1; filter: drop-shadow(0 1px 2px rgba(20, 19, 18, .28)); } /* LA SELEZIONE E' UN FILO PIU' SPESSO SULLA STESSA FORMA. Non un `outline`, che intorno a un riquadro disegnerebbe un rettangolo attorno a una goccia; e non uno `scale`, che sposterebbe la punta dalla coordinata. Lo stesso path, con il contorno del colore della categoria. */ .festamap-marker.is-selected .festamap-marker-shape { stroke: var(--marker-color, var(--text-primary)); stroke-width: 2.5; } /* IL CONTENUTO STA NELLA TESTA. La testa occupa il 70% dell'altezza — il cerchio di raggio 13 in un viewBox alto 40 — quindi un contenitore alto il 70% e centrato mette l'icona al centro OTTICO della testa invece che al centro del riquadro, dove finirebbe schiacciata sul restringimento. */ .festamap-marker-core { position: absolute; top: 0; left: 0; display: grid; width: 100%; height: 70%; place-items: center; } /* LA REGOLA CHE MANCAVA IN V1.51 E FACEVA LE ICONE GIGANTI. Senza una misura esplicita il browser disegna il PNG alla sua dimensione naturale: 192px, sopra la mappa, uno sull'altro. */ .festamap-marker-image { width: calc( var(--map-marker-icon-size, 18px) * var(--map-marker-zoom-scale, 1) ); height: calc( var(--map-marker-icon-size, 18px) * var(--map-marker-zoom-scale, 1) ); object-fit: contain; } /* Quando la categoria non ha icona: un quadratino del suo colore. */ .festamap-marker-placeholder { width: calc( var(--map-marker-dot-size, 9px) * var(--map-marker-zoom-scale, 1) ); height: calc( var(--map-marker-dot-size, 9px) * var(--map-marker-zoom-scale, 1) ); border-radius: var(--map-marker-dot-radius, 3px); /* Come il pallino del numero: il colore della categoria se si vede, l'inchiostro se e' bianco su bianco. */ background: var(--marker-ink, var(--text-primary)); } /* IL NUMERO DELLO STAND NON SI DISEGNA PIU' SULLA MAPPA. Era `.festamap-marker-number`: una pastiglia appesa al fianco del marker. Accanto a una goccia, alla sua icona e alla stella del Programma diventava il quarto segno, e si leggeva come un secondo marker invece che come l'ordinale del primo. Il dato non e' stato toccato: il numero si legge nella scheda dello stand, nei risultati di ricerca, negli elenchi dell'anteprima e sulla brochure stampata, dove serve davvero a ritrovare una voce. */ /* La selezione non usa piu' `outline`: intorno a un riquadro disegna un RETTANGOLO, e attorno a una goccia si vedeva per quello che era. Adesso e' il contorno del path — vedi `.is-selected .festamap-marker-shape` — che segue la silhouette. */ /* ATTENUATO, NON NASCOSTO. Mentre si guarda una processione gli altri marker arretrano di un passo: si vedono ancora — senza di loro l'itinerario passerebbe nel vuoto — ma non competono con cio' che si sta guardando. E' opacita', non `display: none`: un marker che sparisce e ricompare fa saltare il raggruppamento e sposta cio' che si stava per toccare. */ .festamap-marker.is-dimmed { opacity: .45; } /* Cio' che appartiene alla processione aperta NON si attenua mai: le sue tappe sono parte di cio' che si sta guardando. */ .festamap-marker.program-stop.is-dimmed { opacity: 1; } /* ==================================================================== LA TAPPA DI UNA PROCESSIONE E' un marker MINORE, e deve sembrarlo. Una tappa non e' un posto dell'evento: e' un momento del percorso di UNA processione, e se avesse la stessa presenza di uno stand competerebbe con cio' che la mappa esiste per mostrare. STESSA FORMA, NON UNA FORMA NUOVA. Piu' piccola e piena del colore della processione, cosi' si legge subito a quale appartiene e la punta resta sulla coordinata come per ogni altro marker: non c'e' una seconda ancora da tenere allineata. ==================================================================== */ .festamap-marker.program-stop { --map-marker-size: var(--map-marker-stop-size, 19px); } .festamap-marker.program-stop .festamap-marker-shape { /* `--marker-ink` e' il colore della processione QUANDO SI VEDE sulla mappa; quando non si vede — bianco su bianco — il controller non lo scrive e resta l'inchiostro. E' la stessa regola del pallino di ripiego: un colore che non si distingue non e' un colore. */ fill: var(--marker-ink, var(--text-primary)); } /* Il contorno chiaro vale finche' la tappa NON e' selezionata: la selezione ha gia' il suo contorno, piu' spesso e del colore della categoria, e due regole con lo stesso peso se lo contenderebbero in base all'ordine dei file — cioe' per caso. */ .festamap-marker.program-stop:not(.is-selected) .festamap-marker-shape { stroke: var(--map-marker-border-color, var(--surface-panel)); stroke-width: 2; } /* Il punto dentro: piccolo, chiaro, sopra il pieno del colore. Il raggio e' `50%` e non `--radius-pill`: quel token oggi non si risolve — rimanda a `--radius-full`, che nessun foglio definisce — e misurato in un browser vero dava `border-radius: 0px`, cioe' un quadratino. Una misura che dipende da un token rotto non e' una misura: qui la forma e' un cerchio e si dice cosi'. */ .festamap-marker.program-stop .festamap-marker-placeholder { width: calc(var(--map-marker-stop-dot, 5px) * var(--map-marker-zoom-scale, 1)); height: calc(var(--map-marker-stop-dot, 5px) * var(--map-marker-zoom-scale, 1)); border-radius: 50%; background: var(--map-marker-bg, var(--surface-panel)); } /* ==================================================================== CLUSTER Quando due punti si sovrappongono, uno solo che dice quanti sono. ==================================================================== */ .festamap-cluster-marker { display: grid; width: var(--map-cluster-size, 31px); height: var(--map-cluster-size, 31px); border: var(--map-marker-border-width, 2px) solid var(--map-marker-border-color, var(--surface-panel)); border-radius: var(--radius-pill); background: var(--map-cluster-bg, var(--surface-inverse)); color: var(--map-cluster-text, var(--text-inverse)); box-shadow: var(--map-marker-shadow, var(--shadow-floating)); place-items: center; } .festamap-cluster-marker strong { font-size: var(--type-label-size); font-weight: 700; line-height: 1; } .festamap-cluster-marker span { font-size: var(--type-eyebrow-size); opacity: .72; } /* ==================================================================== V1.60 — L'INNESTO DI UNA DIRAMAZIONE Dove un ramo si stacca dal percorso e dove vi rientra. Sta qui e non in map-core.css perche' e' aspetto, non geometria: il core della mappa non conosce colori. La misura e' in PIXEL, non in metri. E' un segno di lettura della mappa, non un oggetto sul terreno: deve restare uguale a ogni zoom, ed e' la ragione per cui e' un marker e non un cerchio geografico. Colore, misura e opacita' arrivano dal controller come variabili: li decide il piano di disegno del percorso, che e' lo stesso per l'editor, il visitatore e la brochure. ==================================================================== */ .native-route-node { width: var(--route-node-size, 10px); height: var(--route-node-size, 10px); border: 2px solid var(--map-route-node-halo, #FFFFFF); border-radius: 50%; background: var(--route-node-color, currentColor); opacity: var(--route-node-opacity, 1); pointer-events: none; } /* ==================================================================== V1.60c — L'ANCORA DEI MARKER HEARTH Google ancora il contenuto di un AdvancedMarkerElement per il suo BORDO INFERIORE: e' giusto per uno spillo con la punta, ed e' sbagliato per i marker Hearth, che sono glifi CENTRATI sulla coordinata. Misurato su un marker da 30 pixel: il bordo inferiore cadeva esatto sulla coordinata, il centro quindici pixel piu' in su. Ogni stand era disegnato alto di mezzo marker. Questa regola riporta il centro sull'ancora, e vale per TUTTI i marker: elementi, gruppi, innesti, posizione dell'utente. E' l'unico posto in cui l'ancoraggio si tocca. ==================================================================== */ /* ==================================================================== IL SEGNO DEL PROGRAMMA Un pallino sul bordo del marker: qui, a un certo orario, accade qualcosa. NON e' un secondo marker — quello copriva lo stand e lo rendeva impossibile da aprire — ed e' decorativo, quindi non prende il puntatore: il click resta dell'elemento. ==================================================================== */ /* ==================================================================== IL SEGNO DEL PROGRAMMA Una stella, e basta. Niente pastiglia bianca dietro: su un corpo gia' bianco quella pastiglia era una seconda bolla appoggiata sul marker, ed e' esattamente cio' che non deve sembrare. Un micro-segno sovrapposto al bordo, non un secondo marker. NON entra nel layout: e' in posizione assoluta, quindi non cambia la scatola che Google usa per ancorare. La punta resta dov'e' con la stella, con il conteggio, in corso e da selezionata. ==================================================================== */ .festamap-marker-program { position: absolute; /* APPOGGIATO SUL BORDO, non accanto. Con il corpo tondo, l'angolo in alto a destra del riquadro e' fuori dal cerchio: un segno messo li' galleggia staccato. Rientrando di un paio di pixel si sovrappone al bordo, ed e' cio' che lo rende un segno SUL marker. */ top: -2px; right: -2px; display: flex; align-items: center; gap: 1px; /* LA STELLA NON PRENDE IL COLORE DELLA CATEGORIA. Lo prendeva, e sull'evento vero ogni categoria e' `#ffffff`: stella bianca su fondo bianco. Il colore di una categoria e' una scelta di chi organizza e puo' essere qualunque cosa; questo segno deve leggersi sempre, quindi ha un colore suo. */ color: var(--text-primary, #1A1917); font-family: var(--font-ui); line-height: 1; pointer-events: none; } /* L'ALONE E' NELLA STELLA, non dietro di essa. `paint-order: stroke fill` disegna prima il contorno e poi il pieno: il contorno, spesso e del colore della mappa, diventa un bordo chiaro che stacca la stella da qualunque cosa le passi sotto — l'icona del marker, il bordo del corpo, la strada. E' l'alone senza la bolla. */ .festamap-marker-program svg { display: block; width: 11px; height: 11px; flex: 0 0 auto; fill: currentColor; paint-order: stroke fill; stroke: var(--map-marker-halo, #FFFFFF); stroke-width: 3; stroke-linejoin: round; } /* Il conteggio e' secondario: piccolo, con lo stesso alone. */ .festamap-marker-program b { font-size: 10px; font-weight: 700; text-shadow: 0 0 2px var(--map-marker-halo, #FFFFFF), 0 0 2px var(--map-marker-halo, #FFFFFF), 0 0 2px var(--map-marker-halo, #FFFFFF); } /* IN CORSO: l'unico stato con un fondo. Compatto, semantico, stella bianca. Un anello morbido intorno e nient'altro — il marker sta su una mappa che si guarda camminando, e qualcosa che pulsa in un angolo si nota una volta e poi da' fastidio. Le misure del fondo non toccano il layout: il segno resta in posizione assoluta, e la punta non si muove. */ .festamap-marker-program.is-live { top: -4px; right: -4px; padding: 2px; border-radius: var(--radius-pill, 999px); background: var(--status-danger, #C8452D); color: var(--text-inverse, #FFFFFF); box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger, #C8452D) 28%, transparent); } /* Sul rosso l'alone chiaro non serve e sporcherebbe la stella. */ .festamap-marker-program.is-live svg { stroke: transparent; stroke-width: 0; } .festamap-marker-program.is-live b { text-shadow: none; } .map-marker-anchor { display: grid; justify-items: center; /* NESSUNA TRASLAZIONE QUI. Google ancora il contenuto per il suo bordo INFERIORE, ed e' esattamente dove sta la punta della goccia: il fondo del marker e' la coordinata. Prima c'era un `translateY(50%)` che riportava il CENTRO sulla coordinata, perche' il marker era una pastiglia e un centro era l'unico punto sensato che avesse. Cio' che non e' una goccia — gli innesti del Percorso, i gruppi, il pallino "sei qui" — resta centrato, e se lo traslano da se': vedi la regola qui sotto. Il `transform` che Google usa per posizionare non si tocca in nessuno dei due casi. */ /* L'ANCORA NON INTERCETTA IL PUNTATORE. E' la scatola che Google posiziona sulla coordinata, e contiene sia marker premibili sia decorazioni — gli innesti del Percorso, per esempio, che dichiarano gia' `pointer-events: none` per conto loro. Finche' l'ancora restava cliccabile, quel `none` non serviva a niente: il click cadeva sull'ancora e non arrivava alla mappa. Misurato mentre si disegnava un itinerario: un click sopra un innesto non aggiungeva il punto, e non succedeva niente. Ora passa tutto attraverso, e si riaccende solo su cio' che e' davvero un comando. */ pointer-events: none; } .map-marker-anchor > .native-point-marker, .map-marker-anchor > .native-cluster-marker { pointer-events: auto; } /* Cio' che non ha una punta sta CENTRATO sulla propria coordinata: un innesto e' un vertice del Percorso, un gruppo e' il baricentro dei suoi, e il pallino della posizione e' la posizione. Nessuno dei tre indica un punto da sotto. */ .map-marker-anchor > .native-route-node, .map-marker-anchor > .native-cluster-marker, .map-marker-anchor > .map-user-position { transform: translateY(50%); }