WEBMAP: struttura della sorgente pagina

pianificazione territoriale comunale: non solo mappe di PJHooker www.cityplanner.it
16GIS open source per la Pianificazione Territoriale
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
WEBMAP
struttura della
sorgente pagina

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

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
NEXTStop
Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.
www.cityplanner.it - lima.cityplanner@gmail.com
#GISTIPS

WEBMAP: struttura della sorgente pagina

Recommended

Recommended

More Related Content

More from City Planner

More from City Planner (20)

WEBMAP: struttura della sorgente pagina