Upload
stefano-sabatini
View
360
Download
2
Embed Size (px)
DESCRIPTION
Overview su alcune tecnologie web e la loro applicazione con OpenStreetMap
Citation preview
Openstreetmapper il Web
Stefano SabatiniDISI, Genova, 23 Aprile 2012
Prima parte
1. Slippy map2. Tiles3. Librerie per le slippy map
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
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.
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
Tiles: organizzazione fisica (2)
Date le coordinate (lon,lat) in radianti [moltiplicate per π/180] si applica la proiezione di Mercatore
x=lony = log(tan(lat) + sec(lat))
-Normalizzazione e traslazione a (180°W,85.0511°N)x = (1 + (x / π)) / 2y = (1 - (y / π)) / 2
-moltiplicazione di x e y per 2^{zoom} e arrotondamento
Esempio: (8.97245,44.40345) DISI, zoom 17 -> http://a.tile.openstreetmap.org/17/68802/47455.png
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)
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 d'esempio completa: slipple.jshttp://wiki.openstreetmap.org/wiki/Slipple
Leaflet
● Libreria (22k compressa) sviluppata da Cloudmade
● Opensource, OOP ed estendibile● Basata su HTML5 e CSS3● Compatibile con dispositivi mobili● L'unico contro: non ha tutti i servizi di OL (tra
cui i layer vettoriali)
Leafletvar layerurl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';var attr = 'Dati © <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();
Seconda parte
1. HTML52. Geolocalizzazione3. Canvas 4. SVG
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.
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
Geolocation API
Oggetto navigator.geolocationgetCurrentPosition(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 millisecondi
watchPosition funzione simile, ma chiama success ogni volta che vede cambiare la posizione
Geolocation API: esempio
Potremmo modificare l'esempio 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/
Canvas
● Introdotto nel 2004 da Apple in Webkit● Standardizzato dal WhatWG● Il tag canvas individua un'area su una
pagina ● Tramite una API JS si può disegnare (e
animare)● SVG è un'altro 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), l'altro necessita di aggiornamenti di tutta l'area.
Canvasvar example = document.getElementById('example');var ctx = example.getContext('2d');ctx.fillStyle = 'red';ctx.fillRect(0, 0, 200, 150);ctx.strokeStyle="green";ctx.lineWidth=5;ctx.beginPath();ctx.moveTo(0,0);ctx.lineTo(200,100);ctx.closePath();ctx.stroke();ctx.fillStyle = 'blue';ctx.beginPath();ctx.arc(50,50,50,0,Math.PI*2,true);ctx.closePath();ctx.fill();
ctx.beginPath();ctx.moveTo(50,100);ctx.lineTo(30,140);ctx.lineTo(50,140);ctx.lineTo(40,120);ctx.lineTo(60,120);ctx.lineTo(50,140);ctx.lineTo(70,140);ctx.lineTo(50,100);ctx.closePath();ctx.fillStyle="grey";ctx.fill();
I can Triforce in Canvas!
Canvas: Slippy Map
Canvas si può utilizzare ad esempio per costruire 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
Canvas: KothicJS
● Porting di un renderer Python● Usa i dati forniti in notazione GeoJSON
(esempio)● Il rendering è definito tramite MapCSS● Integrabile con Leaflet!Demo
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)
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!
Links
http://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