Categories
Maps WebGIS

Veg’s Map

Sono sempre più le persone che scelgono un’alimentazione a base vegetale, escludendo quindi cibi e derivati animali. La motivazione di questa scelta è legata soprattutto al desiderio di non contribuire alla sofferenza degli animali all’interno di allevamenti e macelli, ma anche a tematiche più ambientaliste o ancora per motivi di salute. Molte le persone che scelgono di “andare a mangiare vegano” una sera, semplicemente per curiosità. Questo trend ha portato sia alla nascita di locali interamente dedicati all’alimentazione veg, sia all’inserimento di pietanze a base vegetale all’interno dei menù dei cosiddetti ristoranti “vegan friendly”. Attraverso questa mappa, è possibile individuare la posizione dei locali prettamente vegani o vegetariani e di quelli che hanno arricchito il proprio menù con delle valide alternative vegetali, orientandosi con le fermate delle linee della metropolitana di Milano. Se stai cercando un locale per colazione o per cena, potrai utilizzare la funzione “Cerca….” che farà una scrematura dei locali sulla base della tua ricerca. Ad esempio, se desidero fare una colazione vegana o prendere dei piatti da asporto, mi basterà inserire la parola chiave per visualizzare i risultati della mia ricerca. Aiutaci a far crescere la mappa!

vai alla mappa dei locali #veg

Categories
Maps WebGIS

Io odio i WebGIS, ma adoro i wallpaper con le mappe

Quante volte avete cercato di salvare una mappa da mettere sullo sfondo del vostro desktop? Io parecchie e mi trovavo sempre a dovere “ispezionare” per togliere <div> e testi aggiuntivi! Bene, allora l’altro giorno mi sono messo a scrivere un po’ di codice e sono riuscito ad ottenere uno strumento comodo e semplice da usare. In questo video tutorial vi mostro il funzionamento, che in pochi minuti, vi permette di avere uno wallpaper fullHD, con tante mappe da scegliere.

YouTube video tutorial

Riferimenti utili

Categories
WebGIS

Simpson’s City MAP

Yet another #springfield awesome #map – from #Simpson playground – power by #LeafletJS

pjhooker

Ispirato da simpsons.playgis.com sviluppato su una piattaforma ESRI, l’idea di creare una mappa della mitica città di Springfield, mi ha sempre lasciato un piccolo vuoto … da riempire al più presto.

Sono partito subito alla ricerca dello “sfondo”, la mappa degli edifici e ho trovato subito una doppia ipotesi, tra cui scegliere:

Mappa piana
Mappa piana – Map of Springfield (source: http://vignette3.wikia.nocookie.net/simpsons/images/f/f7/Map_of_Springfield.png/revision/latest?cb=20100117045534)
Mappa assonometrica
Mappa assonometrica – SpringfieldMap (source: http://www.smaxity.net/images/SpringfieldMap.jpg)

Sono riuscito a recuperare i POI da simpsons.playgis.com e questo all’inizio mi ha facilitato il lavoro, ma cercavo qualcosa di più.

Attualmente la mappa “dinamicizzata” con la libreria Javascript per fare mappe, LeafletJS è possibile trovarla a questo link:

Simpson's City MAP

Qualcosa di più di una semplice mappa

Conoscete uMap? Si tratta di un servizio, Francese, che offre dei semplici strumenti per creare mappe web personalizzate. La mia scelta di creare la stessa mappa con questo servizio, è basata sul fatta, che così, ognuno può contribuire ad inserire i POI. Fantastico, vero? Vai alla mappa collaborativa >> umap.openstreetmap.fr/simpsons-city-map-citymapper

Simpson's City MAP - citymapper UMAP
Categories
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.


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]

Categories
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.


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

Categories
WebGIS

Tutorial per creare mappe di foto con geotag o con coordinate

Link utili:

Categories
WebGIS

uMap: come creare una mappa web in stile Open

Dopo il video tutorial su Google MyMaps, ecco un ottimo concorrente, un po’ più #open.

Questa piattaforma Francese per creare mappe ricche di contenuti, ma anche tematiche, sembra avere tutte le caratteristiche per creare delle mappe con una certa facilità. È molto interessante l’applicazione di stili personalizzati e le mappe di base dei vari render di OpenStreeMap, la rendono un prodotto completo.

Questo è l’esempio della mappa creata nel tutorial: http://u.osmfr.org/m/70514/

All’inizio ho trovato qualche difficoltà, forse per l’abitudine ad usare altri strumenti, ma una volta preso confidenza, diventa facile cambiare colori e aggiungere icone personalizzate.

Dal punto di vista dei contenuti che si possono inserire, oltre a punti, linee e poligoni, nei popup si possono inserire testi formattati e immagini.

Creare una mappa con uMap è semplice e poi la condivisione è una vera chicca. Sembra possibile dare accesso ad editor ulteriori. Questo aggiunge una stella, portando a 4/5 il mio giudizio.

La personalizzazione delle icone, anche se è possibile gestirle icone le variabili, non risulta così sviluppata, ma spero che sia uno dei prossimi sviluppi.

Categories
WebGIS

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.it/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 600×400

<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

Mentre in CodePen si possono aggiungere cliccando sull'ingranaggio che si trova da parte ai box HTML o CSS o JAVASCRIPT
Mentre in CodePen si possono aggiungere cliccando sull’ingranaggio che si trova da parte ai box HTML o CSS o JAVASCRIPT

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 Javascript e CSS Material Design

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 Material Design titolo

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 JS Material Design: Titolo overlay

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]

Categories
WebGIS

6 LeafletJS video tutorial dalla web map al webgis

Creando questa serie di video tutorial mi sono accorto come LeafletJS, la libreria per mobile mapping, che attualmente sta spopolando su blog e forum, possa essere la base per creare qualsiasi tipologia di mappa.

I requisiti principali sono la conoscenza del codice HTML ed essere dentro la logica dei GIS. Conoscere il codice Javascript, come vedrete in questi tutorial, è secondario, perché pur essendo un linguaggio di programmazione, a volte, difficile da comprendere, ha però la particolarità di fornire “variabili” intuitive che guardando il codice, non risulta poi così difficile.

Elenco completo lezioni LeafletJS

  1. il codice HTML e qualche stile
  2. HTML, CSS e Bootstrap
  3. qgis2leaf … e dopo?
  4. condividi la tua mappa (parte 1)
  5. condividi la tua mappa (parte 2)
  6. carica un file GeoJSON in modo diretto
Categories
WebGIS

LeafletJS: qgis2leaf … e dopo?

Abbiamo visto l’HTML da 0; gli abbiamo aggiunto un stile Bootstrap; … e adesso, cosa possiamo fare con l’output di qgis2leaf?

Link mappa esercizio 3: leafletjs_example/index_03

  • 0:37 carica i dati dei comuni d’Italia ISTAT in QGis
  • 1:06 crea query dei comuni della provincia di Milano
  • 1:58 verifica proiezione EPSG 3857
  • 3:24 utilizzo del plugin qgis2leaf con impostazioni
  • 5:33 come è composta la cartella di outpu di qgis2leaf
  • 6:57 prime modifiche file css mappa leafletJS
  • 8:25 carica cartella output su hosting
  • 10:12 start editing index.html < head >
  • 11:09 var title = new L.Control()
  • 12:37 identazioni per migliorare la visione del codice
  • 19:00 control layer collapsed
  • 19:50 come gestire il codice HTML nel control title
  • 23:34 popup, tabella e milgiorare la scrittura dell’HTML quando si usa il JavaScript
  • 26:49 selezionare le informazioni che servono nel popup
  • 29:38 gestire i colori dei poligoni (trasparenza, colore, bordo e riempimento)
  • 31:44 creare una funzione per gestire dinamicamente i colori dei poligoni getColor
  • 37:40 con la stessa funzione, creare un tematismo con valore graduato in base alla superficie
  • 40:48 creare un controllo legenda (integrare gli oggetti di altre mappe senza fare tutto da capo)
  • 44:50 creare un rettangolo colorato per la legenda

[wc_button type=”primary” url=”https://youtu.be/pMwlMIwAwaw” title=”Guarda Video” target=”self” position=”float”]Guarda Video 3[/wc_button]

Elenco completo lezioni LeafletJS

  1. il codice HTML e qualche stile
  2. HTML, CSS e Bootstrap
  3. qgis2leaf … e dopo?
  4. condividi la tua mappa (parte 1)
  5. condividi la tua mappa (parte 2)
  6. carica un file GeoJSON in modo diretto