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:

Adesso dobbiamo aggiungere qualche proprietà per fare si che i bottoni si allineano bene a sinistra
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 esempioonclick=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]