Canvas und andere Katastrophen Vektorkarten im (mobilen) Browser
Vorstellung
Junghans+Schneider

• http://junghans-schneider.de
• Gegründet 2010
• Team

• Andreas Junghans (M.Sc., Dipl.-I...
Inhalt
Themen

• Rückblick: Konzept Vektor-Karten per Canvas
• Performance, Qualität, Kompatibilität – oder:
Schwierigkeit...
Vektor-Karten per Canvas
Konzept

• Gleiches Prinzip wie Google Maps und OSM
• Kartendarstellung mit Kacheln

• Idee: Kach...
Vektor-Karten per Canvas
Umsetzung (2012)

• Realisiert für PTV AG, Karlsruhe
• Browser
• iOS (nativ)

• Render-Code im Br...
Vektor-Karten per Canvas
Umsetzung (2014)

• Realisiert für PTV AG, Karlsruhe

• Browser
• iOS (nativ)
• Android (nativ)
•...
Text-Darstellung
Browser-Vergleich (2012)

• Firefox 9
• IE 9
• Chrome 16
• Safari 5 (Windows)
• Safari 5 (Mac)

Folie 7

...
Text-Darstellung
Browser-Vergleich (2014)

• Firefox 9 26
• IE 9 11
• Chrome 16 32
• Safari 5 (Windows)
• Safari 5 7 (Mac)...
Text-Darstellung
Konsequenz aus (fehlender) Weiterentwicklung

• Text-Qualität nicht überall ausreichend

• Weder per Canv...
Performance
Komplexität (2012)

• Demo-Kachel

• Vektor-Größe (nach GZIP): ca. 5 KB
• Bitmap-Größe (PNG): ca. 50 KB
• Poly...
Performance
Komplexität (2014)

• Demo-Kachel

• Vektor-Größe (nach GZIP): ca. 5 5,5 KB
• Bitmap-Größe (PNG): ca. 50 55 KB...
Performance
Geschwindigkeit im Browser

• Render-Performance prinzipiell ausreichend ...
• 5-100 ms pro Kachel

• ... aber...
Performance
Lösungen

• Web Worker für Parsing
• ARKB... ➔ (0,-8),(-1,-9),...

• Web Worker für Rendering?

• Nur direktes...
Performance
Lösungen

• „Kooperatives Multitasking“

Folie 14

Junghans+Schneider 2014
Kompatibilität
Anforderungen an Browser

• Canvas mit line-dash
• Web Worker
• Cross-Domain requests
• Verbleibende Browse...
Kompatibilität
Anforderungen an Browser

• Eingeschränkte Browser-Auswahl nicht akzeptabel
• Lösung: Server-seitiges Rende...
Druckmodus
Canvas im Browser drucken?

• Canvas-Druck teilweise sehr problematisch
• Kartenbild alleine genügt nicht
• Ico...
Frameworks und Techniken
Daimler-Händlersuche unter mercedes-benz.de

• Responsive Anwendung

• Zustandsverwaltung der GUI...
Fazit
Vektor-Karten mit Canvas (2012)

• Canvas-API ist breit verfügbar
• Performance ist hoch
• (Noch) Unschönheiten beim...
Fazit
Vektor-Karten mit Canvas (2014)

• Canvas-API ist breit verfügbar
• ... aber nicht mit allen Features

• Performance...
Nächste SlideShare
Wird geladen in …5
×

Canvas und andere Katastrophen - Vektorkarten im (mobilen) Browser

716 Aufrufe

Veröffentlicht am

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

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
716
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
1
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Canvas und andere Katastrophen - Vektorkarten im (mobilen) Browser

  1. 1. Canvas und andere Katastrophen Vektorkarten im (mobilen) Browser
  2. 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. 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. 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. 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. 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. 7. Text-Darstellung Browser-Vergleich (2012) • Firefox 9 • IE 9 • Chrome 16 • Safari 5 (Windows) • Safari 5 (Mac) Folie 7 Junghans+Schneider 2014
  8. 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. 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. 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. 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. 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. 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. 14. Performance Lösungen • „Kooperatives Multitasking“ Folie 14 Junghans+Schneider 2014
  15. 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. 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. 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. 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. 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. 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

×