Successfully reported this slideshow.
Stefano Marchisio                                Stamarch@virgilio.it      Utilizzare gli OPENDATA       del Comune di Tor...
Windows 8 appsI dati utilizzati sono presi dal GeoPortale del Comune Di Torino. "Base cartografica realizzata daquesta app...
Windows 8 apps                    Cosa sono gli opendata ?  Perche’ ho utilizzato OpenLayers/JavaScript ?                 ...
Windows 8 apps                       Cosa sono gli opendata ?I dati aperti sono dati che possono essere liberamente utiliz...
Windows 8 apps   Gli opendata possono essere trovati in 3 diversi formati      In formato file CSV, GML, KML, GeoJson, Sha...
Windows 8 apps                 Cosa significano le sigle WMS e WFSUn GIS (o Geographic information system) e un sistema co...
Windows 8 apps    Dato raster                  Windows 8 apps with html5/javascript                  Windows 8 apps with h...
Windows 8 apps                          Dato vettoriale (o future)Ad ogni tipologia di dato corrisponde una tabella, che v...
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 appsEsistono 2 categorie di sistemi GIS: "software proprietario" e "software libero“.• Nel “software proprietari...
Windows 8 appsDue dei principali servizi all’interno di un server di mappe conforme allespecifiche OGC sono: WMS e WFS.• W...
Windows 8 appsRiepilogando in rete possiamo trovare file CSV, GML, KML, GeoJson, ShapeFile, etc ...  Servizi restituiscono...
Windows 8 apps    Possiamo identificare 3 categorie di prodotti che adottano standard OCG.• Librerie javascript - sono in ...
Windows 8 appsUnapplicazione Windows 8, pur utilizzando gli stessi linguaggi per lo sviluppoweb, non è un applicazione web...
Windows 8 appsIl runtime di Windows 8 esegue il codice all interno di una standbox di sicurezzachiamata anche "local-conte...
Windows 8 appsUtilizzando un tag iframe, avremo 2 contesti di esecuzione completamentedisaccoppiati, possono comunicare tr...
Windows 8 appsIl programma desktop QGis permette di accedere a servizi WMS/WFS oltre aleggere file locali in formato: CSV,...
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 appsTrovandoci di fronte a servizi e dati conformi alle specifiche OCG opteremo perl’utilizzo del framework open...
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps   DEMO         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 appsVediamo ora come scrivere il nostro client html5/javascript.Verra’ utilizzato OpenLayers come framework di s...
Windows 8 appsAbbiamo 2 tipi di coordinate: le coordinate geografiche e le coordinate diproiezione. Le prime sono espresse...
Windows 8 appsUna proiezione cartografica è il risultato di trasformazioni geometriche,matematiche o empiriche di punti ge...
Windows 8 apps      Consultando il geoportale del Comune di Torino si puo’ leggere.            http://www.comune.torino.it...
Windows 8 apps      OpenLayers ha 2 proiezioni di dafault: “EPSG:4326”, “EPSG:900913”• Quando compare il codice “EPSG:4326...
Windows 8 apps var lonlat1 = new OpenLayers.LonLat(v1, v2); var proj1 = new OpenLayers.Projection( "EPSG:4326" ); var proj...
Windows 8 appsIn OpenLayers esistono 2 tipi di layer: BaseLayer or OverlayLayer. Quando si aprelo LayerSwitcher, si posson...
Windows 8 apps <html> <head> <title>Esri Map and jQuery</title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javas...
Windows 8 apps  var controlsArray = [      new OpenLayers.Control.MousePosition({}),      new OpenLayers.Control.LayerSwit...
Windows 8 appsIn OpenLayers esiste un discreto numero di controlli che permettono di crearei widget che verranno poi visua...
Windows 8 apps           Cio’ che segue sono gli OverlayLayerQuando chiedo dei dati ad un servizio WMS, posso richiedere l...
Windows 8 apps  var wms1 = new OpenLayers.Layer.WMS(Layer-1,      http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-  ...
Windows 8 apps var wms1 = new OpenLayers.Layer.WMS(Layer-1,     http://geomap.reteunitaria.piemonte.it/ws/siccms/coto- 01/...
Windows 8 apps  var wms1 = new OpenLayers.Layer.WMS(Layer-1,      http://geomap.reteunitaria.piemonte.it/ws/siccms/coto-  ...
Windows 8 appsNelle slide che seguono vedremo come operare con dati grezzi. I dati sarannoforniti tramite un servizio WFS,...
Windows 8 appsSopra le classi che utilizziamo di solito quando creiamo un layer di tipo Vector.                           ...
Windows 8 appsNel caso di un layer di tipo "Vector", i progettisti di OpenLayer hanno fatto unascelta architetturale di ba...
Windows 8 apps• PROTOCOL - controlla come un "Vector" Layer comunica con la sorgente dati.Puo essere di 2 tipi: "OpenLayer...
Windows 8 appsvar strategies1 = [new OpenLayers.Strategy.Fixed()];var protocol1 = new OpenLayers.Protocol.WFS({    version...
Windows 8 apps   var url2 = "Data/filedati.gml";   var format2 = new OpenLayers.Format.GML({});   var strategies2 = [new O...
Windows 8 apps   var url2 = "Data/filedati.kml";   var format2 = new OpenLayers.Format.KML({});   var strategies2 = [new O...
Windows 8 apps   var url2 = "Data/ffiledati.geojson";   var format2 = new OpenLayers.Format.GeoJSON ({});   var strategies...
Windows 8 apps   var url2 = "Data/ffiledati.geojson";   var format2 = new OpenLayers.Format.GeoJSON ({});   var strategies...
Windows 8 appsE’ anche possibile aggiungere alla mappa dei dati locali. Per fare cio’ si utilizzanole classi: OpenLayers.L...
Windows 8 appsvar data = -- array of row data --var features = new Array(); for (var i = 0; i < data.length; i++) {      v...
Windows 8 appsSe un layer e’ fornito tramite un servizio WMS, avra’ lo stile con cui e’ statoconfigurato il servizio. Nel ...
Windows 8 appsvar style = {     “strokeWidth”: 5,     “strokeColor”: “#ff0000”};var url1 = "Data/filedata.geojson";var for...
Windows 8 apps     var styleMap1 = createStyle();     var url1 = "Data/filedata.geojson";     var format1 = new OpenLayers...
Windows 8 apps  function createMapStyle(type) {     var defstyle, selstyle;     defstyle = { pointRadius: 3,         fillC...
Windows 8 appsfunction createStyle() {   var style = new OpenLayers.Style();   var rule11= new OpenLayers.Rule({       fil...
Windows 8 appsNel caso applico un filtro con il metodo appena visto, i dati sono tutti inmemoria. Verranno visualizzati so...
Windows 8 appsPer avere un popup devo creare un’ oggetto “OpenLayers.Control.SelectFeature”da associare all’ oggetto “Open...
Windows 8 appsfunction onSelect1(feature) {   selectedFeature1 = feature;   var content = feature.data["denominazione"];  ...
Windows 8 appsAll’interno di OpenLayers esistono anche le classi: OpenLayers.Layer.Markers,OpenLayers.Marker, mediante le ...
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 appsI dati utilizzati sono presi dal GeoPortale del Comune Di Torino. "Base cartografica realizzata daquesta app...
Windows 8 apps   DEMO         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Windows 8 apps         Windows 8 apps with html5/javascript         Windows 8 apps with html5/javascript
Upcoming SlideShare
Loading in …5
×

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

4,089 views

Published on

Nella presentazione, verra' mostrato come utilizzare gli OPENDATA reperiti sul geoportale del Comune di Torino; per sviluppare un apps windows 8 (html5/javascript) utilizzando la libreria javascript OpenLayers. I dati sono forniti sia in formato file DWG,ShapeFile e sia sotto forma di servizio WMS (per visualizzare i file puo' essere usato QGis). Ogni punto ha un'icona associata, facendo tap sull'icona desiderata, verrà mostrato un popup con la descrizione del punto. E' anche possibile visualizzare la descrizione dei vari punti in forma tabellare per tipologia. Per avere un maggior dettaglio del punto desiderato, esiste una spunta che aggiunge la visione StreetView (di google). Quando si fa tap sull'icona desiderata, oltre al popup di dettaglio verrà anche aperta una finestra che mostra la visione Panorama di StreetView (di google). In questo modo l'utente ha la possibilità di vedere anche una foto del punto.

http://apps.microsoft.com/windows/app/torino-in-un-tap-sanita/dd3b970d-f596-45e7-905b-32534abae424

http://apps.microsoft.com/windows/app/torino-in-un-tap-pubblica/a9980c80-2905-4f39-bb08-ef9c290362c8

http://apps.microsoft.com/windows/app/torino-in-un-tap-sport-e-tempo/9714ea91-a510-48a8-a465-2c9ea57e76aa

http://apps.microsoft.com/windows/app/torino-in-un-tap-mercati-e/dae209cd-fa1b-4d68-8c8e-a2b07d3adce1

http://mastefano64.wordpress.com/2013/04/21/windows-8-store-apps/
Comune di Torino: http://www.comune.torino.it/geoportale/index.htm
OpenLayers library project: http://openlayers.org/
Quantum GIS project: http://www.qgis.org/

Published in: Technology
  • Be the first to comment

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

  1. 1. 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
  2. 2. Windows 8 appsI dati utilizzati sono presi dal GeoPortale del Comune Di Torino. "Base cartografica realizzata daquesta applicazione, integrata con Asl, Farmacie, Presidi ospedalieri, Pronto soccorso,Perimetro ospedale, Edificato ospedale; 4/4/2013 della Città di Torino reperiti sul Geoportaledel Comune di Torino". Pertanto si ringrazia il Comune di Torino per aver messo a disposizionei dati. www.comune.torino.it/geoportale/index.htm Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  3. 3. 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 lalibreria OpenLayers, e fanno una panoramica sulle sue funzionalita’ di base. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  4. 4. Windows 8 apps Cosa sono gli opendata ?I dati aperti sono dati che possono essere liberamente utilizzati, riutilizzati eridistribuiti da chiunque, soggetti alla necessità di citarne la fonte e di condividerlicon lo stesso tipo di licenza con cui sono stati originariamente rilasciati.Grazie alla loro natura, e cioè al fatto di essere accessibili e condivisibili, siprestano bene come strumento di utilità per i cittadini, e possono essere alla basedi vari progetti. Purtroppo, le pubbliche amministrazioni sono spesso reticenti neldivulgarli; anche se ultimamente, alcune amministrazioni virtuose stanno iniziandoa rendere pubblici i loro dati. Tra queste troviamo la Regione Piemonte. http://www.comune.torino.it/geoportale/ Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  5. 5. 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 ShapeFileoppure erogati sotto forma di servizio WMS. Pertanto ci troviamo di fronte ad unsistema GIS. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  6. 6. Windows 8 apps Cosa significano le sigle WMS e WFSUn GIS (o Geographic information system) e un sistema computerizzato chepermette lacquisizione, la registrazione, lanalisi, la visualizzazione e larestituzione di informazioni derivanti da dati geografici. Database relazionale (dato raster e dato vettoriale/future) Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  7. 7. Windows 8 apps Dato raster Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  8. 8. Windows 8 apps Dato vettoriale (o future)Ad ogni tipologia di dato corrisponde una tabella, che verra poi associataad un layer in fase di visualizzazione (cioe la citta saranno su un layer ele vie su un altro layer …). Oltre ai dati geografici esistono degli attributigenerici . Il risultato restituito puo essere di 2 tipi:• Tipo immagine, ovvero la proiezione viene effettuata dal server dimappe, il codice presente sul client si limitera a visualizzare l immaginerestituita 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 sullamappa (possiamo creare dei popup). Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  9. 9. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  10. 10. Windows 8 appsEsistono 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) è unorganizzazione internazionalenoprofit, che si occupa di definire le specifiche tecniche per servizi geospazialie di localizzazione (come W3C).I geoportale del Comune di Torino utilizza servizi WMS, pertanto conformi allespecifiche OCG. Nel corso della presentazione verrano presi in considerazionesolamente prodotti OCG. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  11. 11. Windows 8 appsDue dei principali servizi all’interno di un server di mappe conforme allespecifiche OGC sono: WMS e WFS.• WMS (Tipo immagine), ovvero la proiezione viene effettuata dal server dimappe, il codice presente sul client si limitera solamente a visualizzare limmagine restituita sulla mappa.• WFS (Dato grezzo), vengono generalmente restituiti dati in formatojson/xml, sara poi il codice all interno del client che elabora e proietta i datisulla mappa. Sara’ possibile avere dei popup. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  12. 12. Windows 8 appsRiepilogando 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 with html5/javascript Windows 8 apps with html5/javascript
  13. 13. 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 dallinterno di una pagina HTML. La libreria piu conosciuta e OpenLayer.• Lato client - troviamo di solito dei programmi desktop, sono in grado dicollegarsi ad un server di mappe (piuttosto che leggere dei file geospazialilocali), per poi effettuare delle elaborazioni. I prodotti piu conosciuti sono: QGis,gvSIG, etc ...• Lato server - troviamo di solito dei server di mappe, hanno un databasegeospaziale, e sono in grado di generare delle mappe (raster/vettoriali). I prodottipiu conosciuti sono: geoserver, mapserver, QGIS Server, etc ... Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  14. 14. Windows 8 appsUnapplicazione Windows 8, pur utilizzando gli stessi linguaggi per lo sviluppoweb, non è un applicazione web. Per problematiche di sicurezza, alcunicomportamenti leciti allinterno di un contesto web, sono proibiti allinterno di unapplicazione Windows 8.• È solo possibile caricare gli script presenti allinterno del package con cui è statadeployed lapplicazione. Non è possibile inserire un tag SCRIPT il cui attributo srcpunta ad un file presente su un server remoto.• Nessun metodo che provi a manipolare il DOM è considerato sicuro. La stessacosa vale nel caso in cui si tenta di creare in modo dinamico il contenuto dellapagina.Per questo motivo le librerie javascript classiche potranno avere dei problemi. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  15. 15. Windows 8 appsIl runtime di Windows 8 esegue il codice all interno di una standbox di sicurezzachiamata anche "local-context". Quanto si manipola il DOM tramite le proprietà"innerHTML" o "outerHTML", il run time di Windows 8 effettua un parser delvalore inserito. Inserendo il codice all’interno di un iframe ci troveremo ad operarenel “web-context”. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  16. 16. Windows 8 appsUtilizzando un tag iframe, avremo 2 contesti di esecuzione completamentedisaccoppiati, 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’inviodi 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 with html5/javascript Windows 8 apps with html5/javascript
  17. 17. Windows 8 appsIl programma desktop QGis permette di accedere a servizi WMS/WFS oltre aleggere 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 fornitisiano in un’ altro formato; possiamo utilizzare QGis per convertirli nel formatorichiesto. Con QGis e’ anche possibile applicare dei filtri, per poter convertire soloun certo sottoinsieme di dati. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  18. 18. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  19. 19. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  20. 20. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  21. 21. Windows 8 appsTrovandoci di fronte a servizi e dati conformi alle specifiche OCG opteremo perl’utilizzo del framework opensource “OpenLayers” (conforme a OCG). http://openlayers.org/L utilizzo di un framework javascript (anche se più ostico da utilizzare), permettedi riutilizzare parti di codice, in applicazioni che hanno come target device diversida Windows 8. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  22. 22. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  23. 23. Windows 8 apps DEMO Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  24. 24. Windows 8 appsVediamo ora come scrivere il nostro client html5/javascript.Verra’ utilizzato OpenLayers come framework di sviluppo. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  25. 25. Windows 8 appsAbbiamo 2 tipi di coordinate: le coordinate geografiche e le coordinate diproiezione. Le prime sono espresse in latitudine e longitudine (e sono riferite allaterra), le seconde sono espresse in metri (e sono riferite alla superfice piana diproiezione). Le coordinate di proiezione sono espresse in coordinate cartesiane x e y. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  26. 26. Windows 8 appsUna proiezione cartografica è il risultato di trasformazioni geometriche,matematiche o empiriche di punti geografici espressi in coordinategeografiche 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 sullasuperficie della sfera (più propriamente un ellissoide).Ciascuno dei 2 sistemi di coordinate visti, puo’ essere a sua volta suddivisoin: sistemi globali e sistemi locali. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  27. 27. 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 GaussBoaga - Roma 40. I WMS sono però esposti in diversi sistemi di riferimento. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  28. 28. Windows 8 apps OpenLayers ha 2 proiezioni di dafault: “EPSG:4326”, “EPSG:900913”• Quando compare il codice “EPSG:4326” , ci riferiamo a proiezioni che hannolongitudine e latitudine come coordinate.• Quando compare il codice “EPSG:900913”, ci riferiamo a proiezioni che hannometri 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 with html5/javascript Windows 8 apps with html5/javascript
  29. 29. 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 with html5/javascript Windows 8 apps with html5/javascript
  30. 30. Windows 8 appsIn OpenLayers esistono 2 tipi di layer: BaseLayer or OverlayLayer. Quando si aprelo LayerSwitcher, si possono vedere 2 tipi di Layer. I BaseLayers sonomutualmente esclusivi e sono rappresentati da radio-buttons. Gli Overlays nonsono mutualmente esclusivi e sono rappresentati da checkboxes. Le mappe baseappartengono alla categoria dei BaseLayer.Il codice javascript delle slide successive crea una mappa base (utilizzando quelledi google). Per poter interagire con la mappa sono stati aggiunti i controlliMousePosition, LayerSwitcher, PanZoomBar che creano i widget corrispondenti. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  31. 31. 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’ lanostra mappa. Verra’ poi referenziato all’interno del codice javascript. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  32. 32. 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 with html5/javascript Windows 8 apps with html5/javascript
  33. 33. Windows 8 appsIn OpenLayers esiste un discreto numero di controlli che permettono di crearei widget che verranno poi visualizzati sulla mappa e permettono di interagirecon essa. Tali controlli sono inoltre integrati con gli oggetti di piu’ basso livello(BaseLayer or OverlayLayer). Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  34. 34. Windows 8 apps Cio’ che segue sono gli OverlayLayerQuando 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 disegnatisolo i dati richiesti.Per impostare i filtri ho 2 possibilita’: CQL_FILTER oppure la proprieta’ filterdella classe “OpenLayers.Layer.WMS”. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  35. 35. 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 with html5/javascript Windows 8 apps with html5/javascript
  36. 36. 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 with html5/javascript Windows 8 apps with html5/javascript
  37. 37. 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 with html5/javascript Windows 8 apps with html5/javascript
  38. 38. Windows 8 appsNelle slide che seguono vedremo come operare con dati grezzi. I dati sarannoforniti tramite un servizio WFS, oppure tramite una chiamata HTTP che chiede alserver un file in formato: GML,KML, GeoJSON, etc . Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  39. 39. Windows 8 appsSopra le classi che utilizziamo di solito quando creiamo un layer di tipo Vector. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  40. 40. Windows 8 appsNel caso di un layer di tipo "Vector", i progettisti di OpenLayer hanno fatto unascelta architetturale di base: creare una gerarchia di classi pluggabile. In questomodo, pur mantenendo la stessa struttura, verranno utilizzate classi diverse inbase al tipo e al formato dei dati richiesti. La struttura e composta da 3 diversecomponenti: protocol, format, strategies. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  41. 41. 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 unservizio WFS oppure "OpenLayers.Protocol.HTTP" nel caso i dati risiedanoallinterno di un file lato server.• FORMAT - definisce e controlla il formato in cui sono stati memorizzati i dati sulserver; cioe decodifica in dati in base al loro formato per poi inserirli in un oggetto ditipo grafo (GML, KML, GeoJSON, etc ...).• STRATEGIES - definisce e controlla come debbano essere fatte le richieste alserver; cioe, se il download dei dati debba essere fatto tutto in una volata o in modoprogressivo. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  42. 42. Windows 8 appsvar 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 with html5/javascript Windows 8 apps with html5/javascript
  43. 43. 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 serverun file in formato GML e visualizzato. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  44. 44. 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 serverun file in formato KML e visualizzato. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  45. 45. 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 sulserver un file in formato GeoJSON e visualizzato. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  46. 46. 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 sulserver un file in formato GeoJSON e visualizzato. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  47. 47. Windows 8 appsE’ anche possibile aggiungere alla mappa dei dati locali. Per fare cio’ si utilizzanole classi: OpenLayers.Layer.Vector, OpenLayers.Feature.Vector. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  48. 48. Windows 8 appsvar 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 with html5/javascript Windows 8 apps with html5/javascript
  49. 49. Windows 8 appsSe un layer e’ fornito tramite un servizio WMS, avra’ lo stile con cui e’ statoconfigurato il servizio. Nel caso richiamiamo un servizio WFS o utilizziamo deidati 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’ (peresempio “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 with html5/javascript Windows 8 apps with html5/javascript
  50. 50. Windows 8 appsvar 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 with html5/javascript Windows 8 apps with html5/javascript
  51. 51. 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 with html5/javascript Windows 8 apps with html5/javascript
  52. 52. 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 with html5/javascript Windows 8 apps with html5/javascript
  53. 53. Windows 8 appsfunction 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 with html5/javascript Windows 8 apps with html5/javascript
  54. 54. Windows 8 appsNel caso applico un filtro con il metodo appena visto, i dati sono tutti inmemoria. Verranno visualizzati solo i dati richiesti. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  55. 55. Windows 8 appsPer avere un popup devo creare un’ oggetto “OpenLayers.Control.SelectFeature”da associare all’ oggetto “OpenLayers.Layer.Vector”. Devo inoltre definire iseguenti 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 with html5/javascript Windows 8 apps with html5/javascript
  56. 56. Windows 8 appsfunction 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 with html5/javascript Windows 8 apps with html5/javascript
  57. 57. Windows 8 appsAll’interno di OpenLayers esistono anche le classi: OpenLayers.Layer.Markers,OpenLayers.Marker, mediante le quali visualizare dei markers sulla mappa. Possoanche avere dei popup. Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  58. 58. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  59. 59. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  60. 60. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  61. 61. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  62. 62. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  63. 63. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  64. 64. Windows 8 appsI dati utilizzati sono presi dal GeoPortale del Comune Di Torino. "Base cartografica realizzata daquesta applicazione, integrata con Asl, Farmacie, Presidi ospedalieri, Pronto soccorso,Perimetro ospedale, Edificato ospedale; 4/4/2013 della Città di Torino reperiti sul Geoportaledel Comune di Torino". Pertanto si ringrazia il Comune di Torino per aver messo a disposizionei dati. www.comune.torino.it/geoportale/index.htm Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  65. 65. Windows 8 apps DEMO Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript
  66. 66. Windows 8 apps Windows 8 apps with html5/javascript Windows 8 apps with html5/javascript

×