webmap struttura della sorgente pagina
TRANSCRIPT
pianificazione territoriale comunale: non solo mappe di PJHooker www.cityplanner.ithttp://www.cityplanner.it/webmap-struttura-della-sorgente-pagina/
GIS open source per la Pianificazione Territoriale
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
WEBMAPstruttura della sorgente pagina
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 mappa
contenitore 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
DATABASEPostGIS, Spatilite, MySQL
CONTENT MANAGEMENT
SYSTEMWordpress, Drupal, Joomla
FRAMEWORKONLINE MAP
OpenLayers, LeafletJS, TurfJS
GeoJSONGeometrie spaziali con attributi in JavaScript Object Notation
PROGRAMMINGLANGUAGE
PHP, JavaScript
pianificazione territoriale comunale: non solo mappe di PJHooker www.cityplanner.it
NEXTStop
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
www.cityplanner.it - [email protected]
#GISTIPS