Awesome map style

Blog

Awesome map style

Awesome map style >> Tornati dalle vacanze? Magari siete passati dal Monferrato Casalese, in Piemonte e avete usato la mappa di Monferrato Paesaggi. Se siete stati fortunati, avete visto dei nuovi aggiornamenti, che ho apportato una decina giorni fa, altrimenti vi invito ad andare a rivedere... ma prima vi racconto come è stata creata.

Creare una awesome map style

LeafletJS offre la possibilità di gestire le path e ho trovato un plug-in che abilità la possibilità di creare dash, freccie e posizionare dell'icone lungo il percorso. Si chiama Leaflet.PolylineDecorator e in questo esempio ho sovrapposto una linea tratteggiata ad una più grossa (vedi esempio). In un secondo esempio, con la funzione extra chiamata PolylineDecorator è possibile associare ai “dash” delle icone, che in questo caso ho preparato per dare un effetto panoramica. Ho notato che se ci sono molte linee, la mappa inizia a diventare subito pesante. Per prevenire una visualizzazione pesante, senza per ottenere un risultato “leggero” ho utilizzato anche la funzione di disabilitare il layer se siamo ad uno zoom più piccolo di 12 (vedi esempio). Awesome In un terzo esempio Caricando gli script e i css di Leaflet.awesome-markers si apre la possibilità di caricare le librerie di icone Ionicons e Fontawesome, che sono moderne e molte varie. Molti sono abituati ad usare le famose Maki Icons di MapBox e questa soluzione, offre semplicemente dei set alternativi.

Fail!

Non vi faccio vedere l'esempio che avevo creato per Monferrato Paesaggi per mi riempirei di commenti non desiderati: dopo un paio di zoom, Chrome nel task manager mi dice che sta usando 2gb di ram... La mappa era diventata molto bella, dinamica e con effetti, da migliorare, ma comunque Awesome.

!Epic win

Forse è ancora presto parlare di vector tiles, ma non per TileMill. Questo software, abbastanza facile da installare sui nostri pc e già presente nella distribuzione OSGeo live permette di creare degli stili per le geometrie e poi di creare una cartella contenente i tiles, con la possibilità di scegliere il range di zoom da esportare. Ho sempre tralasciato questa scelta, per un motivo: i raster tiles, coprono una superficie e anche i plug-in di QGis fanno una esportazione, troppo sgranata e con poche opzioni. Ma per questo lavoro una sola caratteristica era imporante:
creare dei tiles delle linee, con sfondo trasparente
Allora in un forum ho trovato che TileMill, se lo sfondo si elimina dal file di stile, il risultato è uno sfondo trasparente... grandioso. Il risultato che potete vedere sotto è una collezione di opzioni di stile che risulta molto sbrigativo fare con TileMill, in particolare:
  • colorazione in base ad un valore della tabella
  • inserimento etichetta lungo la linea
  • effetto halo attorno al testo
  • gestione degli stili visibili in base allo zoom
  • line pattern per associare un icona lungo una linea
  • creare delle linee a dash (trattini)
Ecco il file di configurazione completo >> e qui di seguito il link alla mappa. ps. TileMill crea un file MBTiles, che deve essere convertito in Tiles semplici per essere usati con LeafletJS (o OpenLayers). Bisogna usare MBUtil e poi si può caricare la cartella (fatta di migliaia di piccoli file) sul vostro hosting. Awesome