Denis Potschien 8. Juli 2016

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.

mapsvg

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.

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

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

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

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

mapsvg_marker
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)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Schreibe einen Kommentar

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