Fusion Tables: So werden Infofenster auf einer Karte dynamisch

Infofenster, dynamisch gefüllt

Wie sich mit Hilfe des Google-Werkzeugs Fusion Tables eine interaktive Karte erstellen lässt, habe ich hier schon mal beschrieben. Alles, was man dafür braucht: Eine Datentabelle und einen Google-Account.

Sofern die Tabelle Ortsinformationen enthält, lässt sich daraus eine Karte machen, die bestimmte Punkte oder auch ganze Bereiche (etwa einen Stadtteil oder ein Bundesland) markiert und auf Klick ein Fenster mit weiteren Angaben (etwa Einwohnerzahl oder Öffnungszeiten) einblendet. Welche Daten das sind und wie sie im Fenster dargestellt werden, kann man bei Fusion Tables konfigurieren.

Was aber, wenn das Fenster keine statischen Informationen enthalten, sondern sich dynamisch füllen soll? Der konkrete Anwendungsfall: Auf meiner Karte der Frankfurter Wahlkreise für die Landtagswahl, die ich für fr-online.de erstellt habe, werden in den Infofenstern die Direktkandidaten aufgelistet – und immer dann, wenn es ein Porträt dazu gibt (die erst nach und nach veröffentlicht werden), soll ein entsprechender Link zu diesem Text eingeblendet werden. Das Ganze bitte, ohne dass andernfalls Lücken oder Leerzeilen entstehen. Die Lösung: dynamische Templates.

Die Grundlagen

Zunächst nochmal kurz die Grundlagen: Mit einem Google-Account ausgestattet, kann man den Dienst Google Drive (früher: Google Docs) auch für die Erstellung interaktiver Karten verwenden. Die Datentabelle – sie kann in den Formaten .csv, .tsv oder .txt vorliegen oder aber bereits als Google Spreadsheet verfügbar sein – wird dafür in eine so genannte Fusion Table verwandelt. Ein Klick auf “Erstellen” ebnet den Weg dorthin. Die Tabelle sollte auf jeden Fall eine Spalte mit Ortsinformationen enthalten. Das kann zum Beispiel eine Adresse sein, oder ein Ländercode. Um Bereiche auf lokaler oder regionaler Ebene zu umreißen, benötigt Fusion Tables KML-Dateien. Behörden liefern (wenn sie denn können) meist so genannte Shapefiles, die man mit dem Werkzeug Shpescape in das Format KML unwandeln und direkt zu Fusion Tables hochladen kann.

Infofenster konfigurieren

Fusion Tables: Statisches Infofenster

Die mit Geodaten versehene Fusion Table  lässt sich mit einem Klick zur Karte machen (in der klassischen Ansicht über “Visualisieren” -> “Karte”, in der neuen Ansicht über den Reiter “Map”). Bei der Konfiguration des Infofensters hat man die Wahl zwischen einer automatisierten Anzeige aller oder frei gewählter  Tabellenspalten oder einer eigenen Gestaltung, die Formatierungen via HTML erlaubt. Google Fusion Tables erlaubt an dieser Stelle übrigens keine iframes  – aus Sicherheitsgründen, wie der Konzern sagt. Das Einbetten des Inhalts einer Website ist somit nicht möglich. Bilder hingegen können angezeigt werden.

Mein Code für das Fenster mit Informationen zu einem Wahlkreis enthält {Platzhalter in geschweiften Klammern} für die Daten, die ich einblenden will, formatiert mit ein wenig HTML und CSS:

<div class=’googft-info-window’ style=”height:28em;”>
< h3 > {Wahlkreis_Name}< /h3 >
< b >Landtagswahl 2009:< /b >< br >
< b >Direktmandant:< /b > {Direktmandat_2009} < br >
<b>Zweitstimmen-Gewinner:</b> {Zweitstimmen_Gewinner_2009}<br>
< br >
< b >Direktkandidaten für die Landtagswahl 2013:< /b >< br >
< b >CDU:</b> {Kandidat_CDU}< br >
< b >SPD:</b> {Kandidat_SPD}< br >
< b >Grüne</b> {Kandidat_Gruene}< br >
< b >FDP:</b> {Kandidat_FDP}< br >
usw.

Sind nun aber Tabellenspalten leer (weil beispielsweise bestimmte Parteien im Wahlkreis nicht vertreten sind), können Lücken in der Liste entstehen. Was tun? Das Infofenster dynamisch füllen: Nur wenn Daten vorhanden sind, soll  eine Zeile im Infofenster stehen. Wenn nicht, will ich an dieser Stelle auch keine Formatierungen oder Umbrüche haben.

Dynamic Templates

Google liefert hier eine gute Schritt-für-Schritt-Anleitung für den Einsatz von dynamischen Templates. Eingebettet in die beiden Befehle {template .contents} und {/template}, lässt sich auch hier der Inhalt des Fensters mittels HTML und CSS in die gewünschte Erscheinungsform bringen. Die Platzhalter sehen ein wenig anders aus. Das Pendant zu {Wahlkreis_Name} etwa ist hier  {$data.value.Wahlkreis_Name}.

Lebendig wird das Ganze in Verbindung mit if-Abfragen:

{if $data.value.Kandidat_AGP} <b>AGP:</b> {$data.value.Kandidat_AGP} <br> {/if}

Mit dieser Zeile blende ich eine Partei nur dann ein, wenn sie sich in diesem Wahlkreis um ein Direktmandat bewirbt. Und mit der folgenden Zeile sage ich dem Infofenster, dass es einen Link nur dann ausgeben soll, wenn in der Tabelle ein Link zum  Porträt des Kandidaten existiert:

{if $data.value.Link_AGP} <a href=”{$data.value.Link_AGP}” target=”_blank”> (Porträt)</a> {/if}

Ist die Bedingung nicht erfüllt, passiert mit dieser Zeile – nichts. Es lässt sich aber auch eine Alternative definieren:

{if $data.value.Link_AGP} <a href=”{$data.value.Link_AGP}” target=”_blank”> (Porträt)</a>

{else} <i>Huch – noch gibt es kein Porträt, aber bald!</i> {/if}

Mit dynamischen Templates wird Fusion Tables ein mächtiges Werkzeug: Meine Karte der Frankfurter Landtagswahlkreise und ihrer Direktkandidaten zeigt das Ergebnis. Sobald ein neues Porträt erscheint, muss ich nur noch den Link in die Tabelle einfügen – und das Infofenster blendet ihn automatisch an der gewünschten Stelle ein.

Der Umgang mit dynamischen Templates ist allerdings ein bisschen tricky. Stimmt auch nur ein Wert nicht, fehlt auch nur eine geschweifte Klammer, so wird statt des Fensters eine Fehlermeldung serviert. Auch an Bindestrichen kann sich das Template verschlucken. Die Fehlermeldungen sind leider recht kryptisch – wie so oft macht auch hier Versuch kluch.

Drei Tipps, von denen ich wünschte, ich hätte sie von vorneherein beherzigt:

• Überlege dir nachvollziehbare Konventionen für die Benennung der Tabellenspalten. Das erleichtert später die Arbeit am Infofenster-Template.
• Verwende dabei immer! Unterstriche.
• Behalte die Benennungen konsequent bei – auch in anderen Tabellen, sofern es sich anbietet. So kannst du Teile der Infofenster-Codierung kopieren und wiederverwenden.