sviluppare un apps windows 8 (html5/javascript), utilizzando gli opendata del comune di torino, con...

Utilizzare gli OPENDATAdel Comune di Torino

Per creare un apps windows 8 (html5/javascript)con la libreria javascript OpenLayers

Stefano Marchisio [email protected]

Windows 8 apps

Windows 8 apps with html5/javascriptWindows 8 apps with html5/javascript

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


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


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

Dato vettoriale (o future)

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


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.

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

Windows 8 apps


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


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


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.

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

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

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


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.

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.

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 }); var base2 = new OpenLayers.Layer.Google("Google Streets", { type: google.maps.MapTypeId.HYBRID }); var base3 = new OpenLayers.Layer.Google("Google Streets", { 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


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

Cio’ che segue sono gli OverlayLayer

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 } );

var wms2 = new OpenLayers.Layer.WMS('Layer-2', 'http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-01/wmsg01/wms_sicc112_ospedali?', { layers: "ospedali“, transparent: true }, { visibility: 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


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 }, CQL_FILTER: “descrizione LIKE ‘a%' ", { visibility: true } );

var wms2 = new OpenLayers.Layer.WMS('Layer-2', 'http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-01/wmsg01/wms_sicc112_ospedali?', { layers: "ospedali“, transparent: true }, CQL_FILTER: “descrizione LIKE ‘b%' ", { visibility: true } );

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


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 }, filter: getFilter(“descrizione",“valore"), { visibility: true } );

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 strategies2 = [new OpenLayers.Strategy.Fixed()]; 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({}); var strategies2 = [new OpenLayers.Strategy.Fixed()]; 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 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 ({}); var strategies2 = [new OpenLayers.Strategy.Fixed()]; 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 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 strategies1 = [new OpenLayers.Strategy.Fixed()]; var protocol1 = new OpenLayers.Protocol.HTTP({ url: url1, format: format1 }); var vec1 = new OpenLayers.Layer.Vector('VectorLayer - 1',{ protocol: protocol1, strategies: strategies1, 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 strategies1 = [new OpenLayers.Strategy.Fixed()]; var protocol1 = new OpenLayers.Protocol.HTTP({ url: url1, format: format1 }); var vec1 = new OpenLayers.Layer.Vector('VectorLayer - 1',{ protocol: protocol1, strategies: strategies1, 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({ type: OpenLayers.Filter.Comparison.EQUAL_TO, property: "cap“, value: "10126", }), symbolizer: { pointRadius: 3, fillColor: "green“, fillOpacity: 0.8, strokeColor: "black“} }); var rule12 = new OpenLayers.Rule({ filter: new OpenLayers.Filter.Comparison({ type: OpenLayers.Filter.Comparison.EQUAL_TO, 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.

Windows 8 apps


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


DEMO

Windows 8 apps


sviluppare un apps windows 8 (html5/javascript), utilizzando gli opendata del comune di torino, con...

Technology