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:

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]