Wayfinding - rilascio aprile 2020

Info utili

• Il branch utilizzato per lo sviluppo delle mappe, si chiama maps_upgrade
• L’indirizzo per accedere alla Pattern Library delle mappe è: https://adb.tangible.is/components/detail/page-airport-maps--default, che è stato associato alla API Key di Google Maps e che quindi permetterà la normale visualizzazione della mappa

Funnel

Abbiamo impostato il funnel che porta dalla prima fase di ricerca fino alla visualizzazione della pagina dedicata al punto di interesse.

• 1. Atterraggio in pagina: Avviene sul template di default, che permette sia la ricerca attraverso input, che la selezione di una categoria di appartenenza del servizio. Per visualizzare l’elenco della ricerca attraverso input, cliccare il bottone di submit del campo. Per visualizzare i punti per la categoria di interesse, cliccare uno degli item categoria. https://adb.tangible.is/components/detail/page-airport-maps--default

• 1.1) Risultati ricerca: La sidebar mostra l’elenco dei punti di interesse attinenti alla ricerca che abbiamo fatto nella pagina di atterraggio. https://adb.tangible.is/components/detail/page-airport-maps--search-results

• 1.2) Selezione categoria: La sidebar mostra l’elenco dei punti di interesse della categoria che abbiamo selezionato nella pagina di atterraggio. I punti di interesse sono ordinati a partire dai più vicini a noi fino ai più cercati. https://adb.tangible.is/components/detail/page-airport-maps--category-selected

• 2. Info punto interesse: Nella sidebar ora troviamo una card contenente informazioni sul punto di interesse che abbiamo selezionato in uno dei passaggi precedenti. Cliccando il link “Scopri di più”, verremo indirizzati nella pagina del punto di interesse. https://adb.tangible.is/components/detail/page-airport-maps--detail
• 3. Pagina POI (punto di interesse): Una pagina già presente nella versione precedente, a cui va aggiunta la Static Map di Google Maps. https://adb.tangible.is/components/detail/page-shop-detail
• 4. Empty state: Nel caso la ricerca non desse risultati, questo è il template a cui fare riferimento e da cui potete prendere i componenti necessari. https://adb.tangible.is/components/detail/page-airport-maps--empty-state

Codice

• Il javascript utilizzato per il funzionamento e le modifiche alla mappa si trova a fondo pagina
• Le API chiamate sono 2, quella di Google Maps e quella di Mapsindoors
• Oltre a queste, inserire anche il link al ccs per il selettore dei piani
• Il componente di avviso della geolocalizzazione attiva/spenta varia il suo stile grazie alla classe .active
• Le icone dei controlli della mappa generati da Google Maps, sono personalizzate attraverso lo script a fine pagina, che sostituisce l’immagine svg dell’icona
• La pagina del POI, renderizza la Static Map di Google Maps, che all’interno dell’attributo src contiene le coordinate della posizione del POI
• Le parti che fungono da collegamento al dowload dell’App sono state commentate. Dovranno essere visualizzabili una volta disponibile la funzionalità delle mappe anche da App