2. Prima parte
1. Slippy map
2. Tiles
3. Librerie per le slippy map
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. 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. 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: latitudine
z: zoom
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 arrotondamento
Esempio: (8.97245,44.40345) DISI, zoom 17 -> http://a.tile.
openstreetmap.org/17/68802/47455.png
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. Openlayers
map = 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.js
http://wiki.openstreetmap.org/wiki/Slipple
9. 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)
11. Seconda parte
1. HTML5
2. Geolocalizzazione
3. Canvas
4. SVG
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. 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. Geolocation API
Oggetto 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 millisecondi
watchPosition funzione simile, ma chiama success ogni volta che vede
cambiare la posizione
15. 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/
16. 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
17. Canvas
var 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. 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
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. 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)