Openstreetmapper il WebStefano Sabatini             DISI, Genova, 23 Aprile 2012
Prima parte      1. Slippy map      2. Tiles      3. Librerie per le slippy map
Slippy Map● Interfaccia web per mostrare una mappa● La mappa è suddivisa in tiles● Immagini png grandi 256x256px● Le tiles...
Tiles: openstreetmap.org● Il server principale usa una estensione di Apache,    mod_tile, che gestisce richieste delle til...
Tiles: organizzazione fisica● Fisicamente sul server le immagini sono raccolte in due   cartelle        http://{indirizzo ...
Tiles: organizzazione fisica (2)Date le coordinate (lon,lat) in radianti [moltiplicate perπ/180] si applica la proiezione ...
Openlayers● La libreria più famosa.● Libreria da 400 kB compressa, 980 kB non  compressa● Funzionalità ulteriori rispetto ...
Openlayersmap = new OpenLayers.Map("map");var mapnik = new OpenLayers.Layer.OSM();map.addLayer(mapnik);var lonlat = new Op...
Leaflet● Libreria (22k compressa) sviluppata da  Cloudmade● Opensource, OOP ed estendibile● Basata su HTML5 e CSS3● Compat...
Leafletvar layerurl = http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png;var attr = Dati &copy; <a href="http://openstreetm...
Seconda parte        1. HTML5        2. Geolocalizzazione        3. Canvas        4. SVG
HTML5● Specificato inizialmente dal WhatWG ed  adottato dal W3C, andrà a sostituire (x)  HTML e varie estensioni (Flash ad...
Geolocalizzazione●   Specifica del W3C, esterna a HTML5●   Deriva dal progetto Google Gears●   API per recuperare la posiz...
Geolocation APIOggetto navigator.geolocation               getCurrentPosition(success,error,options)●   success: funzione ...
Geolocation API: esempioPotremmo modificare lesempio di OpenLayers così:navigator.geolocation.getCurrentPosition(  functio...
Canvas● Introdotto nel 2004 da Apple in Webkit● Standardizzato dal WhatWG● Il tag canvas individua unarea su una  pagina● ...
Canvasvar example = document.getElementById(example);          ctx.beginPath();var ctx = example.getContext(2d);          ...
Canvas: Slippy MapCanvas si può utilizzare ad esempio percostruire una slippy map:● usando eventi del mouse per muoversi● ...
Canvas: KothicJS● Porting di un renderer Python● Usa i dati forniti in notazione GeoJSON  (esempio)● Il rendering è defini...
SVG● Acronimo di Scalable Vector Graphics● Standard del W3C del 2001 (1.0), ultima  versione 1.1 2nd edition (Agosto 2011)...
SVG<svg id="svgelem" height="150" xmlns="http://www.w3.org/2000/svg"><rect id="redrect" width="200" height="150" fill="red...
Linkshttp://wiki.openstreetmap.org/wiki/Slippy_maphttp://docs.openlayers.org/library/index.htmlhttp://leaflet.cloudmade.co...
Upcoming SlideShare
Loading in …5
×

OpenStreetMap per il web

571 views

Published on

Overview su alcune tecnologie web e la loro applicazione con OpenStreetMap

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
571
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

OpenStreetMap per il web

  1. 1. Openstreetmapper il WebStefano Sabatini DISI, Genova, 23 Aprile 2012
  2. 2. Prima parte 1. Slippy map 2. Tiles 3. Librerie per le slippy map
  3. 3. Slippy Map● Interfaccia web per mostrare una mappa● La mappa è suddivisa in tiles● Immagini png grandi 256x256px● Le tiles vengono scaricate via Ajax quando devono apparire nel riquadro● Librerie: OpenLayers, Leaflet
  4. 4. Tiles: openstreetmap.org● Il server principale usa una estensione di Apache, mod_tile, che gestisce richieste delle tile● Se sono presenti nella cache, le invia al client● Se non sono presenti, avvia Mapnik che le produce, le salva in cache e le invia● Non sono tutte prerenderizzate: occorrerebbero ~54 TB di spazio!● A Gennaio 2012 sul server principale sono occupati 1272 GB.● In realtà quindi il 2% delle tile è visualizzato.
  5. 5. Tiles: organizzazione fisica● Fisicamente sul server le immagini sono raccolte in due cartelle http://{indirizzo SERVER}/{zoom}/{x}/{y}.png● 0<={zoom}<=18● Per ogni zoom ci sono tiles● Quanti metri sono rappresentati da un pixel?C: lunghezza equatore (in metri: 6372798.2 m)y: latitudinez: zoom
  6. 6. Tiles: organizzazione fisica (2)Date le coordinate (lon,lat) in radianti [moltiplicate perπ/180] si applica la proiezione di Mercatore x=lon y = log(tan(lat) + sec(lat))-Normalizzazione e traslazione a (180°W,85.0511°N) x = (1 + (x / π)) / 2 y = (1 - (y / π)) / 2-moltiplicazione di x e y per 2^{zoom} e arrotondamentoEsempio: (8.97245,44.40345) DISI, zoom 17 -> http://a.tile.openstreetmap.org/17/68802/47455.png
  7. 7. Openlayers● La libreria più famosa.● Libreria da 400 kB compressa, 980 kB non compressa● Funzionalità ulteriori rispetto ad una slippy map: ○ layer raster preconfigurati (OSM ed altro) ○ layer vettoriali (GPX, ...), ○ riproiezioni, ○ controlli (zoom, misurazioni)
  8. 8. Openlayersmap = new OpenLayers.Map("map");var mapnik = new OpenLayers.Layer.OSM();map.addLayer(mapnik);var lonlat = new OpenLayers.LonLat(8.97245,44.40345).transform( new OpenLayers.Projection("EPSG:4326"), // WGS 1984 new OpenLayers.Projection("EPSG:900913") // Mercatore);var zoom = 15;var markers = new OpenLayers.Layer.Markers( "Markers" );map.addLayer(markers);markers.addMarker(new OpenLayers.Marker(lonlat));map.setCenter(lonlat, zoom);Libreria desempio completa: slipple.jshttp://wiki.openstreetmap.org/wiki/Slipple
  9. 9. Leaflet● Libreria (22k compressa) sviluppata da Cloudmade● Opensource, OOP ed estendibile● Basata su HTML5 e CSS3● Compatibile con dispositivi mobili● Lunico contro: non ha tutti i servizi di OL (tra cui i layer vettoriali)
  10. 10. Leafletvar layerurl = http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png;var attr = Dati &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> ODBL;var tile = new L.TileLayer(layerurl, {maxZoom: 18, attribution: attr});var map = new L.Map(map);map.setView(new L.LatLng(44.40345,8.97245), 15);map.addLayer(tile);var marker = new L.Marker(new L.LatLng(44.40306,8.97208));map.addLayer(marker);marker.bindPopup(Il DISI e` qui!).openPopup();
  11. 11. Seconda parte 1. HTML5 2. Geolocalizzazione 3. Canvas 4. SVG
  12. 12. HTML5● Specificato inizialmente dal WhatWG ed adottato dal W3C, andrà a sostituire (x) HTML e varie estensioni (Flash ad esempio)● Rinnova il markup, ampliandone la semantica (nuovi tag) e introduce varie API (Storage, Canvas)● Recommendation nel 2014, implementazioni complete nel 2022.
  13. 13. Geolocalizzazione● Specifica del W3C, esterna a HTML5● Deriva dal progetto Google Gears● API per recuperare la posizione del client● Fornisce la posizione con la precisione più accurata leggendo: Gps, Wifi, Rete Cellulare
  14. 14. Geolocation APIOggetto navigator.geolocation getCurrentPosition(success,error,options)● success: funzione callback con parametro la posizione● error: funzione callback a cui viene passato l’errore● options: enableHighAccuracy, timeout, maximumAge.Errori: PERMISSION_DENIED , POSITION_UNAVAILABLE , TIMEOUT ○ enableHighAccuracy: se false non usa il gps anche se attivo ○ timeout: tempo dopo il quale si considera non acquisita la posizione ○ maximumAge: l’applicazione non richiede una nuova posizione se l’ attuale non è più vecchia di tot millisecondiwatchPosition funzione simile, ma chiama success ogni volta che vedecambiare la posizione
  15. 15. Geolocation API: esempioPotremmo modificare lesempio di OpenLayers così:navigator.geolocation.getCurrentPosition( function(position) { var lonLat = new OpenLayers.LonLat( position.coords.longitude, position.coords.latitude) .transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ); markers.addMarker(new OpenLayers.Marker(lonLat)); map.setCenter(lonLat, 14); } ); http://www.pediaphon.org/~bischoff/location_based_services/
  16. 16. Canvas● Introdotto nel 2004 da Apple in Webkit● Standardizzato dal WhatWG● Il tag canvas individua unarea su una pagina● Tramite una API JS si può disegnare (e animare)● SVG è unaltro metodo (lo vediamo dopo): in quel caso si parla di disegno vettoriale, in questo caso di disegno raster● Uno è facilmente aggiornabile (perchè basato su XML), laltro necessita di
  17. 17. Canvasvar example = document.getElementById(example); ctx.beginPath();var ctx = example.getContext(2d); ctx.moveTo(50,100);ctx.fillStyle = red; ctx.lineTo(30,140);ctx.fillRect(0, 0, 200, 150); ctx.lineTo(50,140);ctx.strokeStyle="green"; ctx.lineTo(40,120);ctx.lineWidth=5; ctx.lineTo(60,120);ctx.beginPath(); ctx.lineTo(50,140);ctx.moveTo(0,0); ctx.lineTo(70,140);ctx.lineTo(200,100); ctx.lineTo(50,100);ctx.closePath(); ctx.closePath();ctx.stroke(); ctx.fillStyle="grey";ctx.fillStyle = blue; ctx.fill();ctx.beginPath();ctx.arc(50,50,50,0,Math.PI*2,true);ctx.closePath();ctx.fill(); I can Triforce in Canvas!
  18. 18. Canvas: Slippy MapCanvas si può utilizzare ad esempio percostruire una slippy map:● usando eventi del mouse per muoversi● calcolando gli url per scaricare le tile quando entrano nella visualizzazione● sistemandole in un rettangolo virtuale di 2^18 * 256px =67108864px centrato sulla posizione prestabilita
  19. 19. Canvas: KothicJS● Porting di un renderer Python● Usa i dati forniti in notazione GeoJSON (esempio)● Il rendering è definito tramite MapCSS● Integrabile con Leaflet!Demo
  20. 20. SVG● Acronimo di Scalable Vector Graphics● Standard del W3C del 2001 (1.0), ultima versione 1.1 2nd edition (Agosto 2011)● Linguaggio di markup basato su xml usato per la grafica vettoriale (Inkscape)● I browser che lo supportano lo renderizzano al volo● E’ possibile animare con Javascript● Per OSM sono disponibili software che esportano mappe in svg (Mapnik, Maperitive, Mapweaver)
  21. 21. SVG<svg id="svgelem" height="150" xmlns="http://www.w3.org/2000/svg"><rect id="redrect" width="200" height="150" fill="red" /><line x1="0" y1="0" x2="200" y2="100" style="stroke:green;stroke-width:5"/><circle id="redcircle" cx="50" cy="50" r="50" fill="blue" /><polygon points="50,100,60,120, 40,120" fill="grey" /><polygon points="40,120,50,140, 30,140" fill="grey" /><polygon points="60,120,70,140, 50,140" fill="grey" /></svg> I can Triforce in Svg!
  22. 22. Linkshttp://wiki.openstreetmap.org/wiki/Slippy_maphttp://docs.openlayers.org/library/index.htmlhttp://leaflet.cloudmade.com/http://mobosm.appspot.com/ (con watchPosition)http://wiki.openstreetmap.org/wiki/MapCSShttp://switch2osm.org

×