Tag: HTML5

Categorie
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
Categorie
Lezioni WebGIS

WEBMAP: struttura sorgente pagina

Sono arrivato a creare il 16° ebook e ho l’obiettivo di arrivare a 99, per creare la mia raccolta condivisa, di risorse sui GIS open source, per la pianificazione territoriale.

Per accedere a questa collezione, nella seguente pagina ho raccolto le informazioni necessarie per conoscere i canali di comunicazione che utilizzo http://goo.gl/C3ewyD.

WEBMAP struttura della sorgente pagina

[wc_button type=”primary” url=”http://www.slideshare.net/pjhooker/webmap-struttura-della-sorgente-pagina” title=”WEBMAP: struttura sorgente pagina” target=”self” position=”float”]Visualizza slide[/wc_button]

Diverse discussioni nei vari forum, riportano quesiti, che sicuramente derivano da metodologie acquisite sui software detti desktop, dove bisogna adattarsi ai molti “bottoni” disponibili e alle interfacce complesse, che solitamente non sono molte. Prima di tutti i software CAD, dove si rimane la maggior parte del tempo sull’area di disegno (o area di lavoro) e poi si passa al layout per la stampa e la rifinitura della tavola. Nei GIS, troviamo invece qualche schermata in più, prima di tutti la visualizzazione della tabella (o attributi), ma anche le schermate guidate per fare operazioni di geoprocessing o analisi di altro tipo.

L’evoluzione naturale, che ha portato allo sviluppo dei webgis, continua a mantenere questa logica, dove c’è una mappa centrale, una toolbar con vari strumenti e delle sidebar con legenda e informazioni varie.

GeoMoose - WebGIS

Questi sistemi molto validi, permettono la visualizzazione e la gestione dei geodata, senza installare alcun software, ma semplicemente avendo la connessione ad internet e di solito le credenziali di accesso.

Lo scopo di questa presentazione teorica, è quella di guardare questi webgis, o mappe online, con una logica più semplice, adatta soprattutto a visualizzazione veloci delle informazioni e adatte ad un pubblico più ampio, che non necessariamente sappia usare un software GIS. Questo però non esclude l’utilizzo ai tecnici, che possono comunque trovare beneficio da questi strumenti “semplificati” perché la navigazione per la ricerca delle informazioni, diventa naturale, essendo più simile ad un blog che ad un gis.

Questo documento presenta una novità visto che la diffusione del linguaggio HTML5, risale a pochi anni fa e lo sviluppo di queste mappe è proprio legato al suo successo.

Vi anticipo queste righe:

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 … Una mappa, racchiusa in un contenitore è un insieme di elementi HTML5, gestibili come una normale pagina web continua sulle slide >>

Categorie
Map tutorial

Come trasformare WordPress in un CMS geospaziale

Una serie di video vi guideranno come tutorial nella creazione da zero di un CMS Geospaziale.
!!! IMPORTANTE !!!
Il primo video, ma per continuare la serie di questo tutorial ho bisogno che dimostriate interesse. al 10° commento, contandone uno per ogni profilo, pubblicherò la seconda parte.

Ecco i passi per creare un Geospatial CMS

  1. installare WordPress
  2. creare una mappa OpenLayers + GeoJSON
  3. automatizzare la creazione del file GeoJSON
  4. integrare la mappa in Worpdress

[wc_row][wc_column size=”one-half” position=”first”]

[wc_image attachment_id=”4414″ size=”” title=”HOW TO CMS GEO: piano e regole ” alt=”HOW TO CMS GEO: piano e regole ” caption=”” link_to=”post” url=”https://youtu.be/ogNfzlf-ZrM” align=”none” flag=”Play” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-half” position=”last”]

HOW TO CMS GEO: piano e regole

[/wc_column][/wc_row]

[wc_row][wc_column size=”one-half” position=”first”]

[wc_image attachment_id=”4416″ size=”” title=”come trasformare WordPress in un CMS geospaziale  ” alt=”come trasformare WordPress in un CMS geospaziale  ” caption=”” link_to=”post” url=”https://youtu.be/tSQIahCTkWw” align=”none” flag=”Play” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-half” position=”last”]

HOW TO CMS GEO: come trasformare WordPress in un CMS geospaziale

[/wc_column][/wc_row]

[wc_row][wc_column size=”one-half” position=”first”]

[wc_image attachment_id=”4417″ size=”” title=”come trasformare WordPress in un CMS geospaziale ” alt=”come trasformare WordPress in un CMS geospaziale  ” caption=”” link_to=”post” url=”https://youtu.be/Q9a5Z9oFPmU” align=”none” flag=”Play” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-half” position=”last”]

HOW TO CMS GEO: come trasformare WordPress in un CMS geospaziale

[/wc_column][/wc_row]

[wc_row][wc_column size=”one-half” position=”first”]

[wc_image attachment_id=”4420″ size=”” title=”come trasformare WordPress in un CMS geospaziale ” alt=”come trasformare WordPress in un CMS geospaziale  ” caption=”” link_to=”post” url=”https://youtu.be/qlmX0DYypq0″ align=”none” flag=”Play” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-half” position=”last”]

HOW TO CMS GEO: come trasformare WordPress in un CMS geospaziale 3 di 4

[/wc_column][/wc_row]

[wc_row][wc_column size=”one-half” position=”first”]

[wc_image attachment_id=”4421″ size=”” title=”come trasformare WordPress in un CMS geospaziale ” alt=”come trasformare WordPress in un CMS geospaziale  ” caption=”” link_to=”post” url=”https://youtu.be/yJvGp7HAgI4″ align=”none” flag=”Play” left=”” top=”” right=”0″ bottom=”20″ text_color=”” background_color=”” font_size=”” text_align=”center” flag_width=””][/wc_image]

[/wc_column][wc_column size=”one-half” position=”last”]

HOW TO CMS GEO: come trasformare WordPress in un CMS geospaziale 4 di 4

[/wc_column][/wc_row]