MapSVG: vektorbasierte Karten für jQuery und WordPress

Landkarten werden immer wieder benötigt – sei es zur visuellen Ergänzung statistischer Daten oder zur Darstellung von Standorten. Mit MapSVG steht dir ein Dienst zur Verfügung, mit dem du auf einfache Art und Weise vektorbasierte und interaktive Karten im SVG-Format in deine Website einbaust. MapSVG gibt es sowohl als Plugin für jQuery als auch für WordPress.

Karten von Staaten einschließlich Unterteilungen

Weit über 100 verschiedene Karten stehen dir bei MapSVG zur Verfügung. Darunter sind nicht alle, aber die meisten Staaten. Neben den Staaten selbst sind in den Karten auch staatliche Unterteilungen hinterlegt. So findest du bei der deutschen Karte auch die Bundesländer, bei der US-amerikanischen die Bundesstaaten und in der französischen die Regionen.

Beispiel für den Einsatz von Karten

Zusätzlich gibt es zwei Weltkarten – eine mit detaillierter Zeichnung der Grenzen und eine weitere mit eher grob gezeichneten Grenzen –, in denen alle Staaten eingezeichnet sind. Zu jeder Karte gibt es eine Vorschau, in der alle eingezeichneten Länder beziehungsweise Regionen anklickbar sind und dich über den Namen des Staates beziehungsweise der Region und den offiziellen ISO-3166-Code (zum Beispiel DE-BY für Bayern) informieren.

Außerdem gibt es zu jeder Karte einige Beispiele, die dir zeigen, wie diese eingesetzt werden können.

MapSVG in WordPress nutzen

Da es sich bei MapSVG um einen kommerziellen Dienst handelt, ist die kostenlose Nutzung auf einige Funktionen und Karten beschränkt. Mit dem Plugin „MapSVG Lite“ hast du allerdings eine sehr einfache Möglichkeit, Karten einzubinden und zu individualisieren. Da „MapSVG Lite“ allerdings nur Karten für die USA beinhaltet, musst du entweder auf das Premium-Plugins umsteigen oder eigene Karten hochladen.

Einfach eigene Karten hochladen und bearbeiten

Wichtig ist nur, dass das Kartenmaterial im SVG-Format vorliegt. Ob du Karten selbst in Illustrator oder einem anderen Zeichenprogramm anlegst oder auf kostenloses Kartenmaterial zurückgreifst, spielt keine Rolle. „MapSVG Lite“ gibt dir in jedem Fall die Möglichkeit, eigene Karten zu verwenden.

Über die Benutzeroberfläche des Plugins legst du dann die Farben für deine Karten fest. Neben Hintergrund-, Linien- und Basisfarbe für die einzelnen Flächen definierst du auch Farben für ausgewählte und deaktivierte Flächen sowie für einen Hovereffekt.

Farben anpassen

Ist den einzelnen Pfaden deiner SVG-Karte eine ID zugewiesen, wird dir diese ID als Region dargestellt. Bei einer Deutschlandkarte bietet es sich zum Beispiel an, den Pfaden, welche die Bundesländer darstellen, als ID den Namen des Landes anzugeben. So stehen dir die einzelnen Bundesländer als Regionen zur Verfügung.

Für jede Region definierst du dann unter anderem Tooltips und Links. Außerdem hast du die Möglichkeit, einer Karte eine Zoom- und Scrollfunktion hinzuzufügen. So ist es dann möglich, per Buttons oder Maus einen Kartenausschnitt zu vergrößern und den Ausschnitt zu bewegen.

Regionen bearbeiten und mit Tooltips und Links versehen

Hast du deine Karte fertig bearbeitet und gespeichert, steht dir ein Shortcode zur Verfügung, den du auf einer Seite oder in einem Beitrag platzierst.

Standpunkte per Marker hinzufügen

Während du mit dem Premium-Plugin per Adresseingabe Positionen ermitteln kannst, erlaubt dir das Lite-Plugin nur die manuelle Platzierung von Markern. Dank der grafischen Benutzeroberfläche platzierst du neue Marker allerdings recht komfortabel auf deiner Karte.

Marker setzen und mit Tooltips und Links versehen

Ähnlich wie bei den Regionen hinterlegst du auch Marker mit Tooltips und Links. So ist es zum Beispiel einfach, eine Karte mit Unternehmensstandorten samt Links zu den einzelnen Standorten zu erstellen.

jQuery-Plugin und Kosten

Für alle, die ohne WordPress arbeiten, gibt es MapSVG auch als jQuery-Plugin. Dieses gibt es allerdings nicht einer kostenlosen Version. Wenn du MapSVG also lieber per jQuery nutzen möchtest, kostet dich das Plugin 25 US-Dollar.

Das Premium-Plugin für WordPress gibt es für 35 US-Dollar. Dafür stehen dir dann alle Karten zur Verfügung und es gibt keinerlei Einschränkungen in der Funktion. So sind beim Lite-Plugin nur fünf Marker möglich. Mit dem Premium-Plugin erstellst du zudem eigene JavaScript-Events und kannst sehr viel individuellere Karten samt eigener Funktionalität erstellen.

(dpe)