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.

Kommentare

Andre schrieb am 13.06.2011 #1

Ich würde das Plugin gerne für ein kleines privates Projekt nutzen, doch wie muss ich es machen?
Erstmal ne Karte mit Adobe Illustrator machen? Wie genau?

Weißt du vielleicht, wo man eine genaue Anleitung findet? Um ehrlich zu sein, aus der Website von dem Plugin werde ich nicht schlau :(
Und Javascriptexperte bin ich auch nicht.

Wäre wirklich nett, wenn mir jemand helfen könnte.
Währenddessen suche ich auf Google weiter :)

Matthias schrieb am 20.06.2011 #2

Hi Andre,
auf der Plugin-Seite steht in der Tat nicht so genau, wie sich eigene SVG-Daten in das Plugin integrieren lassen. Daher habe ich selbst ein kleines Tutorial verfasst, das nun hier abrufbar ist!
Ich hoffe, es hilft :-)