Sviluppare un apps windows 8 (html5/javascript), utilizzando gli OPENDATA del Comune di Torino, con la libreria javascript OpenLayers.

Stefano Marchisio Stamarch@virgilio.it

Utilizzare gli OPENDATA
del Comune di Torino
Per creare un apps windows 8 (html5/javascript)
con la libreria javascript OpenLayers

Windows 8 apps

I dati utilizzati sono presi dal GeoPortale del Comune Di Torino. "Base cartografica realizzata da
questa applicazione, integrata con Asl, Farmacie, Presidi ospedalieri, Pronto soccorso,
Perimetro ospedale, Edificato ospedale; 4/4/2013 della Città di Torino reperiti sul Geoportale
del Comune di Torino". Pertanto si ringrazia il Comune di Torino per aver messo a disposizione
i dati.

www.comune.torino.it/geoportale/index.htm

Windows 8 apps with html5/javascript

Windows 8 apps
Cosa sono gli opendata ?

Perche’ ho utilizzato OpenLayers/JavaScript ?
(perche’ abbiamo file geospaziali/GIS)

Perche’ ho messo l’apps nel tag iframe ?
(local-context/web-context)

Nella seconda parte delle slide ci sono alcuni snipshot di codice che introducono la
libreria OpenLayers, e fanno una panoramica sulle sue funzionalita’ di base.


Windows 8 apps
Cosa sono gli opendata ?

I dati aperti sono dati che possono essere liberamente utilizzati, riutilizzati e
ridistribuiti da chiunque, soggetti alla necessità di citarne la fonte e di condividerli
con lo stesso tipo di licenza con cui sono stati originariamente rilasciati.

Grazie alla loro natura, e cioè al fatto di essere accessibili e condivisibili, si
prestano bene come strumento di utilità per i cittadini, e possono essere alla base
di vari progetti. Purtroppo, le pubbliche amministrazioni sono spesso reticenti nel
divulgarli; anche se ultimamente, alcune amministrazioni virtuose stanno iniziando
a rendere pubblici i loro dati. Tra queste troviamo la Regione Piemonte.

http://www.comune.torino.it/geoportale/


Windows 8 apps
Gli opendata possono essere trovati in 3 diversi formati

In formato file CSV, GML, KML, GeoJson, ShapeFile, etc ...

Servizi restituiscono un immagine (OGC/WMS)

Servizi restituiscono dei dati grezzi (OGC/WFS)

I dati pubblicati sul geoportale del Comune di Torino sono in formato ShapeFile
oppure erogati sotto forma di servizio WMS. Pertanto ci troviamo di fronte ad un
sistema GIS.


Windows 8 apps
Cosa significano le sigle WMS e WFS

Un GIS (o Geographic information system) e' un sistema computerizzato che
permette l'acquisizione, la registrazione, l'analisi, la visualizzazione e la
restituzione di informazioni derivanti da dati geografici.
Database relazionale (dato raster e dato vettoriale/future)


Windows 8 apps
Dato raster


Windows 8 apps
Dato vettoriale (o future)

Ad ogni tipologia di dato corrisponde una tabella, che verra' poi associata
ad un layer in fase di visualizzazione (cioe' la citta' saranno su un layer e
le vie su un' altro layer …). Oltre ai dati geografici esistono degli attributi
generici . Il risultato restituito puo' essere di 2 tipi:

• Tipo immagine, ovvero la proiezione viene effettuata dal server di
mappe, il codice presente sul client si limitera' a visualizzare l' immagine
restituita sulla mappa.

• Dato grezzo, vengono generalmente restituiti dati in formato json/xml,
sara' poi il codice all' interno del client che elabora e proietta i dati sulla
mappa (possiamo creare dei popup).


Windows 8 apps


Windows 8 apps
Esistono 2 categorie di sistemi GIS: "software proprietario" e "software libero“.

• Nel “software proprietario" la leadership e' detenuta da ESRI( ArcGis).

• Nel “software libero“ esistono piu’ fornitori (conformi alle specifiche OCG).

Open Geospatial Consortium (o OGC) è un'organizzazione internazionale
noprofit, che si occupa di definire le specifiche tecniche per servizi geospaziali
e di localizzazione (come W3C).

I geoportale del Comune di Torino utilizza servizi WMS, pertanto conformi alle
specifiche OCG. Nel corso della presentazione verrano presi in considerazione
solamente prodotti OCG.


Windows 8 apps

Due dei principali servizi all’interno di un server di mappe conforme alle
specifiche OGC sono: WMS e WFS.

• WMS (Tipo immagine), ovvero la proiezione viene effettuata dal server di
mappe, il codice presente sul client si limitera' solamente a visualizzare l'
immagine restituita sulla mappa.

• WFS (Dato grezzo), vengono generalmente restituiti dati in formato
json/xml, sara' poi il codice all' interno del client che elabora e proietta i dati
sulla mappa. Sara’ possibile avere dei popup.


Windows 8 apps

Riepilogando in rete possiamo trovare
file CSV, GML, KML, GeoJson, ShapeFile, etc ...

Servizi restituiscono un immagine (OGC/WMS)

Servizi restituiscono dei dati grezzi (OGC/WFS)


Windows 8 apps
Possiamo identificare 3 categorie di prodotti che adottano standard OCG.

• Librerie javascript - sono in grado di interagire con un server di mappe dall'
interno di una pagina HTML. La libreria piu' conosciuta e' OpenLayer.

• Lato client - troviamo di solito dei programmi desktop, sono in grado di
collegarsi ad un server di mappe (piuttosto che leggere dei file geospaziali
locali), per poi effettuare delle elaborazioni. I prodotti piu' conosciuti sono: QGis,
gvSIG, etc ...

• Lato server - troviamo di solito dei server di mappe, hanno un database
geospaziale, e sono in grado di generare delle mappe (raster/vettoriali). I prodotti
piu' conosciuti sono: geoserver, mapserver, QGIS Server, etc ...


Windows 8 apps
Un'applicazione Windows 8, pur utilizzando gli stessi linguaggi per lo sviluppo
web, non è un' applicazione web. Per problematiche di sicurezza, alcuni
comportamenti leciti all'interno di un contesto web, sono proibiti all'interno di un'
applicazione Windows 8.

• È solo possibile caricare gli script presenti all'interno del package con cui è stata
deployed l'applicazione. Non è possibile inserire un tag SCRIPT il cui attributo src
punta ad un file presente su un server remoto.

• Nessun metodo che provi a manipolare il DOM è considerato sicuro. La stessa
cosa vale nel caso in cui si tenta di creare in modo dinamico il contenuto della
pagina.

Per questo motivo le librerie javascript classiche potranno avere dei problemi.


Windows 8 apps
Il runtime di Windows 8 esegue il codice all' interno di una standbox di sicurezza
chiamata anche "local-context". Quanto si manipola il DOM tramite le proprietà
"innerHTML" o "outerHTML", il run time di Windows 8 effettua un parser del
valore inserito. Inserendo il codice all’interno di un iframe ci troveremo ad operare
nel “web-context”.


Windows 8 apps
Utilizzando un tag iframe, avremo 2 contesti di esecuzione completamente
disaccoppiati, possono comunicare tramite messaggi: "window.postMessage".

Possiamo accedere ai nostri dati in 3 diversi modi:

• Inserendo i dati all’interno dell’ IsolatedStorage nel formato file che desideriamo.
Dall’interno della nostra applicazione (nel tag iframe) leggiamo i dati tramite l’invio
di un messaggio al local-context. Nella nostra applicazione (nel tag iframe)
dobbiamo registrare un handler che riceve il messaggio di risposta dal local-
context.

• Utilizzando un servizio WMS (verranno restituite immagini)

• Utilizzando un servizio WFS (verranno restituiti dati grezzi)


Windows 8 apps

Il programma desktop QGis permette di accedere a servizi WMS/WFS oltre a
leggere file locali in formato: CSV, GML, KML, GeoJson, ShapeFile, etc ...

Nel caso decidiamo di operare con dei file in un certo formato , ed i file forniti
siano in un’ altro formato; possiamo utilizzare QGis per convertirli nel formato
richiesto. Con QGis e’ anche possibile applicare dei filtri, per poter convertire solo
un certo sottoinsieme di dati.


Windows 8 apps

Trovandoci di fronte a servizi e dati conformi alle specifiche OCG opteremo per
l’utilizzo del framework opensource “OpenLayers” (conforme a OCG).

http://openlayers.org/

L' utilizzo di un framework javascript (anche se più ostico da utilizzare), permette
di riutilizzare parti di codice, in applicazioni che hanno come target device diversi
da Windows 8.


Windows 8 apps

DEMO


Windows 8 apps

Vediamo ora come scrivere il nostro client html5/javascript.
Verra’ utilizzato OpenLayers come framework di sviluppo.


Windows 8 apps
Abbiamo 2 tipi di coordinate: le coordinate geografiche e le coordinate di
proiezione. Le prime sono espresse in latitudine e longitudine (e sono riferite alla
terra), le seconde sono espresse in metri (e sono riferite alla superfice piana di
proiezione).

Le coordinate di proiezione sono espresse in coordinate cartesiane x e y.


Windows 8 apps

Una proiezione cartografica è il risultato di trasformazioni geometriche,
matematiche o empiriche di punti geografici espressi in coordinate
geografiche in punti espressi in coordinate di proiezione.

Le proiezioni vengono usate in cartografia per rappresentare su un piano
(con le carte geografiche) un fenomeno che nella realtà esiste sulla
superficie della sfera (più propriamente un ellissoide).

Ciascuno dei 2 sistemi di coordinate visti, puo’ essere a sua volta suddiviso
in: sistemi globali e sistemi locali.


Windows 8 apps

Consultando il geoportale del Comune di Torino si puo’ leggere.

http://www.comune.torino.it/geoportale/

I dati della Città di Torino sono georiferiti nel sistema di riferimento Gauss
Boaga - Roma 40. I WMS sono però esposti in diversi sistemi di riferimento.


Windows 8 apps
OpenLayers ha 2 proiezioni di dafault: “EPSG:4326”, “EPSG:900913”

• Quando compare il codice “EPSG:4326” , ci riferiamo a proiezioni che hanno
longitudine e latitudine come coordinate.

• Quando compare il codice “EPSG:900913”, ci riferiamo a proiezioni che hanno
metri in formato cartesiano x/y come coordinate.

E’ possibile passare da un sistema di coordinate all’altro con delle conversioni.

E’ possibile convertire un file da un formato all’altro utilizzando QGis.


Windows 8 apps

var lonlat1 = new OpenLayers.LonLat(v1, v2);
var proj1 = new OpenLayers.Projection( "EPSG:4326" );
var proj2 = new OpenLayers.Projection("EPSG:900913");
var lonlat2 = lonlat1.transform(proj1, proj2);

var point1 = new OpenLayers.Geometry.Point(v1, v2);
var proj1 = new OpenLayers.Projection( "EPSG:4326" );
var proj2 = new OpenLayers.Projection("EPSG:900913“);
var point2 = point1.transform(proj1, proj2);

Il precedente snipshot di codice mostra come effettuare delle conversioni.


Windows 8 apps

In OpenLayers esistono 2 tipi di layer: BaseLayer or OverlayLayer. Quando si apre
lo LayerSwitcher, si possono vedere 2 tipi di Layer. I BaseLayers sono
mutualmente esclusivi e sono rappresentati da radio-buttons. Gli Overlays non
sono mutualmente esclusivi e sono rappresentati da checkboxes. Le mappe base
appartengono alla categoria dei BaseLayer.

Il codice javascript delle slide successive crea una mappa base (utilizzando quelle
di google). Per poter interagire con la mappa sono stati aggiunti i controlli
MousePosition, LayerSwitcher, PanZoomBar che creano i widget corrispondenti.


Windows 8 apps
<html>
<head>
<title>Esri Map and jQuery</title>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
<script src="Scripts/applicationA01.js" type="text/javascript"></script>
</head>
<body>
<div>
<div id="map" style='width: 1000px; height: 600px;'></div>
</div>
</body>
</html>

All’interno della pagina HTML5 dobbiamo inserire il tag div che conterra’ la
nostra mappa. Verra’ poi referenziato all’interno del codice javascript.


Windows 8 apps
var controlsArray = [
new OpenLayers.Control.MousePosition({}),
new OpenLayers.Control.LayerSwitcher({}),
new OpenLayers.Control.PanZoomBar({}),
];

var options = getExtend();
var map = new OpenLayers.Map('map', options);
map.addControls(controlsArray);

var base1 = new OpenLayers.Layer.Google("Google Streets", {
type: google.maps.MapTypeId.TERRAIN
});
type: google.maps.MapTypeId.HYBRID
});
type: google.maps.MapTypeId.SATELLITE
});

map.addLayers([base1, base2, base3]);

Il precedente snipshot crea una mappa base tramite la classe "OpenLayers.Map"


Windows 8 apps

In OpenLayers esiste un discreto numero di controlli che permettono di creare
i widget che verranno poi visualizzati sulla mappa e permettono di interagire
con essa. Tali controlli sono inoltre integrati con gli oggetti di piu’ basso livello
(BaseLayer or OverlayLayer).


Windows 8 apps

Cio’ che segue sono gli OverlayLayer

Quando chiedo dei dati ad un servizio WMS, posso richiedere l’intero set di dati,
oppure fare delle query per far si che sull’immagine generata vengano disegnati
solo i dati richiesti.

Per impostare i filtri ho 2 possibilita’: CQL_FILTER oppure la proprieta’ filter
della classe “OpenLayers.Layer.WMS”.


Windows 8 apps

var wms1 = new OpenLayers.Layer.WMS('Layer-1',
'http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-
01/wmsg01/wms_sicc102_farmacie?',
{ layers: "farmacie“, transparent: true },
{ visibility: true }
);

'http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-01/wmsg01/wms_sicc112_ospedali?',
{ layers: "ospedali“, transparent: true },
);

map.addLayers([wms1, wms2]);

Il precedente snipshot aggiunge alla nostra mappa 2 layer di dettaglio WMS.
I layer (senza filtri) sono aggiunti alla mappa tramite il metodo “addLayers()”.


Windows 8 apps
CQL_FILTER: “descrizione LIKE ‘a%' ",
);

'http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-01/wmsg01/wms_sicc112_ospedali?',
{ layers: "ospedali“, transparent: true },
CQL_FILTER: “descrizione LIKE ‘b%' ",
);

map.addLayers([wms1, wms2]);

Il precedente snipshot aggiunge alla nostra mappa 2 layer di dettaglio WMS.
Verranno anche applicati dei filtri utilizzando la proprieta’ CQL_FILTER.


Windows 8 apps
filter: getFilter(“descrizione",“valore"),
);

function getFilter(key, value) {
var filter = new OpenLayers.Filter.Comparison({
type: OpenLayers.Filter.Comparison.EQUAL_TO,
property: key, value: value
});
var parser = new OpenLayers.Format.Filter.v1_1_0();
var filterAsXml = parser.write(filter);
var xml = new OpenLayers.Format.XML();
var filterAsString = xml.write(filterAsXml);
return filterAsString;
}
Il precedente snipshot aggiunge alla nostra mappa un layer di dettaglio WMS.
Verranno anche applicati dei filtri utilizzando la proprieta’ filter.


Windows 8 apps

Nelle slide che seguono vedremo come operare con dati grezzi. I dati saranno
forniti tramite un servizio WFS, oppure tramite una chiamata HTTP che chiede al
server un file in formato: GML,KML, GeoJSON, etc .


Windows 8 apps

Sopra le classi che utilizziamo di solito quando creiamo un layer di tipo Vector.


Windows 8 apps

Nel caso di un layer di tipo "Vector", i progettisti di OpenLayer hanno fatto una
scelta architetturale di base: creare una gerarchia di classi pluggabile. In questo
modo, pur mantenendo la stessa struttura, verranno utilizzate classi diverse in
base al tipo e al formato dei dati richiesti. La struttura e' composta da 3 diverse
componenti: protocol, format, strategies.


Windows 8 apps

• PROTOCOL - controlla come un "Vector" Layer comunica con la sorgente dati.
Puo' essere di 2 tipi: "OpenLayers.Protocol.WFS" nel caso i dati siano forniti da un
servizio WFS oppure "OpenLayers.Protocol.HTTP" nel caso i dati risiedano
all'interno di un file lato server.

• FORMAT - definisce e controlla il formato in cui sono stati memorizzati i dati sul
server; cioe' decodifica in dati in base al loro formato per poi inserirli in un' oggetto di
tipo grafo (GML, KML, GeoJSON, etc ...).

• STRATEGIES - definisce e controlla come debbano essere fatte le richieste al
server; cioe', se il download dei dati debba essere fatto tutto in una volata o in modo
progressivo.


Windows 8 apps
var strategies1 = [new OpenLayers.Strategy.Fixed()];
var protocol1 = new OpenLayers.Protocol.WFS({
version: "1.1.0",
srsName: "EPSG:900913",
url: url
featureNS: "http://www.openplans.org",
featureType: “farmacie",
geometryName: "the_geom"
});
var wfs1 = new OpenLayers.Layer.Vector("WFS", {
strategies: strategies1,
protocol: protocol1
});
map.addLayers([wfs1]);

Il precedente snipshot aggiunge alla mappa un layer WFS


Windows 8 apps

var url2 = "Data/filedati.gml";
var format2 = new OpenLayers.Format.GML({});
var protocol2 = new OpenLayers.Protocol.HTTP({
url: url2, format: format2
});
var vec2 = new OpenLayers.Layer.Vector('VectorLayer ', {
protocol: protocol2, strategies: strategies2
});

Il precedente snipshot aggiunge alla mappa un layer GML. Verra’ letto sul server
un file in formato GML e visualizzato.


Windows 8 apps

var url2 = "Data/filedati.kml";
var format2 = new OpenLayers.Format.KML({});
});
});

Il precedente snipshot aggiunge alla mappa un layer KML. Verra’ letto sul server
un file in formato KML e visualizzato.


Windows 8 apps

var url2 = "Data/ffiledati.geojson";
var format2 = new OpenLayers.Format.GeoJSON ({});
});
});

Il precedente snipshot aggiunge alla mappa un layer GeoJSON. Verra’ letto sul
server un file in formato GeoJSON e visualizzato.


Windows 8 apps

E’ anche possibile aggiungere alla mappa dei dati locali. Per fare cio’ si utilizzano
le classi: OpenLayers.Layer.Vector, OpenLayers.Feature.Vector.


Windows 8 apps

var data = -- array of row data --
var features = new Array();
for (var i = 0; i < data.length; i++) {
var pt1 = toWebMercator(data[i]);
var pt2 = new OpenLayers.Geometry.Point(pt1.lon, pt1.lat);
var feature = new OpenLayers.Feature.Vector(pt2);
features.push(feature);
}
var vec1 = new OpenLayers.Layer.Vector(' VectorLayer', {});
vec1.addFeatures(features);

Il precedente snipshot aggiunge alla mappa un layer di dati locali.


Windows 8 apps

Se un layer e’ fornito tramite un servizio WMS, avra’ lo stile con cui e’ stato
configurato il servizio. Nel caso richiamiamo un servizio WFS o utilizziamo dei
dati grezzi, possiamo definire uno stile.

E’ possibile definire uno stile di default e uno quando la future e’ selezionata. E’
anche possibile attribuire dei filtri allo stile in base al valore di una proprieta’ (per
esempio “citta”).

E’ possibile avere stili diversi in base allo zoom applicato alla mappa (scale
/resolution). In questo modo zoomando, avremo icone piu’ grandi o piu’ piccole.


Windows 8 apps

var style = {
“strokeWidth”: 5,
“strokeColor”: “#ff0000”
};
var url1 = "Data/filedata.geojson";
var format1 = new OpenLayers.Format.GeoJSON({});
});
var vec1 = new OpenLayers.Layer.Vector('VectorLayer - 1',{
protocol: protocol1,
style: style
});

Il precedente snipshot crea un layer con uno stile di default.


Windows 8 apps

var styleMap1 = createStyle();
var url1 = "Data/filedata.geojson";
var format1 = new OpenLayers.Format.GeoJSON({});
});
var vec1 = new OpenLayers.Layer.Vector('VectorLayer - 1',{
protocol: protocol1,
styleMap: styleMap1
});

Il precedente snipshot crea un layer con con uno stile. Nelle 2 slide successive e’
contenuto il corpo del metodo “createStyle()”.


Windows 8 apps
function createMapStyle(type) {
var defstyle, selstyle;
defstyle = { pointRadius: 3,
fillColor: “red",
strokeColor: "gray"
};
selstyle = { pointRadius: 6,
fillColor: "red",
strokeColor: "blue"
};
var odefstyle = new OpenLayers.Style(defstyle);
var oselstyle = new OpenLayers.Style(selstyle);
var mapstyle = new OpenLayers.StyleMap({
'default': odefstyle,
'select': oselstyle
});
return mapstyle;
}

Il precedente snipshot crea uno due stili. Uno di default e uno quando la future e’
selezionata. In questo caso e’ necessario creare un oggetto “OpenLayers.Control.
SelectFeature” da associare alla classe Vector.


Windows 8 apps
function createStyle() {
var style = new OpenLayers.Style();
var rule11= new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
property: "cap“, value: "10126",
}),
symbolizer: { pointRadius: 3, fillColor: "green“, fillOpacity: 0.8, strokeColor: "black“}
});
var rule12 = new OpenLayers.Rule({
filter: new OpenLayers.Filter.Comparison({
property: "cap“, value: "10139",
}),
symbolizer: {pointRadius: 3, fillColor: "red“, fillOpacity: 0.8, strokeColor: "black"}
});
style.addRules([rule11, rule12]);
var map = new OpenLayers.StyleMap(style);
return map;
}

Il precedente snipshot crea uno stile ed imposta un filtro sulla proprieta’ “cap”.


Windows 8 apps

Nel caso applico un filtro con il metodo appena visto, i dati sono tutti in
memoria. Verranno visualizzati solo i dati richiesti.


Windows 8 apps

Per avere un popup devo creare un’ oggetto “OpenLayers.Control.SelectFeature”
da associare all’ oggetto “OpenLayers.Layer.Vector”. Devo inoltre definire i
seguenti metodi: onSelect, onUnselect, onPopupClose.

var vec1 = new OpenLayers.Layer.Vector("VectorLayer1");
selectControl1 = new OpenLayers.Control.SelectFeature(vec1);
selectControl1.onSelect = onSelect1;
selectControl1.onUnselect = onUnselect1;
map.addControl(selectControl1);
selectControl1.activate();


Windows 8 apps
function onSelect1(feature) {
selectedFeature1 = feature;
var content = feature.data["denominazione"];
var popup = new OpenLayers.Popup.FramedCloud("Popup-1",
feature.geometry.getBounds().getCenterLonLat(),
null, content, null, true, onPopupClose1);
popup.panMapIfOutOfView = true;
popup.autoSize = true;
feature.popup = popup;
map.addPopup(popup);
}
function onUnselect1(feature) {
map.removePopup(feature.popup);
feature.popup.destroy();
feature.popup = null;
}
function onPopupClose1(evt) {
selectControl1.unselect(selectedFeature1);
}

Il precedente snipshot definisce gli event handler del controllo “SelectFeature”.


Windows 8 apps

All’interno di OpenLayers esistono anche le classi: OpenLayers.Layer.Markers,
OpenLayers.Marker, mediante le quali visualizare dei markers sulla mappa. Posso
anche avere dei popup.


Sviluppare un apps windows 8 (html5/javascript), utilizzando gli OPENDATA del Comune di Torino, con la libreria javascript OpenLayers.

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Sviluppare un apps windows 8 (html5/javascript), utilizzando gli OPENDATA del Comune di Torino, con la libreria javascript OpenLayers.

Ähnlich wie Sviluppare un apps windows 8 (html5/javascript), utilizzando gli OPENDATA del Comune di Torino, con la libreria javascript OpenLayers. (20)

Sviluppare un apps windows 8 (html5/javascript), utilizzando gli OPENDATA del Comune di Torino, con la libreria javascript OpenLayers.