Hack your map

Categorico sull’open#section1

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.

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#section2

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.

La storia di alcuni posti#section3

Per stabilire un riferimento per la nostra storia, ho riorganizzato The Adventure of the Bruce-Partington Plans perché venga narrata attorno ai posti. Ho scelto ho location chiave dal testo originale, ho tirato fuori i dettagli essenziali del mistero e li ho incorniciati con HTML, CSS e JavaScript.

Una storia di Sherlock Holmes come solo testo. Si veda la Demo 1

.

Le mappe sono dati#section4

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.

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 256×256 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#section5

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.

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#section6

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.

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.

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#section7

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.

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#section8

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: {carlok}