Vector tiles

En ny teknologi til webkort

asger@septima.dk / @asgerpetersen

Kort alle vegne

Integreret del i tablets, mobiltelefoner, webapps, mobilapps, styresystemer, online avisartikler etc. etc.

Nye forventninger til digitale kort

Fuld kontrol over kartografi

Underbygge budskabet. Fex stemning eller brand

Filtrering

Fokusér

Trinløs zoom

Fri rotation

Udnytte høj opløsning på nye skærme

Kort sagt:

Designeren vil bestemme over kortet. Ikke omvendt.

Lynhurtige - også ved mange brugere

3D

Eksisterende teknologier

WMS

  • Kartografi og filtrering - ok*
  • Trinløs zoom - ok
  • Ingen rotation
  • Skærmens pixels er per definition 0,28mm
  • Ressourcekrævende at rendere et kort
  • Næsten umulig at cache
  • "Langsom"

Tiles / WMTS / TMS / ...

  • "Hurtig"
  • Hastighed opnås gennem caching som gøres mulig ved at begrænse mulighederne
  • Ingen brugervalgt kartografi eller filtrering - alt er defineret på serveren
  • Zoom i trin
  • Ingen rotation
  • Ikke understøttelse for skærmopløsninger

Skærmopløsning og billedbaserede kort

Billede i fuld skærm

  • 1024 x 768 : 2 MB
  • Ny bærbar: 14 MB
  • Nyt TV: 23 MB

Vektor!

Lad klienten få vektordata og selv tegne sit kort

Mange fordele

  • Klienten er i fuld kontrol med kartografi, filtrering, rotation etc
  • Samme datamængde uanset skærmopløsning
  • Klienten stiller selv CPU-ressourcer til rådighed

Er klienterne kraftige nok?

Min 3 år gamle telefon har følgende specs

  • 4 kerner á 1.4 GHz
  • 1GB ram
  • Dedikeret grafikkort. Dobbelt så kraftigt som XBOX eller PS2

WFS?

Nej!

  • "Langsom"
  • Ressourcekrævende at besvare forespørgsel
  • Næsten umulig at cache

Vektor tiles

For WFS hvad WMTS er for WMS...

Princip

  • Vektordata klippet op i filer svarende til tiles fra en gammelkendt tile cache
  • Begræns brugerens muligheder, så resultatet kan ligge klar på serveren
  • Cache

Tile cache

http://b.tile.openstreetmap.org/14/8643/5015.png

Vektor tiles

http://vector.mapzen.com/osm/all/14/8643/5015.json

...
{
 "type":"Feature",
 "geometry":{"type":"LineString","coordinates":[[9.912787,57.051389],[9.912461,57.050407],[9.912304,57.050341],[9.912010,57.049623]]},
 "id":"32139537",
 "clipped":true,
 "properties":{"kind":"minor_road","name":"Svendsgade","sort_key":-6.000000,"is_link":"no","is_tunnel":"no","is_bridge":"no","highway":"residential"}
}
...

Udfordringer

Ingen standarder

Hverken de jura eller de facto

Rendering på klienten

  • Eksisterende klienter (OpenLayers, Leaflet etc) ikke optimale (SVG, Canvas)
  • Brug af WebGL er meget lovende, men skal udvikles
  • WebGL er endnu ikke understøttet af alle apparater

Klippe-klistre?

Skal polygoner der overlapper tile grænser klippes, klistres eller kopieres?

Formater

  • GeoJSON
  • Protocol buffers
  • ...

Eksempler

Septima for et år siden

Vektortiles og WebGL for et år siden

Vektortiles og WebGL

Google maps

Tak

Spørgsmål?

http://asgerpetersen.github.io/kortdage14

asger@septima.dk / @asgerpetersen