LeafletJS e Material Design

Blog

LeafletJS e Material Design

LeafletJS e Material Design >> Creare una mappa con LeafletJS è ormai quasi uno standard, ma se siete stufi dei soliti elementi grafici, vediamo come integrare il moderno Material Design con le nostre mappe. Ad esempio con questo metodo ho creato questa mappa: cityplanner.biz/wp_pulito/webgis/brianzalc

Requisiti

  1. Avere una mappa fatta con LeafletJS e se non l'avete, partite da quella di esempio dal sito ufficiale: http://leafletjs.com/examples/quick-start-example.html
  2. Caricare nell'head le librerie jQuery https://code.jquery.com/
    1. jQuery 2.x (https://code.jquery.com/jquery-2.2.3.js)
    2. jQuery UI 1.11 (https://code.jquery.com/ui/1.11.4/jquery-ui.js)
  3. Sempre nell'head caricare le librerie di Bootstrap http://getbootstrap.com/getting-started/
  4. ed infine caricare quelle che trasformano Bootstrap in Materia Design https://github.com/FezVrasta/bootstrap-material-design#getting-started
Questa procedura può essere fatta in locale oppure su un hosting a vostra scelta

Tutorial

La mappa completa è pubblicata con CodePen il playground per lo sviluppo front-end di pagine web. Quindi ispirati, istruisci e condividi.

LeafletJS fullscreen

La mappa del tutorial del sito ufficiale è impostata con delle proprietà che la dimensionano 600x400
<div id=mapid style=width: 600px; height: 400px></div>
Potrebbe anche andare bene, ma io preferisco le mappe fullscreen. Per fare questo bisogna definere lo style, che di solito si mette nell'head, oppure in un file separato (se avete dubbi chiedete); in CodePen nel box CSS trovate:
body {
padding: 0;
margin: 0;
}
html, body, #mapid {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
e poi modificate il contenitore mapid, toglieno lo style
<div id=mapid></div>

Inserimento delle librerie e fogli di stile aggiuntivi

Le librerie aggiuntive in un file html normale si inseriscono nell'head in questo modo:
<head>
  • Javascript
<script src=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js></script>
  • fogli di stile o CSS
<link rel=stylesheet href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css>
Fine dell'head
</head>
Mentre in CodePen si possono aggiungere cliccando sull'ingranaggio che si trova da parte ai box HTML o CSS o JAVASCRIPT [caption id=attachment_5929 align=aligncenter width=355]Mentre Mentre in CodePen si possono aggiungere cliccando sull'ingranaggio che si trova da parte ai box HTML o CSS o JAVASCRIPT[/caption]
Elenco completo degli url per le librerie Javascript Elenco completo degli url CSS Le librerie e i CSS da inserire sono quelli messi nei requisiti (attenzione ad aggiungere le librerie Javascript e i CSS nel box giusto. Per testare se tutto va bene, provate ad aggiungere questo codice dopo il contenitore mapid
<div id=mapid></div>

<a href=javascript:void(0) class=btn btn-raised btn-primary>Primary<div class=ripple-container></div></a>
Dovrebbe apparirvi un pulsante in stile sotto la mappa
TEST

Aggiungiamo il titolo

Cancelliamo pure il bottone che abbiamo inserito come test e andiamo ad inserire, nello stesso posto un contenitore per il titolo
<div class=jumbotron>

<h1>Titolo</h1>

<p>Sottotitolo</p>

</div>
In questo modo troverete sotto la vostra mappa il titolo con un bel box Material Design style
TEST
Adesso facciamo andare questo box, in sovrapposizione alla mappa.
  1. si associa al div jumbotron un id, ad esempio id=titolo
  2. si definisce lo style di questo titolo
	<div class=jumbotron id=titolo>
  <h1>Ti...
e nel box CSS si aggiunge
#titolo{
position:absolute;
top: 10px;
}
Noterete che il box titolo adesso è nella parte superiore sinistra, piccolo; per ingrandirlo full-width vi basterà aggiungere il seguente codice col-md-12, per fargli occupare 12 colonne (che in Bootstrap significa il massimo numero di colonne in cui una pagina può essere divisa)
<div class=jumbotron col-md-12 id=titolo>
<h1>Ti..
Se però non vogliamo che questo box titolo sia largo tutto lo schermo, ma vogliamo lasciare uno spazio a destra e a sinistra, bisogna inserire il codice col-md-offset-2 come di seguito seguente (significa lasciare due colonne offset partendo da sinistra e poi allargarlo per 8 colonne; le restanti 2 è possibile lasciarle in automatico, senza scrivere niente)
<div class=jumbotron col-md-offset-2 col-md-8 id=titolo>
<h1>Ti..
Il risultato dovrebbe essere questo
Leaflet
Se non vi piace questo box Jumbotron potete scegliere qualsiasi elemento dalla pagina di Fezvrasta (http://fezvrasta.github.io/bootstrap-material-design/bootstrap-elements.html) Sostituendo jumbotron nel class del div con alert alert-dismissible alert-success otterrete un box particolare, che ha anche la funzione dismissible che permette all'utente di eliminarlo cliccando sulla X [codepen_embed height=300 theme_id=11907 slug_hash=VaxyaL default_tab=js,result user=pjhooker]See the Pen <a href='http://codepen.io/pjhooker/pen/VaxyaL/'>LeafletJS e Material Design</a> by PJHooker (<a href='http://codepen.io/pjhooker'>@pjhooker</a>) on <a href='http://codepen.io'>CodePen</a>.[/codepen_embed]