201107Jun

jVectorMap: Interaktive SVG-Karten für Websites

Es gibt viele Elemente und Bereiche, die sich auf einer Website interaktiv einbinden oder visualisieren lassen. So stellen vektorisierte Land- oder Weltkarten einen Bereich dar, der sich mit modernen Web-Technologien mittlerweile sehr gut umsetzen lässt. Wenn die Aufgabe also einmal lauten sollte, eine interaktive Karte mit zusätzlichen Informationen auf einer Seite einzubinden, könnte das jQuery-Plugin jVectorMap die erste Wahl sein: Mit dem Skript kann Kartenmaterial im SVG-Format verarbeitet und mit unterschiedlichen Eigenschaften belegt werden. Ältere Versionen von Internet Explorer erhalten Fallback-Daten im VML-Format.

jVectorMap

Implementiert wird eine jVectorMap-Karte über wenige Zeilen Code, je nachdem, ob Optionen verwendet sollen werden oder nicht. Der einfache Weg wäre daher:

  • $("#map").vectorMap();

Der komplexe Teil steckt in den mitgelieferten SVG- und JavaScript-Daten, da hier die eigentlichen Abmessungen und Bereiche definiert sind. Ohne diese Definitionen macht ein solches Plugin daher noch keinen Sinn.
Optional können übrigens auch geografische Daten im XSL-Format verarbeitet werden, die etwa Aufschluss über die Regionen oder Umweltbedingungen in einem Zeitraum geben. Die Karten auf der Plugin-Website funktionieren soweit sehr gut und machen das Plugin zu einer interessanten Lösung.

Kommentarfunktion für diesen Artikel geschlossen.