Warning: include_once(/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php): failed to open stream: No such file or directory in /var/www/html/fields/cgp08/local/config.php on line 4

Warning: include_once(): Failed opening '/var/www/html/pmwiki-2.2.86/cookbook/soap4pmwiki/soap4pmwiki.php' for inclusion (include_path='.:/opt/php/lib/php') in /var/www/html/fields/cgp08/local/config.php on line 4

Warning: Cannot modify header information - headers already sent by (output started at /var/www/html/fields/cgp08/local/config.php:4) in /var/www/html/pmwiki-2.2.86/pmwiki.php on line 1250
Computergrafik-Praktikum Sommersemester 2008 - Main - Gruppe Google Maps

Dokumentation der Teilkomponente Google Maps

Diese Dokumentation gibt einen Überblick über die Programmierung der Google Maps API for Flash-Komponenten, welche in die Anwendung zur Visualisierung von Immatrikulationsdaten des Computergrafikpraktikums 2008 integriert wurden. Sie geht auf Schwierigkeiten während der Programmierung ein und erklärt die Lösungswege die eingeschlagen wurden.

Inhaltsverzeichnis

  1. Aufbau der Oberfläche
  2. Idee der Strukturierung
  3. Fazit
  4. Autoren












#Aufbau_der_Oberfläche

Aufbau Oberfläche

Autor: Andreas Wichmann & Florian Hillen & Peer Wagner

Oberfläche

Unsere Idee für die Benutzeroberfläche der Google Maps Applikation beruht darauf sie möglichst einfach und intuitiv für den Benutzer zu gestalten, ihm aber dennoch die Möglichkeit zu geben auf bekannte Interaktionsmöglichkeiten zurückzugreifen. Aus diesem Grund entschieden wir uns beispielsweise dazu die Auswahl der Map-Types herauszunehmen, da die physikalische Karte zur Anzeige der Daten am besten geeignet war. Zur Interaktion mit der Karte fügten wir eine PositionControl und ZoomControl hinzu, so dass der Benutzer sich auf der Karte bewegen und die Zoomstufe frei bestimmen kann. Jedoch beschränkten wir die Zoomstufen, da ein weiteres Herauszoomen die Darstellung der Treffer nur undeutlich gemacht und ein weiteres Hineinzoomen auf Grund der Übersichtlichkeit wenig Sinn gemacht hätte.

Desweiteren entschieden wir uns dem Benutzer die Möglichkeit zu geben auch gezielt nach Städten suchen zu lassen, indem wir im linken unteren Bereich auf Flex basierende Elemente zurückgriffen. Über die von Google Maps bereitgestellte Möglichkeit des Geocodings findet so eine automatische Positionierung der Karte auf die gewünschte Stadt statt.




Idee der Strukturierung

Autor: Andreas Wichmann & Florian Hillen

Bei Bearbeitung der uns gestellten Aufgabe zur Visualisierung von Immatrikulationsdaten in Google Maps unterteilten wir diese Aufgabe in drei Teilbereiche: Bundesländer, Marker und Infofenster. Dies erschien uns als sinnvoll, da die von Google Maps übergebene Karte für unsere Zwecke graphisch angepasst werden musste. Auf Grund der Raumbezogenheit der Daten, erschien uns der Einsatz von Markern als beste Möglichkeit zur Visualisierung. Um einen größeren Bereich der Informationen nutzen zu können und die Darstellung nicht nur auf die Trefferanzahl in den Markern zu reduzieren, sahen wir die Infofenster als beste Anzeigeform an.



#Bundesländer

Bundesländer

Autor: Andreas Wichmann & Florian Hillen

Beim Betrachten der Google-Maps-Karte auf minimaler Zoomstufe war zu erkennen, dass keines der Bundesländer mit Grenzen versehen war. Erst bei höheren Zoomstufen wurden dünne, gestrichelte Landesgrenzen sichtbar. Wir entschieden uns die Grenzen deutlicher hervorzuheben, um so einen besseren visuellen Eindruck der angezeigten Treffer zu erhalten.

     
Obige Bilder zeigen die Veränderung der Deutschlandkarte vor und nach dem Einfügen der Bundesländergrenzen.

Zunächst informierten wir uns die von Google bereitgestellte Sprache KML, welche die Möglichkeit bietet, graphische Elemente über die Karte zu legen. Nach einigen Recherchen mussten wir feststellen, dass die KML Überlagerung in der noch jungen Google Maps API for Flash nicht möglich ist.

Unser nächster Ansatz nutzte die von Google Maps bereitgestellte Polyline, welche eine Aneinanderreihung von einzelnen Linien darstellt. Bei näheren Überlegungen erschien es uns sinnvoller Polygone zu nutzen, da wir so nicht nur die Grenzen der Bundesländer anzeigen konnten, sondern zudem auch noch die Möglichkeit hatten mit dem Polygon bzw. Bundesland zu interagieren. Auf Grund der hohen Zoomstufen von Google Maps benötigten wir relativ genaue Koordinaten der Grenzen. Ein Tool der Geoinformatik (OpenJUMP Version 1.2.0) half bei der Beschaffung dieser Daten. Anfängliche Befürchtungen, dass die ca. 30.000 Koordinatenpaare die Applikation stark verlangsamen würden, veranlassten uns dazu die Genauigkeit der Grenzen herunterzusetzen, indem die Bundesländer von Hand nachdigitalisiert wurden. Dies verringerte die Anzahl der Koordinatenpaare um den Faktor 10. Nach den ersten erfolgreichen Testläufen mit dem verkleinerten Koordinaten-Datensatz entschieden wir uns, das Land Niedersachen mit voller Koordinatenanzahl in die Applikation einzubinden. Die Ladegeschwindigkeit blieb weiterhin konstant, so dass wir auch die fehlenden Bundesländer in vollem Umfang hinzufügten. Ein selbstgeschriebenes Skript überführte die Rohdaten von OpenJUMP in ein von Google Maps interpretierbares Format. Nach vollständiger Einbindung aller Polygone stellten sich unsere anfänglichen Befürchtungen als unbegründet heraus, da die Performance der Applikation nicht unter der hohen Koordinatenanzahl litt.

Hover-Effekt am Beispiel Sachsen-Anhalt
Durch den Einsatz von Polygonen eröffneten sich mittels dem mitgelieferten MapMouseEvent neue Interaktionsmöglichkeiten mit der Karte. Bei Anklicken eines Bundeslandes auf minimaler Zoomstufe wird die Karte passend auf das Bundesland ausgerichtet, wobei auch die Zoomstufe entsprechend angepasst wird. Ein weiteres Anklicken ist hier nicht mehr möglich. Wir entschlossen uns gegen die Möglichkeit, den von Google bereitgestellten Geocoder für die Ausrichtung der Karte zu benutzen, da dieser mit hohem Aufwand verbunden gewesen wäre. Mittels OpenJUMP definierten wir unsere Ausrichtungspunkte selbstständig und übertrugen die Koordinaten direkt in den Quelltext.

Ein weiterer Effekt den die Polygone mit sich bringen ist der Mouse-Over-Effekt, welcher sich ebenfalls über zwei Bestandteile des MapMouseEvents realisieren lässt. Zur besseren Orientierung werden daher die Bundesländer beim Überfahren der Karte mit der Maus durch einen leichten Farbeffekt wie auf dem Bild rechts zu sehen hervorgehoben.

Um bereits auf der minimalen Zoomstufe einen optischen Eindruck über die Verteilung der Studentenzahlen zu erhalten, entschieden wir uns dazu die Hintergrundfarbe in Abhängigkeit der Trefferanzahl einzufärben. Wir stellten fest, dass viele verschiedene Farben hierfür zur Irritation des Benutzers führen. Aus diesem Grund realisierten wir die Einfärbung über den Alpha-Wert, der die Durchsichtigkeit der Blautöne definiert. Da dieser Effekte nur auf minimaler Zoomstufe angezeigt werden soll, mussten wir eine Überprüfung anhand der Zoomstufe vornehmen. Leider bot die Google Maps API for Flash in der Version 1.5 keine Möglichkeit auf Ereignisse der ZoomControl zu reagieren. Aus diesem Grund versuchten wir das Problem zu umgehen, indem wir unsichtbare Buttons über die ZoomControl legten, welche auf Anklicken separat reagieren konnten.

Mit dem Update der Google Maps API for Flash auf die Version 1.6 wurde ein neues Event implementiert, welches eine Reaktion auf die von der ZoomControl geworfenen Events ermöglichte. Das MapZoomEvent liefert uns also unter Anderem die Möglichkeit auf Änderung des Zooms zu reagieren und so den Effekt nur auf die minimale Zoomstufe zu beschränken.

Ein letztes Problem bezieht sich auf die Überlappungen der Bundesländer in den Bereichen der Stadtstaaten. Hier wären Löcher in den Polygonen von Nöten gewesen, welche zur Zeit jedoch nicht in Google Maps implementiert sind. So kann es beim direkten Anklicken einzelner Stadtstaaten zur Ausrichtung der Karte auf das umgebende Bundesland kommen. Dieses Problem lässt sich zur Zeit nicht beheben.

Bundesländerpolygone: Sourcecode (PolygonOptions)



Marker

Autor: Andreas Wichmann & Florian Hillen

Markerdarstellung

Nebenstehendes Bild zeigt die Darstellung der Marker nach der graphischen Anpassung an die Applikation. Die Marker unterscheiden sich dabei hinsichtlich der Größe und der Farbe. Die Größe ändert sich in Relation zur Trefferanzahl, die Farbe dient zur Verdeutlichung der Selektion, indem sie sich beim Mouse-Over von weiß zu orange ändert. Beim Anklicken eines Markers wird die Mouse-Over-Farbe fixiert und das Infofenster geöffnet. Erst beim Schließen des Infofensters nimmt der Marker wieder seine ursprüngliche Gestalt an.

Da bei voller Farbfülle unterliegende Informationen wie zum Beispiel Städtenamen verdeckt werden können, entschieden wir uns die Marker durch die Anpassung des Alpha-Wertes eine leichte Durchsichtigkeit zu geben. Dies erkennt man am nebenstehenden Bild besonders gut im linken Teil am Beispiel der Stadt Rheine.

Marker: Sourcecode

Bevor wir uns jedoch für die oben beschriebene Markerdarstellung entschieden haben, war unsere erste Idee die Marker als Kreis darzustellen. Die Durchführung dieser Idee stieß jedoch bereits nach kurzer Zeit auf unlösbare Probleme. Zwar war es möglich mit Hilfe der Polygone einen Kreis zu definieren und dessen Farbe beliebig anzupassen, jedoch fehlt einem Overlay generell die Fähigkeit ein Label zu besitzen, so dass wir die Trefferanzahl nicht direkt darstellen konnten. Desweiteren war es nicht möglich die Größe des Polygons an die jeweiligen Zoomstufe anzupassen. Dies ließ sich auch nicht damit umgehen, dass wir bereits vordefinierte PNG's zur Darstellung nutzten.

Aus diesem Grund fiel unsere Entscheidung auf den Standardmarker, der unter anderem den positiven Effekt mit sich brachte, dass die exakte Position auf Grund der Georeferenzierung besser zu erkennen war, da die Spitze direkt auf dem entsprechenden Punkt in der Karte aufsetzt. Da die bereits vorhandenen Marker beim erneuten Setzen nicht automatisch überschrieben werden können, müssen alle Overlays gelöscht und mit den neuen Daten nochmals erstellt werden. Eine komfortable Möglichkeit des Löschens aller Overlays wurde erst mit dem Update der API auf die Version 1.6 ermöglicht.

Weitere Überlegungen beschäftigten sich damit nicht nur die Größe, sondern auch die Farbe der Marker in Abhängigkeit der Trefferanzahl zu verändern. Dies führte zu dem Problem, dass leichte Farbabstufungen nicht deutlich sichtbar wurden. Auch eine Aufteilung in mehrere möglichst gut unterscheidbare Farben verwirrte den Benutzer mehr als dass es zur Übersichtlichkeit der Karte beitrug.



Infofenster

Autor: Andreas Wichmann & Florian Hillen

       
Infofenster mit unterschiedlichen Top 3 Gruppierungen

Nebenstehende Bilder zeigen die Infofensterdarstellung nach der graphischen Anpassung an die Applikation. Das Fenster öffnet sich beim Klick auf einen Marker und bleibt bis zur Auswahl eines anderen Markers oder bis zum Schließen aktiv. Der Inhalt liefert eine informelle Übersicht über die ausgewählte Stadt / Region. Um dem Benutzer die Möglichkeit zu geben mehr Informationen über die gewählte Stadt / Region zu erhalten, entschieden wir uns dazu ein Direktlink zu Wikipedia zu realisieren. Dies stellte uns jedoch vor ein Problem, da die Städtenamen in der Datenbank oft nicht wikipediakonform angelegt waren. So mussten Abkürzungen wie "a. d." oder Städte wie "Wesermünde", die seit 1947 einen anderen Namen haben, von Hand geändert werden. Über einen Klick auf den Städtenamen im Infofenster gelangt man nun zur passenden Wikipedia-Seite und kann dort weitere Informationen einsehen.

Der eigentliche Inhalt des Infofensters bezieht sich auf die statistischen Werte die durch die Filter selektiert wurden. Im oberen Teil werden die absoluten Studenten bzw. Studienfälle angezeigt, welche nochmals in Stadt und Kreis unterteilt werden, falls ein Kreis zur ausgewählten Stadt existiert. Sollte nur ein Kreis, ohne zugehörige Stadt, in der Trefferliste vorhanden sein, so wird diese Funktion übersprungen. Im unteren Teil befindet sich eine "Top 3"-Statistik, die in Abhängigkeit der durch die Filter einstellbaren Gruppierung gefüllt ist. Dies ist an den beiden obigen Bildern erkennbar, welche die Gruppierung nach dem 1. Studienfach und den Abschlüssen zeigen.

Infofenster: Sourcecode

Das Infofenster lässt sie über die Google Maps API for Flash mit einem Befehl implementieren. Jedoch biete diese Standardversion wenige Formatierungsmöglichkeiten. Im Folgenden wurden Versuche angestellt mit dem Attribut contentHTML den Inhalt über HTML-Tags zu formatieren. Hierzu konnten CSS Attribute definiert werden, welche jedoch nur teilweise von der API unterstützt wurden. Nach direkten Anfragen bei Google wurden wir auf das in Version 1.6 neu implementierte Attribut customContent verwiesen, welcher das Infofenster als Bitmap vorhält und so jegliche Anpassungen ermöglicht.

Ein weiteres Problem stellte die Darstellung der Top 3 - Statistiken dar, welche aus Performancegründen erst beim Öffnen des Infofensters aus der Datenbank ausgelesen werden sollten. So mussten eigene Events für die Darstellung der Infofensterinhalte implementiert werden. Es war daher von Nöten, dass der Marker einige, wichtige Attribute übergeben bekommt, um die Infofenster individuell an die Marker zu binden. Um die teilweise erheblichen Ladezeiten zu überbrücken, wird direkt nach Anklicken eines Markers ein weiteres, temporäres Infofenster geöffnet, welches den Benutzer um eine kurze Wartezeit bittet.

Während der Entwicklung mit der älteren API Version 1.5 fiel uns auf, dass Infofenster, die am Rand der Kartendarstellung geöffnet wurden, teilweise gänzlich außerhalb des Anzeigebereichs lagen. Zunächst versuchten wir dieses Problem zu umgehen, indem wir bei Klick auf einen Marker, den gesamten Bildausschnitt auf den Marker zentrieren. Diese Vorgehensweise brachte jedoch viel Unruhe in die Karte, da selbst bei kleinen Abweichungen die gesamte Karte verschoben wurde. Zudem konnte es sein, dass man mit einem Klick gänzlich den vorherigen Fokus (zum Beispiel auf ein selektiertes Bundesland) verliert. Aus diesen Gründen entschlossen wir uns dazu, eine eigene Funktion zu implementieren, welche die Karte entsprechend der Position des Markers verschieben sollte. Dazu definierten wir Korridore in denen keine Verschiebung stattfinden sollte. Außerhalb dieser Korridore wurde je nach Fall unterschiedlich, ähnlich der Regioncodes von Cohen & Sutherland, entschieden in welche Richtung die Karte verschoben werden sollte. Mit Erscheinen der neuen API Version 1.6 wurde diese Funktion automatisch von Google Maps übernommen, so dass unsere Funktion überflüssig wurde.



Fazit

Autor: Andreas Wichmann & Florian Hillen

Auf Grund der jungen API für die Flashversion von Google Maps hatten wir mit einigen Problemen zu kämpfen, welche einen engen Kontakt zu einigen Google Mitarbeitern notwendig machten. Diese reagierten schnell mit Tutorials und Hilfestellungen auf gestellte Anfragen und Hinweise.
Trotz alledem verhalf uns die sehr gute Dokumentation der API schnell zu ersten Erfolgen. Wir konnten so mit den vorgegeben "Pflichtaufgaben" zügig abschließen und hatten lange Zeit um unsere selbst gesteckten Ziele zu verwirklichen und zu verfeinern.
Alles in allem lässt sich sagen, dass die Google Maps API for Flash für die kurze Zeit schon umfangreiche Anpassungsmöglichkeiten bietet, jedoch mit der normalen Google Maps API in Umfang und Funktionalität für Großprojekte noch nicht mithalten kann. Wir sind jedoch der Meinung, dass sich dieser Zustand, auf Grund der motivierten Google Mitarbeiter, schnell ändern wird und so die Flashversion von Google Maps zu einer echten Alternative werden kann.



Autoren


Andreas Wichmann

Florian Hillen

Peer Wagner


Page last modified on January 12, 2009, at 10:25 AM