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 &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();

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