In 4 Schritten zur Interaktiven Landkarte

Welcher moderne Webauftritt hat sie nicht? Interaktive Landkarten sind im Trend und gleichzeitig sehr praktisch. Elemente lassen sich auf diesen Landkarten platzieren, die bei einem Klick bzw. Mouse-Over Event weitere Information anzeigen. Das können z. B. Fotos, Videos oder auch Texte sein, die die jeweilige Thematik geschickt untermalen. Interaktive Landkarten empfehlen sich besonders im Reise- und Informationsbereich, weil dem Kunden dort oftmals mehr Informationen vermittelt werden sollen, als monotones Landkartenmaterial.

Voraussetzungen für die Erstellung

Es gibt unterschiedlichste Software zum Erstellen von interaktiven Landkarten. Ich nehme dafür am liebsten Adobe Illustrator kurz Ai (ab Version CS2). Wie man damit arbeitet, zeige ich weiter unten.

Außerdem sollte man für interaktive Landkarten wenigstens ein Grundverständnis von HTML, CSS und JavaScript mitbringen. Tiefe Programmierkenntnisse braucht man aber nicht.

1. Geeignete Landkarte finden

Eine normale Pixelgrafik ist als Landkarte weniger gut geeignet, weil sie beim Skalieren schnell unscharf wird. Eine vektorbasierte Landkarte schafft dieses Problem aus der Welt, sie lässt sich problemlos skalieren. Leider ist es aber sehr schwer eine passende Landkarte zu finden. Ich verwende meist die schöne, vektorbasierte Weltkarte von „Graphics Factory CC“. Der entscheidende Vorteil  dieser Weltkarte ist, dass jedes Land in einer eigenen Vektorgrafik dargestellt wird. Somit besitzt man mehr Flexibilität und könnte z. B. ganz Deutschland in nur eine einzelne Vektorgrafik-Datei kopieren und bearbeiten. Der einzige Grund, der gegen einen kommerziellen Einsatz dieser kostenlosen Landkarte sprechen könnte: Ein Urheberrechtsvermerk muss auf der Landkarte platziert werden.

2. Landkarte bearbeiten

Laden Sie nun die Ai-Datei herunter haben und öffnen Sie sie in Adobe Illustrator. Nun kommen wir gleich zum Wesentlichen der Vektorgrafikbearbeitung. Zunächst einmal erstellen wir einen kleinen Kreis und platzieren diesen irgendwo auf der Landkarte.

Wo finde ich den Kreis? Drücken Sie auf den Rechteck-Button und warten Sie, bis Sie den Kreis auswählen können.

Anschließend öffnen Sie das Attribute Tool-Panel des erstellten Kreises und wählen in der Einstellung “Image Map” “Polygon” bzw. “Rectangle”. Danach müssen Sie noch die URL eingeben, auf die der Punkt verweisen soll. Achtung: Beginnen Sie die Linkadresse nicht mit dem Internetdienst “www”, sondern mit dem passenden Protokoll, z. B. “http://www.doctima.de”.

Attribute Tool-Panel Shortcut: F11 (Ai CS2), Strg + F11 (Ai CS6)

Die Karte und das passende HTML-Grundgerüst kann Adobe Illustrator automatisch erstellen. Dazu drücken Sie im Menü auf File -> „Save for Web“.

Daraufhin drücken Sie im geöffneten Fenster, in der unteren Taskleiste auf Preview (Weltkugel) und kopieren im Vorschaumodus den HTML-Code. Zu guter Letzt speichern Sie noch die Ai-Datei als Bilddatei ab.

Anschließend können Sie den HTML-Code nach Belieben nachbearbeiten.

3. Landkarte interaktivieren

Nicht nur ein roter Punkt mit einem Link lässt eine Landkarte interaktiv werden, sondern auch ein Mouse-Over Event, das Informationen zu den ausgewählten Punkt anzeigt. Das onmouseover-Event können Sie folgendermaßen umsetzen:

• Zuerst erstellen Sie einen Div-Container mit der Klasse „point_container“ und der ID „“mapinfo_1. Daraufhin schreiben Sie den anzuzeigenden Inhalt z.B. in einem p-Tag.

• Als nächstes übernehmen Sie in die „map area“ die Attribute für das onmouseover und onmouseout. Der Übergabeparameter der Attribute muss derselbe sein, der im ersten Schritt der ID des Div-Containers entspricht -> „mapinfo_1“.

• Als letzter Schritt kommt ein bisschen JavaScript und CSS in Spiel. CSS wird benötigt, um den Div-Container zu verbergen und JavaScript um den Div-Container bei einem onmouseover-Event anzuzeigen.

4. Landkarte publizieren

Wenn Sie jetzt mit Ihrer Landkarte zufrieden sind, können Sie diese nach Belieben publizieren.  Bei einem CMS-System wie Typo3 haben Sie zudem noch die Möglichkeit eine Extension für die Landkarte zu entwickeln. Dadurch hätten Sie den Vorteil, dynamisch Informationen zu veröffentlichen. Eine spontane Idee die mir  dazu einfallen würde, wäre ein Lieferantenradar für Lieferdienst-Portale. Wenn Sie jedoch keine Extension für eine Interaktive Landkarte entwickeln wollen und Ihnen interaktiver und gleichzeitig statischer Inhalt genügt, reicht es aus, den HTML-Code in ein Content-Element vom Typ „HTML“ zu kopieren und zu veröffentlichen.

Mit diesen Tipps sollten Sie Ihre erste eigene interaktive Landkarte gut auf den Weg bringen können. Und zum Abschluss und zur Inspiration hier noch zwei schöne Beispiele:

• Auffallend mit hoher Performance: http://l3t.eu/karte/
• Außergewöhnlich,  ressourcenintensiv und in Kombination mit Google-Maps: http://www.austria.info/de/interaktive-karte-oesterreich