Categorie
WebGIS

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.


Content not available.
Please allow cookies by clicking Accept on the banner

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:

LeafletJS e Material Design sui controlli

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);
}
LeafletJS e Material Design sui controlli

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]

Categorie
WebGIS

Tutorial: LeafletJS e Material Design

Una mappa online deve essere semplice e leggibile, ma anche rispettare le regole del web design moderno.


In questo tutorial ho provato ad utilizzare CodePen e questo è il link del progetto. Mentre tutti i passaggi e i requisiti li puoi trovare qui.

Creare una mappa online con la libreria Javascript chiamata LeafletJS è ormai quasi uno standard, ma se siete stufi dei soliti elementi grafici, vediamo come integrare il moderno Material Design con le nostre mappe.

Content not available.
Please allow cookies by clicking Accept on the banner


[wc_button type=”primary” url=”http://www.cityplanner.it/tutorial-leafletjs-material-design-sui-controlli/” title=”Guarda seconda parte” target=”self” position=”float”]C’è anche la seconda parte[/wc_button]