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

Quest'operaèdistribuitaconLicenzaCreativeCommonsAttribuzione-Condividiallostessomodo4.0Internazionale.
pianificazioneterritorialecomunale:nonsolomappediPJHookerwww.cityplanner.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> ...
Titolo1
Titolo2

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

PC

Gli elementi base di una mappa
contenitore principale
contenitore
gestore
livelli
contenitore
navigazione
elementi
geometrici
popup
contenitore
attribuzione

Non tutti i contenitori sono uguali
contenitori con funzioni specifiche
- poco personabilizzabili -
contenitori con funzioni generiche
- molto personabilizzabili -

Contenitori opzionali: sidebar
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
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
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”
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”
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
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
TUTORIAL
http://leafletjs.com/examples.html
PLUGIN
http://leafletjs.com/plugins.html
GITHUB
https://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-aggregate
turf-average
turf-bboxPolygon
turf-bearing
turf-bezier
turf-buffer
turf-centroid
turf-concave
turf-convex
turf-count
...
turf-deviation
tturf-simplify
turf-sum
turf-tin
turf-union
turf-variance
turf-within
...

Scegliere la SCALA
Ad ogni scala, corrisponde una certa quantità
di dati e un uso specifico

Carte
geografiche
scala
1:10.000.000
PICCOLA
GRANDE
Carte simboliche con riferimenti
geografici approsimativi per
rappresentare informazioni
socio-economiche
⇒ comparazione
indicatori regionali
⇒ grandi infrastrutture
⇒ trasporto marittimo e
aereo
⇒ parchi nazionali
SCALA

Carte
corografiche
scala
1:1.000.000
PICCOLA
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
SCALA

Carte
topografiche
scala
1:150.000
PICCOLA
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
SCALA

Carte
tecniche
scala
1:10.000
PICCOLA
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
SCALA

Carte
tecniche
scala
1:2.000
PICCOLA
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
SCALA

Quante informazioni
mappiamo?
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.
LEGGIBILITÀ
n° ELEMENTI- +
+
elementi
base
spazio
box
max
mappa
dinamica
mappa
statica

Scegliere lo SCHEMA
Ogni tipo di mappa può diventare una mappa
dinamica

MAPPA
TITOLO
LEGENDA
ELENCO
ELEMENTI
PANORAMICA
RICERCA
MENÙ

MAPPA1
TITOLO
SCHEDA
MAPPA2
RICERCA
MENÙ
PHOTO1
PHOTO2

MAPPA
TITOLO
ARTICOLO
CONTENUTI
SIMILI/VICINI
RICERCA
MENÙ
APPROFONDI
MENTI
ALBUM
PHOTO

MAPPA
ARGOMENTO
UTENTI
TITOLO
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
DISCUSSIONE
ALTRO
DISCUSSIONE
MODERATORI
MENÙ

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

DATABASE
PostGIS, Spatilite, MySQL
CONTENT MANAGEMENT
SYSTEM
Wordpress, Drupal, Joomla
FRAMEWORK
ONLINE MAP
OpenLayers, LeafletJS, TurfJS
GeoJSON
Geometrie spaziali con attributi in JavaScript Object Notation
PROGRAMMING
LANGUAGE
PHP, JavaScript

pianificazione territoriale comunale: non solo mappe di PJHooker www.cityplanner.it
NEXT
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
www.cityplanner.it - lima.cityplanner@gmail.com
#GISTIPS

Dal geoportale alla mappa web mediante leafletjs

Recommended

Recommended

More Related Content

More from City Planner

More from City Planner (20)

Dal geoportale alla mappa web mediante leafletjs