In 4 Schritten zur Interaktiven Landkarte

499226_web_R_by_Thomas Siepmann_pixelio.de

Thomas Siepmann | @pixelio.de

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

WerkzeugeLaden 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“.

AttributeKreis

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

SaveForWebDie 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.

SaveForWebMenue

Anschließend können Sie den HTML-Code nach Belieben nachbearbeiten. Bei mir schaut das Ganze dann so aus: Landkarte Teil 1

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:

  • step1Zuerst 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“.step2
  • step3Als 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. Folgendes Beispiel zeigt noch einmal, wie leicht sich Interaktive Landkarten erstellen lassen. Und zum Abschluss und zur Inspiration hier noch zwei schöne Beispiele:

5 Gedanken zu „In 4 Schritten zur Interaktiven Landkarte

  1. Hallo Steffen, danke für den tollen Artikel!
    Ich habe da mal noch ein zwei Fragen: das mouseover event mit einblenden der div-Ebene – ist das alles im Illustrator angelegt, oder erstellt man nur die map area in Illustrator und der Rest ist html und css Programmierung in einem anderen Editor? In Illustrator CS3 habe ich nur die Möglichkeit zur Integration von Java Script gefunden… keine Möglichkeit eine map area zu definieren…
    Ich würde gerne auf einer Weltkarte zu einigen ausgewählten Ländern bei mouseover daneben ein Fenster mit Infos einblenden lassen.
    Vielen vielen lieben Dank für eine Rückmeldung!
    Du würdest mir damit sehr helfen!
    VG Maria

    • Hallo Maria,
      das mouseover/ mouseout-Event muss in einer area manuell gesetzt werden. Zuvor müssen natürlich die passenden JavaScript-Funktionen implementiert sein. Die map-area kann von Ai generiert werden. Das kann man z.B. so machen: Element auswählen und F11 drücken -> ImageMap auswählen -> Rechteck oder Polygon -> URL eintippen. (Ai CS6 -> Strg + F11).
      Hier findest du mein Beispiel zum Downloaden: http://blog.doctima.de/wp-content/uploads/2014/03/doctima-Dateien-ModiJavaScript-L%C3%B6sung.zip

      VG Steffen
      Twitter: @SteffenD252sel

      • Guten Morgen Steffen,
        viele Dank für deine schnelle Antwort! Habe es verstanden und es hat alles super geklappt 🙂
        LG Maria

        • Hi, ich weiß leider nicht wo ich die Angaben für die OnMouse-Over-Informationen für die interaktive Landkarte hinterlegen muss? In einer externen HTML Datei?

          Danke für Ihre Hilfe,
          MfG

          • Hallo,

            die Mouse-Over-Informationen müssen in die Ziel-HTML-Datei.
            Der Mechnismus ist so gedacht: Die Maus-Over-Informationen liegen in versteckten Containern die mit einer ID versehen werden. Das Javascript enhüllt beim Mouse-Over über ein ImageMap-Segment den passenden versteckten Container, z. B. per „display: block“ oder per CSS-Klasse. Beim Mouse-Out wird der Container wieder versteckt. Schauen Sie sich mal das ZIP an, das unter Punkt 4 als Beispiel verlinkt ist. Dort wird es klar. Falls Sie noch Fragen haben, melden Sie sich einfach noch einmal.

            Viele Grüße

            Christian Hammer

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.