Tutorial: LeafletJS e Material Design sui controlli

Tutorial: LeafletJS e Material Design sui controlli >> 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:

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 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]

Tutorial: LeafletJS e Material Design sui controlli

Blog