Una mappa online deve essere semplice e leggibile, ma anche rispettare le regole del web design moderno. Questo è la seconda parte del tutorial “LeafletJS e Material Design” e a prima parte la trovate in questo articolo.
Si parte da: http://codepen.io/pjhooker/pen/VaxyaL da cui si può fare un FORK
Innanzitutto biosogna disabilitare i controlli di default, aggiungendo zoomControl: false
dove è definita L.map
Prima
var mymap = L.map('mapid').setView([51.505, -0.09], 13);
Dopo
var mymap = L.map('mapid',{ zoomControl: false}).setView([51.505, -0.09], 13);
Inserimento NAVBAR
Adesso usiamo le navbar del tema dashboard di bootstrap http://getbootstrap.com/examples/dashboard/ che però si risolve aggiungendo il foglio di stile http://getbootstrap.com/examples/dashboard/dashboard.css
Per avere una navbar si aggiunge questo codice sotto <div id="mapid"></div>
<!-- Fixed navbar --> <div class="navbar navbar-default navbar-fixed-side navbar-fixed-side-left" role="navigation"> <div class="container"> <div class="navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"> <button type="button" class="btn btn-primary btn-sm button-control"></button> </li> </ul> </div> </div> </div>
Adesso abbiamo inserito il primo bottone
Questa nuova barra non si sovrappone subito alla mappa, perchè è necessario inserire nel codice css una nuova porpietà per #mapid
#mapid{ position: absolute; }
e il risultato dovrebbe essere simile a questo:
Il primo codice da inserire permette di dare un riferimento fisso al contenitore
.navbar-fixed-side { position: fixed; }
Il secondo ci permette di allineare i bottoni in modo verticale, invece che orrizontale
.navbar-fixed-side .navbar-nav > li { float: none; }
Il terzo ci permette di togliere il colore del background e lasciare visibili solo i bottoni
.navbar.navbar, .navbar-default.navbar { background-color: rgba(255, 255, 255, 0); color: rgba(255, 255, 255, 0.84); }
Aggiunta controlli custom
Adesso possiamo operare sui bottoni. Bisogna infatti definire una funzione ad ogni bottone e in questo esempio facciamo lo zoom in, lo zoom out e il “torna a casa”. Prima di tutto bisogna associare la funzione ai bottoni ad esempio onclick="onClick_zoomIn()"
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm button-control" onclick="onClick_zoomIn()"></button>
e ora andiamo a creare delle funzioni nella parte javascript, seguendo le indicazioni delle API di LeafletJS http://leafletjs.com/reference.html
per lo zoom in
function onClick_zoomIn () { mymap.zoomIn(); }
per lo zoom out
function onClick_zoomOut () { mymap.zoomOut(); }
per ricentrare la mappa alla posizione iniziale, oppure in altre posizioni
function onClick_home () { mymap.setView([51.5, -0.09], 16); }
Ora vediamo di aggiungere 3 pulsanti associando ad ognuna le funzioni appena inserite.
Material design icon
Facendo riferimento alla libreria di icone https://cdn.materialdesignicons.com/1.1.34/, andiamo ad inserire delle icone comprensibili nei bottoni
zoom in: mdi-content-add-circle-outline
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm mdi-content-add-circle-outline button-control" onclick="onClick_zoomIn()"></button>
home: mdi-action-home
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm mdi-action-home button-control" onclick="onClick_zoomIn()"></button>
zoom out: mdi-content-remove-circle-outline
<button type="button" style="font-size: 25px;" class="btn btn-primary btn-sm mdi-content-remove-circle-outline button-control" onclick="onClick_zoomIn()"></button>
Ecco il risultato finale (se non si vede clicca su “Result”)
[codepen_embed height=”300″ theme_id=”11907″ slug_hash=”LNBaar” default_tab=”html,result” user=”pjhooker”]See the Pen <a href=’http://codepen.io/pjhooker/pen/LNBaar/’>LeafletJS e Material Design sui controlli</a> by PJHooker (<a href=’http://codepen.io/pjhooker’>@pjhooker</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]