Dal geoportale alla mappa web mediante leafletjs
36
GIS open source per la Pianificazione Territoriale Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale .
-
Upload
city-planner -
Category
Data & Analytics
-
view
37 -
download
1
Transcript of Dal geoportale alla mappa web mediante leafletjs
GIS open source per la Pianificazione Territoriale
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
DAL GEOPORTALE ALLA MAPPA WEB MEDIANTE LEAFLETJS
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
HTML: una mappa online è un elemento della pagina <html>
TEXT: nella pagina si possono inserire titoli <h1>..<h6>, paragrafi <p> e altri tipi di testo personalizzati <code>, <quote> ...
Titolo1Titolo2
<!-- librerie necessarie per la visualizzazione della pagina-->
HEAD: questa parte è nascosta, ma importante, perchè sono caricate le impostazioni e i metadati della pagina
DIV: la mappa è inserita in un contenitore, di solito un <div> a cui è associato un id, che permette al codice - ad esempio - JavaScript di controllare il contenuto, mediante il richiamo di funzioni di specifiche librerie
HTML5: in una pagina web, si possono inserire molti elementi di vario formato, come foto, video, grafici … ogni elemento è personabilizzabile, da chiunque abbia accesso come webmaster e i CMS come Wordpress, facilitano l’inserimento. Per conoscere tutto ciò che può essere inserito vedi questa pagina
Fogli di stile: CSS
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Ogni elemento disponibile nel linguaggio HTML5, può essere manipolato attraverso i CSS.Ogni elemento può avere proprietà specifiche, ma per comodità si crea una struttura logica a cui
associare dei riferimenti di stile: tutti gli H1, tutte le immagine, lo sfondo della prima pagina, il bordo delle miniature ...
PC
Una mappa, racchiusa in un contenitore è un insieme di elementi HTML5, gestibili come una normale pagina web
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
PC
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
<!-- una mappa full-screen è un contenitore che occupa esattamente il
100% dell’area dello schermo, definibile tramite i fosgli di stile CSS spesso inseriti
nella parte non visibile <head> -->
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Gli elementi base di una mappacontenitore principale
contenitoregestorelivelli
contenitorenavigazione
elementigeometrici
popup
contenitoreattribuzione
Non tutti i contenitori sono uguali
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
contenitori con funzioni specifiche- poco personabilizzabili -
contenitori con funzioni generiche- molto personabilizzabili -
Contenitori opzionali: sidebar
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Le sidebar permettono di inserire contenuti anche voluminosi nelle mappe… all’inizio la mappa sembrava contenuta nella pagina html, adesso la pagina html sembra contenuta nella mappa … ma è solo un gioco di contenitori possibile con CSS e librerie JavaScript apposite
Creare contenitori con stile: Bootstrap
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Bootstrap http://getbootstrap.com/ è integrabile facilmente in ogni pagina HTML e aggiunge librerie Javascript, jQuery e CSS che danno la possibilità di inserire subito molti elementi con “stile” - non solo Bootstrap >> 8 bootstrap alternatives
Bootstrap + LeafletJS = Bootleaf
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
La dimostrazione di come integrare diverse librerie è concretizzata da questo interessante progetto, Bootleaf. Con questo template, disponibile e scaricabile su GitHub si può personalizzare ogni singolo elemento e prendere qualsiasi elemento ed utilizzarlo sulle proprie mappe.
Ciò che vedi lo puoi “copiare”
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Le mappe LeafletJS usano codice “client-side” che significa anche che quello che vedi può essere ispezionato, studiato e copiato, considerando la licenza con cui è distribuito!
Ciò che vedi lo puoi “copiare”
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Prova a visualizzare la sorgente pagina e metterla in una tua pagina sul tuo hosting, tieni d’occhio i riferimenti ../dist/leaflet...
Gli elementi della mappa
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
Le base map: ho perso il conto dei leafletjs providers
I marker: c’è veramente un mondo di icone
Circle, line, polygon: principalmente si può cambiare il bordo e il riempimento
Dove studiare?consiglio di partire con LeafletJS
Que
st'o
per
a è
dis
trib
uita
co
n Li
cenz
a C
reat
ive
Co
mm
ons
Att
rib
uzio
ne -
Co
ndiv
idi a
llo s
tess
o m
od
o 4
.0 In
tern
azio
nale
.
pian
ific
azio
ne t
erri
tori
ale
com
unal
e: n
on s
olo
map
pe d
i PJH
ooke
r ww
w.c
ityp
lann
er.it
TUTORIALhttp://leafletjs.com/examples.html
PLUGINhttp://leafletjs.com/plugins.html
GITHUBhttps://github.com/search?leafletjs
LeafletJS
An Open-Source JavaScript Library for Mobile-Friendly Interactive Maps
OpenLayer3
A high-performance, feature-packed library for all your mapping needs.
TurfJS
…turf-aggregateturf-averageturf-bboxPolygonturf-bearingturf-bezierturf-bufferturf-centroidturf-concaveturf-convexturf-count...turf-deviationtturf-simplifyturf-sumturf-tinturf-unionturf-varianceturf-within...
.js
Scegliere la SCALA
Ad ogni scala, corrisponde una certa quantità di dati e un uso specifico
Carte geografiche
scala
1:10.000.000PICCOLA
GRANDE
Carte simboliche con riferimenti geografici approsimativi per rappresentare informazioni socio-economiche⇒ comparazione
indicatori regionali⇒ grandi infrastrutture⇒ trasporto marittimo e
aereo⇒ parchi nazionali
SCA
LA
Carte corografiche
scala
1:1.000.000PICCOLA
GRANDE
Carte simboliche con riferimenti geografici discreti per rappresentare informazioni che riguardono il territorio, ma dal punto di vista sistemico⇒ aree metropolitana⇒ rete autostrade e
ferroviarie⇒ flussi pendolari⇒ centri di sviluppo⇒ rete ecologica⇒ rete idrografica
SCA
LA
Carte topografiche
scala
1:150.000PICCOLA
GRANDE
Carte con riferimenti geografici riconoscibili, aiutano ad avere una visione di insieme per piani e programmi di città⇒ area metropolitana⇒ sistema infrastrutture
locali⇒ destinazioni d’uso⇒ rischio idrogeologico⇒ valutazione ambientale
strategica⇒ aree verdi⇒ sistemi urbani
SCA
LA
Cartetecniche
scala
1:10.000PICCOLA
GRANDE
Carte con riferimenti geografici precisi, che da qui in poi si distinguono solo dal numero di elementi mappati⇒ impronta degli edifici⇒ destinazioni d’uso⇒ toponomastica
principale⇒ edifici pubblici, parchi
urbani⇒ rete trasporto locale⇒ studio del traffico
urbano
SCA
LA
Cartetecniche
scala
1:2.000PICCOLA
GRANDE
Carte con dettaglio geografico elevato, permettono l’inserimento di tutte le informazioni necessarie per un piano di livello comunale e nella maggior parte dei casi, non è necessario ingrandire ulteriormente⇒ attività commerciali⇒ accessibilità⇒ informazioni turistiche⇒ informazioni dinamiche⇒ navigazione⇒ censimento del verde⇒ servizi sottosuolo
SCA
LA
Quante informazionimappiamo?
Il numero di elementi in una mappa influisce notevolmente sulla leggibilità: uno dei motivi per cui si sceglie l’utilizzo delle mappe dinamiche è migliorare questo punto critico.
Quando in una carta statica si usano una simbologia riconoscibile e un box per la legenda, la leggibilità della mappa diminuisce. A quel punto servirebbe proprio cliccare sulla mappa stampata, oppure ricorrere ad una tabella per riconoscere il codice o il simbolo disegnato.
La mappa dinamica, parte proprio da questa necessità: si interroga il punto e si ottengono le informazioni disponibili.
LEG
GIB
ILIT
Àn° ELEMENTI- +
+
elementi base
spazioboxmax
mappadinamica
mappastatica
Scegliere lo SCHEMA
Ogni tipo di mappa può diventare una mappa dinamica
MAPPA
TITOLO
LEGENDA
MAPPA
TITOLO
LEGENDA
ELENCOELEMENTI
PANORAMICA
RICERCA
MENÙ
MAPPA1
TITOLO
SCHEDA
MAPPA2
RICERCA
MENÙ
PHOTO1
PHOTO2
MAPPA
TITOLO
ARTICOLO
CONTENUTISIMILI/VICINI
RICERCA
MENÙ
APPROFONDIMENTI
ALBUMPHOTO
MAPPA
ARGOMENTO
UTENTI
TITOLO
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
ALTRO
DISCUSSIONE
MODERATORIMENÙ
Realizzare una MAPPA DINAMICA
Le mappe dinamiche realizzate con il GIS possono condividere il database con un CMS, dando vita a un GEOBLOG
CMS
MAPPA
ARGOMENTO
UTENTI
GEOBLOG: module customization
ALTRO
MODERATORI
MENÙ
DISCUSSIONE
ARTICOLO
RICERCA
APPROFONDIMENTI
PHOTOALBUM
SIMILI/VICINI
SCHEDA
LEGENDAELENCO ELEMENTI
PANORAMICA
DOWNLOAD
GEOLOCALIZATION
SOCIALNETWORK
LIVETRACKING
TIMELINE
GEOCODING RESPONSIVE COMINGSOON
DATABASEPostGIS, Spatilite, MySQL
CONTENT MANAGEMENT SYSTEM
Wordpress, Drupal, JoomlaFRAMEWORKONLINE MAP
OpenLayers, LeafletJS, TurfJS
GeoJSONGeometrie spaziali con attributi in JavaScript Object Notation
PROGRAMMINGLANGUAGEPHP, JavaScript
pianificazione territoriale comunale: non solo mappe di PJHooker www.cityplanner.it
NEXTQuest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
www.cityplanner.it - [email protected]
#GISTIPS
