Zum Inhalt wechseln
Dr. Web Logo seit 1997.
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
Menü
  • Agentur eintragen ✅
  • Ausschreibungen
  • Beste Agenturen
  • Jobs
  • Magazin
  • Newsletter 📩
  • Login
  • Kontakt
  • Sponsored Post
  • Werben 🎉
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web Logo seit 1997.
  • Agentur finden
  • Ausschreibungen
  • Smarte Agenturköpfe
  • Magazin
Agentur eintragen →
Dr. Web » Bilder & Vektorgrafiken bearbeiten » MapSVG: vektorbasierte Karten für jQuery und WordPress

MapSVG: vektorbasierte Karten für jQuery und WordPress

Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • Keine Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 8. Juli 2016

Inhaltsverzeichnis

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.

Werde ein Sponsor. Kontaktiere uns →

Kostenloses SEO-Tool

Agenturpartner

Klickbeben Webdesign Agentur Innsbruck Logo.

Webagentur klickbeben

Innsbruck

Arit Services Logo.

ARIT Services GmbH

Laatzen

Sparkman webdesign Frankfurt.

Webdesign Frankfurt | Sparkm4n

Dillenburg

seolist seo frankfurt logo

SEOlist.IO – SEO Agentur & SEO Freelancer Frankfurt

Frankfurt am Main

Netzhelfer Agentur Ostfildern Stuttgart Logo. Die Partner für das Internet.

NETZhelfer GmbH

Ostfildern

Alle Agenturpartner

Lust auf mehr?

Symbolbild in einem Laptop eingebettet. Zu sehen ist ein Mitarbeiter einer Digitalagentur.
Digitalisierung

Die passende Digitalagentur finden: Das solltest Du beachten

Wir unterstützen Dich bei der Auswahl der passenden Digitalagentur, mit Agenturempfehlungen und wichtigen Hintergrundinformationen in unserer FAQ.

→
SEO Agentur

SEO Agentur

Hier finden Sie eine geeignete SEO Agentur. Sie möchten eine bessere Sichtbarkeit Ihrer Website in Google & Co., mehr Traffic, höhere Conversions, mehr Umsatz? Eine professionelle SEO Agentur unterstützt Sie maßgeblich bei der Erreichung dieser wichtigen Ziele.

→
Mitarbeiter einer WordPress-Agentur mit einer Tasse Kaffee im Vordergrund.
WordPress

WordPress — eine gute Wahl für Ihre Unternehmenswebsite?

Hier finden Sie ein ausführliches FAQ zu WordPress als Entscheidungshilfe und eine Auswahl von professionellen WordPress Agenturen.

→

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Agentur nach Schwerpunkt finden

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Die besten Digitalagenturen
  • Die besten SEO Agenturen
  • Die besten Webdesign Agenturen
  • Die besten Werbeagenturen
  • Die besten WordPress Agenturen
  • So finden Sie die richtige SEO-Agentur
  • Ist WordPress eine gute Wahl für Ihre Website?

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich
  • Aachen
  • Augsburg
  • Basel
  • Bamberg
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bochum
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Gießen
  • Goslar
  • Hamburg
  • Hamm
  • Hannover
  • Heidelberg
  • Ingolstadt
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Ludwigsburg
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Oldenburg
  • Osnabrück
  • Passau
  • Pforzheim
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Starnberg
  • Stuttgart
  • Tübingen
  • Wien
  • Wiesbaden
  • Wuppertal
  • Würzburg
  • Zürich

Aus unserem Magazin

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Nach oben ↑