Look ma, no flash!
Interaktive Vektorkarte mit HTML5-Canvas
Diese Karte hat's in sich: mit Hilfe des Canvas-Objekts für moderne HTML5-Browser (Firefox, Safari, Chrome, Opera) sowie VML für den InternetExplorer ist eine Vektordarstellung ohne Browserplugins möglich. Kein Flash, kein SVG, und doch browserübergreifend. Einzige Bedingung ist eingeschaltetes Javascript. Aufregend, oder doch?
Vektorkarte Beispiel
Die Karte stellt die Produktivflächen der Gemeinden des Kantons Bern am 1. Januar 2010 dar. Im Gegensatz zu den Gesamtflächen sind hier Gebirgsregionen, Gletscher und Seen ausgespart.
Kartenbreite in Pixel: 500 – 650 – 900 – 1200 – 2500
Bemerkungen zur Vektorkarte
- die Grösse der Darstellung lässt sich verändern.
- zerstückelte Flächen und Enklaven werden problemlos verarbeitet (z.B. Boltigen oder Oberburg).
- die Grenzverläufe sind für Vergrösserungen bereits eher zu stark generalisiert. Das Skript unterstützt noch keine dynamische Generalisierung.
- optimalerweise müsste eine separat eingefärbte Ebene mit den Seen hinzu gefügt werden.
- iPhone und Co. haben kein Mouseover. Hier erscheint der Name, wenn die Fläche angetippt wird.
- alle Rechte vorbehalten. © Geometrien: BFS, ThemaKart © Code: endo.ch
Hürden
Canvas hat kein DOM 1 – Canvas ist eine Zeichenfläche, einmal gezeichnet sind die Elemente nicht mehr als Objekte ansprechbar. Wie finde ich nun heraus, über welche Fläche die Maus gerade zieht? Erste Idee: eine zweite unsichtbare Zeichenfläche mit den gleichen Polygonen so füllen, dass anhand der Füllfarbe auf den Index der Fläche geschlossen werden kann. Danach braucht man nur die Pixelfarbe an der Mausposition abzufragen. Leider funktionierte die dafür vorgesehene Methode getImageData() in meinen Tests nur in einem der Browser richtig. Zweite Idee: Javascript durchläuft alle Polygone und berechnet selbst, ob die Mausposition innerhalb oder ausserhalb liegt. Das funktioniert überraschend gut und nach wenigen Optimierungen ist das Verhalten auch bei mehreren tausend Flächen flüssig.
Canvas hat kein DOM 2 – Eine Fläche ändert bei mouseover die Farbe. Also einfach die Fläche mit der neuen Farbe übermalen? Die Canvas-Kantenglättung macht einen Strich durch die Rechnung: die Umrisslinien werden mit jedem Mal dunkler und dicker. Also halt die ganze Vektorkarte jedesmal neu zeichnen? Zwar verläuft das Rendern unglaublich schnell, aber bei vielen Polygonen ruckelt es ziemlich. Die Lösung finde ich in Form einer zweiten Canvasebene für dynamische Farbeffekte, während die Karte im Hintergrund unberührt bleibt. PS: Mit VML geht das Umfärben übrigens problemlos. Einfach die style-Eigenschaft des jeweiligen Flächenobjekts ändern.
ExplorerCanvas – Das geniale Javascript ExplorerCanvas haucht dem InternetExplorer wie durch Zauberhand Canvas-Kenntnisse ein. Anfangs habe ich diese Erweiterung verwendet, und sie funktionierte, aber viel zu träge. Deshalb schrieb ich eine eigene, direktere VML-Umsetzung. Das war noch vor den Optimierungen am Canvasteil. Möglicherweise ist ExplorerCanvas beim jetzigen Stand des Skripts flink genug.
Entwicklungshintergrund
Zur Zeit verschwinden in der Schweiz durchschnittlich 30 politische Gemeinden pro Jahr durch Fusionen. Im Rahmen des Projekts Urban Audit im Jahr 2007 habe ich gemeinsam mit dem BFS ein Tool entwickelt, mit dem ältere statistische Gemeindedaten für den Einsatz in neuen Karten einfach und automatisch aggregiert werden können. Kürzlich kam die Idee auf, das Tool so zu erweitern, dass zusätzlich auch Vektorgeometrien von Karten anhand der Gemeindefusionen neu berechnet werden können. Damit das Resultat sofort sichtbar ist, entwickelte ich das mapCanvas-Skript.
