Overview su alcune tecnologie web e la loro applicazione con OpenStreetMap

1. Openstreetmap
per il Web
Stefano Sabatini
DISI, Genova, 23 Aprile 2012

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)

10. Leaflet
var 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. 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)

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. Links
http://wiki.openstreetmap.org/wiki/Slippy_map
http://docs.openlayers.org/library/index.html
http://leaflet.cloudmade.com/
http://mobosm.appspot.com/ (con watchPosition)
http://wiki.openstreetmap.org/wiki/MapCSS
http://switch2osm.org