In questo post abbiamo visto come generare contenuti web a partire dai dati all’interno dell’ambiente Jekyll.

E’ piuttosto semplice, combinando questa funzionalità con le caratteristiche del plugin javascript Leaflet, usare i dati dentro Jekyll per mapparli. Leaflet è un plugin opensource per creare semplici mappe visualizzabili in modalità responsive senza troppo sforzo nella codifica.

Ci sono molti altri ambienti che consentono di mappare dei punti in un file di dati, ma il fatto di poterlo fare dentro Jekyll consente almeno due vantaggi ossia la personalizzazione della mappa in modo piuttosto rapido (anche se si deve durare un po’ di fatica con qualche linea di codice in più) e soprattutto il riuso di quanto fatto per ulteriori mappe. Il prerequisito è (oltre al fatto che i dati siano formati “digeribili” da Jekyll) che abbiano anche i parametri di Longitudine e Latitudine per ogni record da mappare.

Andiamo ad un esempio. Il caso di uso è : devo creare una mappa dei musei della Regione Toscana. Come fare?

• Ho prelevato il dataset dei musei presente sul portale OpenToscana, il CSV trovate qui.
• Archiviate questo dataset nella folder _data del vostro sito jekyll
• Create un file con estensione html (io l’ho chiamato musei_map.html) che contenga il seguente codice:

• Come è fatto questo file? Ho cercato di commentare abbastanza il codice, in sostanza è un file html che fa le seguenti operazioni in sequenza:
  • Importa le librerie e gli stili di Leaflet
  • Definisce nella pagina una sezione HTML denominata “map”
  • Tramite uno script JS definisce lo stile dei Marker su mappa e successivamente crea la lista dei marker dai dati jekyll
  • Imposta il formato dei POPup sulla mappa
  • Mostra il livello dei punti di interesse appena creato
• Salvate il file HTML creato nella folder _includes di jekyll, in modo da renderlo un modulo riusabile
• Importate la vostra mappa in qualunque post o pagina con l’istruzione % include musei_map.html % (inserita nel post o nella pagina tra due parentesi graffe)

Il risultato si vede sotto. Il mio esempio è creato con un unico file html, ma potete separare la parte html da quella in js. E successivamente potete divertirvi a customizzare di più il mio codice, aggiungendo alcuni link, icone diverse etc.