No. 96

Titolo originale: Hack Your Maps

Pubblicato in: JavaScript, Responsive Design, Workflow & Tools

Scritto da Yung Hahn

Le mappe web hanno fatto parecchia strada. Dati migliori, design più pulito, performance migliori e controlli più intuitivi hanno reso le mappe web un componente onnipresente e critico di molte app. Sono anche diventate uno dei trapianti di maggior successo dello spazio mobile dal momento che sempre più app girano su device dotati di funzionalità di localizzazione. Lo stesso paradigma centrale dell'UI delle web map - una superficie continua, che si può esplorare e su cui si può fare zoom - si è diffusa perfino oltre le funzionalità di mappa in tutte le interfacce.

Nonostante ciò, abbiamo appena cominciato a far funzionare le web map nei nostri design. Creiamo icon font, griglie responsive, framework CSS, strategie per il progressive enhancement e perfino dei nuovi processi di progettazione. Demoliamo vecchie soluzioni e ne creiamo di nuove, ci prendiamo anche un secondo extra per condividere storie di battaglie in prosa e di persona. Tuttavia, a quasi cinque anni dall'articolo di Paul Smith, “Take Control of Your Maps”, le web map costituiscono ancora un punto cieco per la maggior parte dei designer.

Avete mai smontato una mappa? Lavorato con una mappa come parte critica del vostro design? Sviluppato trucchi, hack, workaround o miglioramenti progressivi per le mappe?

Questo articolo costituisce il compagno atteso per lungo tempo dell'articolo di Paul. Egli si avventura nei livelli del mapping da 10000 piedi, mentre noi esamineremo un singolo processo di design e implementeremo una mappa web moderna. Camminando su questo sentiero, spero di cominciare a rendere le mappe una parte della conversazione collettiva di noi designer.

Categorico sull'open

Paul adduce una buona ragione sul perché dovreste usare degli strumenti di mapping open invece di quelli stabiliti attualmente. Non ricostruirò qui le sue ragioni, ma vorrei espandere la sua ultima: gli open tool sono quelli che si possono modificare in maniera migliore.

Non c'è nulla di misterioso sulle mappe web. Prendete un qualunque piano spaziale, scomponetelo in sezioni discrete (tile), posizionatele nel DOM e aggiungete degli event handler per l'esplorazione e lo zoom. La formula di base può essere applicata a Portland, Marte o a Super Mario Land. Funziona per mostrare le mappe di grandi strade, ma nulla ci impedisce di armeggiarci per esplorare gallerie d'arte, creare mondi finti per i giochi, imparare l'anatomia umana o semplicemente per navigare una pagina web. Gli open tool ci svelano i lati nascosti di questo meccanismo, permettendoci di vedere un range di possibilità più ampio.

La varietà delle web map: spostare un presonaggio, Marte e Super Mario Land.

Il funzionamento delle web map non è limitato alle mappe stradali.

Dovremmo conoscere le condizioni sotto le quali vengono caricate e distrutte le immagini della mappa, dovremmo discutere per capire se le "tile" della mappa vengono posizionate in maniera migliore con CSS transform oppure no, e dovremmo prestare attenzione se gli elementi vettoriali sono disegnati con SVG o Canvas. Gli open tool ci permettono di conoscere questi dettagli operativi delle nostre mappe e ci consentono di fare esperimenti. Se non si possono ottenere in nessun altro modo con HTML5, CSS o con delle librerie JavaScript, allora non dovremmo accontentarci di meno per le mappe.

In breve, lavoreremo con un mapping stack completamente open. MapBox, dove lavoro io, ha messo insieme svariate librerie open source in una singola API che pubblichiamo con in mapbox.js. Altre librerie di mapping open che valgono il vostro tempo includono: Leaflet e D3.js.

Cominciamo

Sono un grande fan di Sherlock Holmes. Tra il recente film Hollywoodiano con Robert Downey Jr. e la serie contemporanea della BBC, sono completamente in fissa. Ma so che mi sto perdendo la ricchezza dell'ambientazione che Sir Arthur Conan Doyle voleva fosse letta nei suoi racconti brevi, dal momento che non sono mai stato a Londra.

Un tipico approccio consiste nell'inserire una web map con dei pin di varie location insieme ad una storia di Sherlock. Con questo approccio la mappa diventa un'appendice, un elemento superfluo che gioca una piccola parte nella narrazione di Doyle. Al contrario, noi espanderemo il ruolo della nostra mappa, integrandola completamente nella narrazione. Sarà il palcoscenico, darà il ritmo e influenzerà l'umore della nostra storia.

Confronto di una mappa usata come embedded media rispetto a una usata come elemnto critico del design.

Le mappe sono dati

L'equivalente mappato della nostra versione ridotta della storia di Sherlock è un insieme di dati di otto punti geografici. GeoJSON, un formato che descrive i dati geografici in JSON, è il punto di partenza perfetto per catturare questi dati:

{
    "geometry": { "type": "Point", "coordinates": [-0.15591514, 51.51830379] },
    "properties": { "title": "Baker St." }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.07571203, 51.51424049] },
    "properties": { "title": "Aldgate Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.08533793, 51.50438536] },
    "properties": { "title": "London Bridge Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [0.05991101, 51.48752939] },
    "properties": { "title": "Woolwich Arsenal" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.18335806, 51.49439521] },
    "properties": { "title": "Gloucester Station" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.19684993, 51.5033856] },
    "properties": { "title": "Caulfield Gardens" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.10669358, 51.51433123] },
    "properties": { "title": "The Daily Telegraph" }
}, {
    "geometry": { "type": "Point", "coordinates": [-0.12416858, 51.50779757] },
    "properties": { "title": "Charing Cross Station" }
}

Ciascun oggetto nel nostro array JSON ha dei dati geometry che descrivono dove si trova questo oggetto nello spazio e dei dati freeform properties di nostra scelta per descrivere cos'è l'oggetto. Ora che abbiamo questi dati, possiamo creare una mappa molto basica.

Una demo basilare di web mapping.

I fondamenti del web mapping. Si veda la Demo 2.

  • Si noti che le coordinate sono una coppia di gradi di latitudine e di longitudine. Nel 2013 non è ancora possibile trovare un ordine consistente per questi valori tra le varie API di mapping. Alcuni usano lat,lon per venire incontro alle nostre aspettative derivanti dallo studio della geografia a scuola. Altri usano lon,lat per seguire l'ordine delle coordinate x,y: orizzontale e poi verticale.
  • Stiamo usando mapbox.js come nostra libreria principale open source per la mappatura. Ciascuna mappa viene meglio compresa come i parametri chiave passati in mapbox.map():
    1. Un elemento container del DOM
    2. Uno o più livelli come quelli di Photoshop che posizionano le tile o i marker
    3. Event handlers che collegano l'input dell'utente all'azione, come il trascinamento per l'esplorazione
  • La nostra mappa ha due livelli. Il livello tile è creato da immagini quadrate da 256x256 generate da una mappa personalizzata su MapBox. Il livello dei luoghi è creato da pin marker generati dai dati GeoJSON di cui sopra.

Questo è un buon inizio per il nostro codice, ma non è nemmeno lontanamente vicino al nostro obiettivo iniziale di utilizzare la mappa per raccontare la nostra storia di Sherlock Holmes.

Oltre la location

Stando alla nostra prima mappa, gli otto punti nell'insieme di dati di GeoJSON sono solo dei posti, non ambientazioni in una storia piena di intrigo e mistero. Da un punto di vista visuale, i pin rendono i nostri posti anonimi ed li rendono niente di più che semplici postazioni.

Per superare questo, possiamo usare le illustrazioni per ciascun posto: alcune mostreranno le ambientazioni, altre mostreranno degli elementi chiave della storia. Ora il nostro pubblico vede subito che c'è di più per ogni posto che la sua posizione nello spazio. Come canvas per queste, ho creato un'altra mappa con uno stile personalizzato che si mischia in maniera trasparente con le immagini.

Web map con illustrazioni.

Le illustrazioni e uno stile personalizzato aiutano la mappa a diventare parte della narrazione. Si veda la Demo 3 e poi leggete la diff.

  • Il cambiamento principale qui è che definiamo una factory function personalizzata per il nostro livello dei marker. La funzione della factory function è quello di prendere ciascun oggetto GeoJSON e di convertirlo in un elemento del DOM - a, div, img o qualsiasi altro - che il livello posizionerà poi sulla mappa.
  • Qui generiamo i div e passiamo dall'usare un attributo title nel nostro GeoJSON ad un id. Questo ci dà delle classi CSS utili per mostrare le illustrazioni con i nostri marker personalizzati.

Mettiamo tutto insieme

Adesso è ora di combinare la nostra storia con la nostra mappa. Usando gli eventi di scroll di prima, possiamo coordinare le section della storia con i posti sulla mappa, realizzando così un'esperienza unificata.

Web map coordinate al testo della storia con un handler dello scroll.

Man mano che l'utente legge ciascuna sezione, la mappa si sposta su un'altra location. Si veda la Demo 4, poi leggete il diff.

  • Il ponte tra la storia e la mappa è una funzione setActive() migliorata. In precedenza impostava solamente una class active su una particolare section basandosi sulla posizione di scrolling. Ora trova anche il marker attivo, imposta una class active e fa scorrere la mappa alla posizione del marker.
  • L'animazione della mappa usa la libreria easey nell'API mapbox.js, che implementa le animazioni tra i punti geografici. L'API è davvero semplice: le passiamo lon,lat del marker destinazione dell'animazione ed essa gestisce il resto.
  • Disabilitiamo tutti gli event handler sulla nostra mappa passando un array vuoto in mapbox.map(). Ora la mappa può essere influenzata solo dalla posizione di scrolling. Se gli utenti vogliono deviare dal percorso della storia o esplorare liberamente Londra, potremmo reintrodurre gli event handler, ma in questo caso, "less is more".

Mostrare la nostra mappa a tutto schermo insieme al testo rappresenta una sfida interessante: la viewport della mappa dovrebbe essere spostata a destra per tenere conto della nostra storia sulla sinistra. La soluzione che uso in questo caso consiste nell'espandere la viewport della mappa fuori dal canvas usando solo CSS. Potreste usare JavaScript, ma come vedremo dopo, un approccio CSS ci dà dei modi eleganti per riapplicare e adattare questa tecnica ai dispositivi mobile.

Uso di una larghezza di mappa off-canvas per spostare il centro della viewport.

A questo punto, la nostra mappa e la storia si completano. La mappa aggiunge un contesto spaziale, un intrigo visuale e un elemento temporale interessante perché scorre tra distanze lunghe e brevi.

Mappe nel responsive design

Il piano spaziale continuo e a "tile" rappresentato dalle mappe web è naturalmente molto adatto al responsive design. Le mappe web gestiscono facilmente differenti dimensioni della viewport mostrando un po' più o un po' meno mappa. Per il nostro sito, sistemiamo leggermente il layout degli altri elementi per farli stare nelle viewport più piccole.

Aggiunta di un layout responsive.

Sistemare il layout con le mappe web. Si veda la Demo 5, poi leggete il diff.

  • Con meno spazio sullo schermo, nascondiamo le sezioni di testo non attive e fissiamo il testo attivo in alto nello schermo.
  • Usiamo la metà inferiore dello schermo per la mappa ed usiamo le media query per sistemare il punto centrale della mappa a tre quarti dell'altezza dello schermo, usando un'altra versione del nostro trucco nella Demo 4.

Con un minimo di pianificazione e di aggiustamenti, la storia di Sherlock è pronta per essere letta mentre siamo in giro.

Risolvete il vostro caso

Se state seguendo il codice tra questi step, probabilmente avrete notato almeno una o due cose di cui non ho parlato, come i parametri di ease.optimal() o il modo in cui i tooltip scelgono l'attributo title dei dati GeoJSON. Il diavolo è nei dettagli, quindi postate su questo repository GitHub, dove troverete il codice e il design.

Dovreste anche dare un'occhiata a:

  • Il sito MapBox, che include una panoramica del tiling e i concetti base delle mappe web e i documenti MapBox.js e gli esempi del codice.
  • Leaflet, un'altra potente libreria open source per le mappe.
  • D3.js, una libreria per creare documenti data-driven che ha un gran numero di applicazioni, incluso il mapping.

Questo esempio mostra un percorso per integrare le mappe web nei vostri progetti. Non fermatevi qui. Rompetelo. Fatelo vostro. Fate cose che potrebbero essere totalmente geniali o incredibilmente stupide. Anche se non funzionano, vi starete impossessando delle mappe come un designer e appropriarsi di qualcosa è l'unico modo per apportare miglioramenti.

Illustrazioni: Carlo Brigatti

Share/Save/Bookmark
 

Discutiamone

Ti sembra interessante? Scrivi tu il primo commento


Cenni sull'autore

Yung Hahn

Young HahnYoung Hahn è un designer e developer di Washington, DC. Fa parte di MapBox e lavora all'incrocio tra tecnologia web e geografia, per assicurare un futuro all'open mapping sul web.