Vortrag zum Thema Vektorkarten im Browser (KarlsruheJS-Meeting am 29.01.2014): Wie lassen sich vektorbasierte Karten im (mobilen) Browser effizient darstellen, um DPI-unabhängig zu sein und Bandbreite einzusparen? Audio ist hier verfügbar: http://www.youtube.com/watch?v=2evX1UORnyI

1. Canvas und andere Katastrophen Vektorkarten im (mobilen) Browser

2. Vorstellung
Junghans+Schneider
• http://junghans-schneider.de
• Gegründet 2010
• Team
• Andreas Junghans (M.Sc., Dipl.-Inform. (FH))
• Til Schneider (M.Sc., Dipl.-Inform. (FH))
• Peter Barth (Dipl.-Inform. (FH))
• Johannes Kissel (M.Sc.)
• Auftragsentwicklung und Schulung
• Web-Anwendungen (JavaScript, Java)
• Apps für Mobilgeräte (iOS, Android)
Folie 2
Junghans+Schneider 2014

3. Inhalt
Themen
• Rückblick: Konzept Vektor-Karten per Canvas
• Performance, Qualität, Kompatibilität – oder:
Schwierigkeiten, Hindernisse und Probleme
• Grüße aus der analogen Welt
• Lösungen und Workarounds
• Frameworks und Techniken
Folie 3
Junghans+Schneider 2014

4. Vektor-Karten per Canvas
Konzept
• Gleiches Prinzip wie Google Maps und OSM
• Kartendarstellung mit Kacheln
• Idee: Kacheln nicht als Bitmap-, sondern als Vektor-Grafiken
• Platzsparend (über proprietäres Vektor-Format)
• DPI-neutral (in Grenzen)
• Realisiert in Google Maps 5 für Android und vielen iPhoneAnwendungen
• Kompromiss zwischen Online- und Offline-Rendering
Folie 4
Junghans+Schneider 2014

5. Vektor-Karten per Canvas
Umsetzung (2012)
• Realisiert für PTV AG, Karlsruhe
• Browser
• iOS (nativ)
• Render-Code im Browser: ca. 1 KB (minified + GZIP)
Folie 5
Junghans+Schneider 2014

6. Vektor-Karten per Canvas
Umsetzung (2014)
• Realisiert für PTV AG, Karlsruhe
• Browser
• iOS (nativ)
• Android (nativ)
• Windows 8 und Windows Phone 8 (nativ)
• Render-Code im Browser: ca. 1 4 KB (minified + GZIP)
Folie 6
Junghans+Schneider 2014

7. Text-Darstellung
Browser-Vergleich (2012)
• Firefox 9
• IE 9
• Chrome 16
• Safari 5 (Windows)
• Safari 5 (Mac)
Folie 7
Junghans+Schneider 2014

8. Text-Darstellung
Browser-Vergleich (2014)
• Firefox 9 26
• IE 9 11
• Chrome 16 32
• Safari 5 (Windows)
• Safari 5 7 (Mac)
Folie 8
Junghans+Schneider 2014

9. Text-Darstellung
Konsequenz aus (fehlender) Weiterentwicklung
• Text-Qualität nicht überall ausreichend
• Weder per Canvas-Text-API noch per DOM und CSS
• Lösung: Vorverarbeitung in Linienzüge
• typeface.js und ähnliche Lösungen
• Vorteil
• Gleiche Qualität und Darstellung in allen Browsern
• Nachteil
• Etwas langsamer als Canvas-Text-API
Folie 9
Junghans+Schneider 2014

10. Performance
Komplexität (2012)
• Demo-Kachel
• Vektor-Größe (nach GZIP): ca. 5 KB
• Bitmap-Größe (PNG): ca. 50 KB
• Polygonpunkte: 2411
• Linienpunkte: 2836
• Zeichenstile: 14
• Mögliche Optimierungen
• Kleinere Punktzahl auf Kosten der Qualität
• Kleinere Auflösung auf Kosten von Qualität und DPIUnabhängigkeit
Folie 10
Junghans+Schneider 2014

11. Performance
Komplexität (2014)
• Demo-Kachel
• Vektor-Größe (nach GZIP): ca. 5 5,5 KB
• Bitmap-Größe (PNG): ca. 50 55 KB
• Polygonpunkte: 2411 9206
• Linienpunkte: 2836 4504
• Zeichenstile: 14 22
• Mögliche Optimierungen
• Kleinere Punktzahl auf Kosten der Qualität
• Kleinere Auflösung auf Kosten von Qualität und DPIUnabhängigkeit
Folie 11
Junghans+Schneider 2014

12. Performance
Geschwindigkeit im Browser
• Render-Performance prinzipiell ausreichend ...
• 5-100 ms pro Kachel
• ... aber auf Kosten der Bedienbarkeit
• Event-Verarbeitung im Browser leidet
• Unerwartete Probleme
• line-dash in Google Chrome
• Alternative WebGL?
• Genutzt in Google Maps
• Nicht verfügbar auf den meisten Mobil-Plattformen
Folie 12
Junghans+Schneider 2014

13. Performance
Lösungen
• Web Worker für Parsing
• ARKB... ➔ (0,-8),(-1,-9),...
• Web Worker für Rendering?
• Nur direktes Arbeiten auf Pixel-Daten möglich
• Keine echte Zeichen-API mehr, keine Hardware-Beschleunigung
• Lösung: „Kooperatives Multitasking“ für Rendering
• Regelmäßige Prüfung, wieviel Rechenzeit verbraucht wurde
• Bei Überschreiten festgelegter Grenzen: Abgabe der Kontrolle
• Herausforderung: Zustand konsistent mit Canvas merken
• Erhöhte Komplexität im Renderer
Folie 13
Junghans+Schneider 2014

14. Performance
Lösungen
• „Kooperatives Multitasking“
Folie 14
Junghans+Schneider 2014

15. Kompatibilität
Anforderungen an Browser
• Canvas mit line-dash
• Web Worker
• Cross-Domain requests
• Verbleibende Browser
• Chrome
• Firefox
• Safari
• IE 11
• Android 4.4
• iOS 7
Folie 15
Junghans+Schneider 2014

16. Kompatibilität
Anforderungen an Browser
• Eingeschränkte Browser-Auswahl nicht akzeptabel
• Lösung: Server-seitiges Rendering als Fallback
• Portierung Render-Code in bestehende Java-Umgebung
• Vorteil
• Kartendarstellung überall identisch verfügbar
• Hohe Performance auch in älteren Browsern
• Nachteile
• Hohes Datenvolumen
• DPI-Unabhängigkeit nur durch höher aufgelöste Bitmaps
Folie 16
Junghans+Schneider 2014

17. Druckmodus
Canvas im Browser drucken?
• Canvas-Druck teilweise sehr problematisch
• Kartenbild alleine genügt nicht
• Icons, Routen, Maßstab, ...
• Lösung: Server-seitige Canvas-API
• Angesteuert vom Browser
• Ergebnis: Ein PNG mit sämtlichen Inhalten
• Vorteile
• Identisches Druck-Bild in allen Browsern
• Keine Probleme mit dem Druck in älteren Browsern
Folie 17
Junghans+Schneider 2014

18. Frameworks und Techniken
Daimler-Händlersuche unter mercedes-benz.de
• Responsive Anwendung
• Zustandsverwaltung der GUI per CSS
• Frameworks und Bibliotheken
• jQuery
• Leaflet
• Handlebars
• Build-Tools
• Grunt
• Compass
• Demo ➔ Browser
Folie 18
Junghans+Schneider 2014

19. Fazit
Vektor-Karten mit Canvas (2012)
• Canvas-API ist breit verfügbar
• Performance ist hoch
• (Noch) Unschönheiten beim Text-Rendering
• HTML5 rocks :-)
Folie 19
Junghans+Schneider 2014

20. Fazit
Vektor-Karten mit Canvas (2014)
• Canvas-API ist breit verfügbar
• ... aber nicht mit allen Features
• Performance ist hoch
• ... aber flüssige Bedienung erfordert viel Aufwand
• (Noch) Unschönheiten beim Text-Rendering
• ... gilt auch zwei Jahre später
• HTML5 rocks :-)
• ... macht aber viel Arbeit
Folie 20
Junghans+Schneider 2014