amChart Maps

amChart ist eine Bibliothek mit interaktiven Karten, die du für die  Visualisierung deines datenjournalistischen Projekts verändern kannst.

Innovativität: Einstellungsoptionen: Nutzerfreundlichkeit: Design:

Meine Meinung

amChart Maps ist ein anspruchsvolles Programm - bietet aber anders als das Hauptprogramm einen simpleren Editor an. Leider ist auch die Anzahl der Templates reduziert.

Vor zwei Wochen beschäftigten wir uns mit dem Hauptprogramm amCharts, das uns sehr gefallen hat.

Fakten & Daten

Preis

Sprache
Lernzeit
Arbeitszeit
Ausspielart
Support

|

|
|
|
|
|

nicht-kommerziell: kostenlos
kommerziell: ab 140 US-$
englisch
1-2 Stunden
1 Stunde
HTML-Datei (zum selber hosten)
Homepage


zum Tool

Diese Woche wenden wir uns nun dem Unterprogramm amCharts Maps zu, dass nicht Infografiken, sondern Karten visualisiert. Dieses hat einen Nach- und einen Vorteil.

Leider gibt es weitaus weniger Templates, mit denen zu herumspielen kannst. Deine Möglichkeiten sind also begrenzter als bei amCharts, wo du Dutzende Infografiken stückeln konntest. Allerdings kann das Bauen der Karten auch weitaus einfacher sein. amCharts bietet mit dem Pixel Map Generator einen vereinfachten Editor, der es auch Code-Einsteigern leicht macht, interaktive Karten zu bauen. Aber dazu später mehr!

Anschauungsbeispiel

Der Editor

amChart besteht aus drei verschiedenen Sammelungen: Charts, Stock Charts und Maps – also Infografiken, Kurs-fokussierte Charts und Karten. Alle können hier heruntergeladen werden oder als Plugin für WordPress installiert werden. Wir holen uns diese Woche nur die Karten-Variante. Einmal heruntergeladen, erscheint eine ZIP-Datei auf deinem Desktop. Darin enthalten sind mehrere Ordner mit Bildern, Beispielcharts, Mustern und vielem Anderen. Die Beispiel-Karten im Ordner "Samples" sind das eigentliche Herzstück.

Öffne eine der HTML-Datei mit einem Browser (Rechtsklick > Öffnen mit > Firefox/Chrome/Safari). Dann wird dir eine vorgebaute Karte im Browser geladen, die sozusagen das Gerüst deiner noch zu bauenden Map ist. Um diese zu verändern, brauchst du einen Editor. Bereits letzte Woche habe ich NotePad++ empfohlen, mit dem ich sehr gute Erfahrungen gemacht habe. Hast du den Editor installiert, öffne eine der Beispiel-Karten damit. Nun erscheinen viele Zeilen Codes auf deinem Bildschirm.

Willkommen in der Welt der Codes

Wenn du amCharts bereits ausprobiert hast, wirst du das Prozedere kennen. Falls nicht, lass dich nicht gleich abschrecken. Der Code ist stets sehr sauber aufgeschrieben und übersichtlich strukturiert. Nach dem ersten Abschnitt, in dem Meta-Informationen und Verlinkungen mit Style-Sheet und JavaScript geschrieben sind, kommt der für dich interessante Part. Dieser sieht bei fast allen Templates gleich aus. Du kannst du beherzt zugreifen und die Dummie-Daten verändern. 

Unter den Datensätzen folgen weitere Codezeilen, die nun für jede Karte individuell sind. Wenn du daran herumspielst, solltest du immer vorher abspeichern, um deine Änderungen rückgäng machen zu können. Denn hier greifst du in grundlegende Merkmale der Maps ein.

Die Alternative für Dummies

Ist dir das alles zu komplex und Code für dich einfach ein Ärgernis, kannst du auch eine viel einfachere Alternative nutzen: den Pixel Map Generator. Dabei handelt es sich um ein Browserprogramm, mit dem du unterschiedliche geografische Karten (Weltkarte, Länderkarten, Regionenkarten) laden und händisch einfärben kannst. Nicht bei jedem Projekt wird es sich anbieten, die 193 Länder dieser Erde händisch einzufärben. Aber manchmal geht dies schlicht schneller, wenn man nur die 16 Bundesländer Deutschlands und ihre Weißwurstdichte statistisch darstellen will.

Am Ende kann die Karte als SVG, HTML oder statische PNG heruntergeladen werden. Bedenke aber, dass allein HTML Interaktivität unterstützt. SVG ist das Format von Vektorgrafiken, PNG eine simple Bilddatei. Wir empfehlen deswegen ausdrücklich das HTML-Format.

Hosten & Kosten

Egal ob du die anspruchsvolle Variante oder den Pixel Generator genutzt hast. Am Ende solltest du eine HTML-Datei besitzen. Hast du die Karte über Notepad++ gebaut, musst du die Datei in dem ursprünglich heruntergeladenen "Sample"-Ordner abspeichern und dann den gesamten (!) Überordner "amChart" auf deinen Serer laden. Nur so lädst du auch die CSS- und JavaScript-Dateien mit, die der Browser braucht, um deine Datensätze dazustellen. Wenn du mit WordPress bloggst, empfiehlt sich hier Filezilla. Es ist aber auch möglich den Ordner in eine Cloud (Drive, OneDrive, Dropbox, ...) zu laden und dann den Ordner freizugeben.

(Anmerkung 05.11.2015: David Hilzendegen hat uns dabei auf ein Problem aufmerksam gemacht – und gleich auch die Lösung präsentiert. Damit die Datei später korrekt geladen wird, muss die Verlinkung im HTML-Sheet – wie unten beschrieben – angepasst werden.)

Tricks für Pros
Falls du deine Karten selbst codierst, wirst du bei manchen die Latitude und die Longitude von Orten benötigen, um zum Beispiel den Ort der Bubbles in der Beispielkarte festzulegen. Dies funktioniert am einfachsten über Google Maps. Klicke hierzu auf einen beliebigen Punkt auf einer Google Maps Karte mit rechts und dann auf "was ist hier?". Am unteren Bildschirmrand erscheinen dann die Koordinaten des Ortes. Easy!

Hast du den Generator genutzt, ist es nicht nötig all die anderen CSS- und Javascript-Datei mitzuladen, weil der Code auf die nötigen Daten auf den amCharts-Servern zugreift. Das macht es für dich einfacher. Allerdings bist du von ihnen abhängig. Sollten sie eines Tages gelöscht werden, guckst du semi-intelligent aus der Wäsche. Hast du dich für diese Variante entschieden, musst du nur die HTML-Datei auf dem eben beschriebenen Weg auf deinen Server packen.

Egal wie du dies löst: Am Ende muss deine HTML-Chart-Datei im Netz frei zugänglich sein. Dann kannst du sie über einen iframe-Code in deine Webseite einbetten.

amChart ist kostenlos – zumindest wenn du es nicht kommerziell einsetzt und einen kleinen, unscheinbaren Link auf das Programm in der Infografik setzt. Das ist wirklich großartig und großzügig – wird jedoch für manche Journalisten nicht genug sein. Je nach Gebrauch kostet amChart in der Pro-Variante einmalig ab 140 US-$ aufwärts. Hier dann aber auch ohne Firmen-Branding.

Pro

Wie bereits beim Hauptprogramm ist das Schreiben im Code sicher ein Manko, an das man sich aber gewöhnen kann. Der Pixel Map Generator erleichtert dies weiter. Daumen hoch! Hinzu kommt, dass der Code saubere Karten ausspuckt, bei denen uns noch nicht ein einziger Fehler aufgefallen ist. Da hat jemand sauber gecoded.

Kontra

Leider ähneln sich die Karten-Templates stärker als beim Hauptprogramm. Ihre weit geringere Anzahl tut ihr übriges. Anders als bei amCharts waren wir bei der Maps-Variante schnell mit den Beispielen durch. Da wäre aus unserer Sicht mehr drin gewesen. Natürlich kann jeder Karten-Code im Grunde individuell verändert werden. Aber das ist dann doch ein wenig viel verlangt.

Bleiwüsten abonnieren:

Fazit & Alternativen

Haben wir amCharts noch verzückt angepriesen, finden wir amCharts Maps leider nur "gut". Das ist schon viel. Aber eben nicht alles. amCharts ist ein Sahneschnittchen, amCharts Maps ein Streuselkuchen.

coole Beispiele

Karten visualisierende Programme gibt es viele. Eines der besten ist sicher Mapbox, aber auch Silk haut in diese Kerbe.