Openstreetmap per il Web Stefano Sabatini DISI, Genova, 23 Aprile 2012
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