Io odio i WebGIS, ma adoro i wallpaper con le mappe

Quante volte avete cercato di salvare una mappa da mettere sullo sfondo del vostro desktop?

Io parecchie e mi trovavo sempre a dovere “ispezionare” la pagina per togliere div e testi aggiuntivi! Bene, così l’altro giorno mi sono messo a scrivere un po’ di codice e sono riuscito ad ottenere uno strumento comodo e semplice da usare.

L’idea di partenza che mi ha permesso di immaginare l’applicazione è Leaflet-providers preview sviluppata e messa su GitHub da Jan Pieter Waagmeester aka jieter che permette di visualizzare un lungo elenco di mappe base, messe a disposizione dai vari Providers.

Ho spesso usato questa mappa di jieter, sia per trovare delle mappe base adatte per le mie web map, sia per fare degli screenshoots.

webapp/wallmapper

Ho basato l’applicazione che vi mostro in questo articolo sulla libreria LeafletJS e ho utilizzato il linguaggio jQuery, per interagire con la pagina web in base agli input degli utenti. Le principali funzioni sono le seguenti:

1. è possibile scegliere la mappa di base tra molti esempi
   in alto a sinistra, cliccando su “more” apparirà un elenco dei layer disponibili
2. in questo elenco è sviluppato con la libreria DataTableJS ed è possibile fare una ricerca per titolo del tile, estensione e tag
3. a destra c’è un pannello di controllo, dove dei bottoni permettono di abilitare o disabilitare delle opzioni
4. visto che l’applicazione è fatta per fare screenshoots, in questo pannello di controllo, si possono disabilitare il box dei crediti, così si ha solo la mappa a tutto schermo
5. le stelline, che si possono spegnere, rappresentano tutti gli screenshots, fatti dagli utenti e cliccando su una stella, è possibile sapere le coordinate, lo zoom e il layer che è stato salvato da qualche utente
6. ci sono altre quattro opzioni attivabili, ovvero dei layer aggiuntivi da integrare alla mappa di base scelta
7. si può accendre la heat map dei percorsi registrati con Strava
8. si può accendere in trasparenza il rilievo del terreno
9. infine due layer “admin” per vedere i confini amministrativi e/o le etichette, per quelle basemap dove non è chiaro o assente questa informazione

L’idea di questa mappa è sia quella di avere un elenco di mappe base fruibili, che già è possibile avere con Leaflet-providers preview, sia rendere un servizio di conoscenza e di report.

Se un layer non viene caricato, magari perchè la fonte è obsoleta, è possibile segnalarlo, tramite un semplice form.

La parte che riguarda i social network è attualmente in sviluppo, perchè verrà creato un post sul mio account Twitter, che segnala ogni “Screenshot taked” in modo anonimo.

I pulsanti Tokyo, Londra, New York e Mt. Everest, servono per dirigersi in un click per vedere come sono rappresentate sulla mappa questi luoghi “famosi”. Interessante vedere il Mt. Everest con il rilievo DEM.

Un Ester Egg: se ispezionate la pagina e aprite la console di LOG, è possible vedere in ordine cronologico, tutti gli “Screenshot taked” ed inoltre se inserite:

wallmapper/?lat=-25.7603&lng=-52.4268

Con le coordinate, è possibile ottenere un permalink, facile da condividere.

OpenSource

Su GitHub ho condiviso i file di questa applicazione, ma è necessaria anche una breve spiegazione. Il link è il seguente github.com/pjhooker/basemaps e troverete:

• gistips_bassemaps.js > array 1 con la lista dei layer disponibili con descrizione e url
• gistips_bassemaps_list.js > array2 con solo la lista dei layer disponibili
• walmapper > la mappa sviluppata con LeafletJS, jQuery e PHP

In questo video tutorial vi mostro il funzionamento, che in pochi minuti, vi permette di avere uno wallpaper fullHD, con tante mappe da scegliere.