Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Swetlana Senkevitch 2. Juli 2012

jQuery Vector Maps hilft beim Erstellen von Karten für Websites

In sehr vielen Webseiten sind Karten für verschiedene Zwecke eingebunden. Man findet alles: Weltkarten, Landkarten, Stadtpläne und viel mehr. Zusätzlich kann man den Karten diverse Informationen entnehmen. Welche, hängt von dem Typ einer Karte ab. Einige bieten Standorte von verschiedenen Filialen an, die anderen Sehenswürdigkeiten einer Stadt, mit Fotos oder Videos veranschaulicht. Weiterhin findet man Hotels oder Freizeittipps. Kurz gesagt: eine Karte in die eigene Webseite einzubinden, kann sehr hilfreich sein! Und je mehr man die Karten selbst modifizieren kann, desto besser! Heute stelle ich ein Plugin vor, mit dessen Hilfe verschiedene Karten generiert und nach Wunsch angepasst werden können: jQuery Vector Maps.


(Bildquelle: greencandy8888 auf Flickr | CC-BY-SA)

Was ist jQuery Vector Map?

jQuery Vector Map ist ein jQuery Plugin, welches es erlaubt, Karten in Webseiten zu bauen. Es ist eine stark modifizierte Version des Plugin jVector Map. Mit jQuery Vector Map werden SVG-Daten interaktiv im Browser erstellt. Die Daten werden als JavaScript-Objekte eingelesen. Nachdem sie im Browser eingebaut sind, kann man sie unterschiedlich bearbeiten. Man hat hier ziemlich viel Freiraum. Beispielsweise ist es möglich, die eigenen Karten selbst zu erstellen oder die Farben anzupassen. Auf der Projekt-Webseite stehen der Script Code und vier fertige Karten (Welt, USA, Deutschland, Europa) zum Download bereit. Das Plugin wird von Firefox, Chrome, Opera, Safari und IE9 unterstützt.


jQuery Vector Maps: ein Ausschnitt

Einige Beispiele zur Verwendung von jQuery Vector Maps

Ich habe ein bisschen im Internet gesucht und dabei zwei schöne Beispiele gefunden, welche meiner Meinung nach sehr schön zeigen, was man mit dem JVM-Plugin machen kann. Diese Beispiele stammen von Dr. Mark Roden, einem Chemiker, der seine Leidenschaft im Webdesign gefunden hat und ein ziemlich umfangreiches Blog betreibt.

Informationen über Länder einbauen

Klickt ein Benutzer auf ein Land auf der Weltkarte, bekommt er einige wichtige Informationen darüber, wie beispielsweise die Einwohnerzahl, Lebenserwartung oder Fläche.


Beispiel 1: Informationen über das Vereinigte Königreich

Die Karte farbig machen

Möchte man z.B. die Unterschiede in der Populationsdichte auf der Welt aufzeigen, ist es am besten, mit Farben zu arbeiten. Dort, wo die Population am grössten ist, soll auch die Farbe kräftiger sein und umgekehrt. Das macht Vieles auf eine einfache Art und Weise sehr anschaulich.


Beispiel 2: Farben bestimmen

Kann ich auch eigene SVG-Karten mit dem jQuery Vector Plugin einbinden?

Anscheinend stellen sich viele Leute diese Frage. Zumindest lief sie mir bei meinen Recherchen öfter über den Weg. Dieser Beitrag von Matthias Schütz beantwortet die Frage sehr ausführlich und kompetent. Zwar handelt es sich in diesem Beitrag um den ursprünglichen Plugin jVector Map, meiner Meinung nach aber ist es trotzdem hilfreich, ihn durchzuarbeiten.


Matthias Schütz: wie bindet man eigene SVG-Dateien ein?

Mit demselben Problem beschäftigt sich auch Armando Roggio, Webdeveloper aus Idaho. Auch sein Beitrag kann einen hohen Erkenntnisgewinn bringen.


Erstellung einer eigener Karte: Armando Roggio

Zum Schluss: JVM kann weit mehr, als ich in diesem Post erwähnt habe. Hier ist das persönliche Experimentieren und Rumprobieren erforderlich. Testen Sie es und und erstellen Sie eigene Karten, ganz nach Ihrem persönlichen Geschmack.

(dpe)

Swetlana Senkevitch

Neben dem Chemiestudium interessiert sich Swetlana Senkevitch für sehr viele Dinge dieser Welt. Kunst, Malerei, Psychologie, Naturwissenschaften, Schachspiel, Sprachen und Photographie sind nur einige Beispiele ihrer Interessen und Hobbies. Sie hat eine Leidenschaft fürs Schreiben und Design gefunden und beschäftigt sich nun mit Webdesign.

6 Kommentare

  1. You can also try my plug-in jVectorMap. It provides more maps and some additional features like markers. Actually jqvmap was derived from the jVectorMap a couple of months ago.

  2. Hallo,
    bei der Überschrift habe ich mich über den Artikel gefreut. Die Freude ist aber beim Lesen (ein bisschen) vergangen, da das Ursprungsprojekt nicht einmal erwähnt wurde.

    jQuery Vector Maps ist ein Fork (nennt man das so?) von jVectormaps ( http://jvectormaps.com | https://github.com/bjornd/jvectormap ). Auch wenn dies stark modifiziert wurde, bleibt die Ähnlichkeit/ der Urpsrung stark zu erkennen.

    Ich verfolge jVectorMap jetzt schon ne ganze Weile, melde auch Fehler, mache Vorschläge und schreibe mit dem Entwickler, dadurch habe ich auch die „Verwandlung“ vom alten zum neuen Code (Developer Branch) mitbekommen.
    Die Developer/Beta Version von jVectorMap ( https://github.com/bjornd/jvectormap/tree/develop ) wurde stark umgeschrieben, der Code in einzelne Dateien gesplittet usw. Auch wurden sehr viele Funktionen hinzugefügt. Darunter auch eine sehr große Neuerung, nämlich die Möglichkeit Marker zu setzen (siehe Tweet vom Entwickler über eine kommende Demo: https://twitter.com/bjorn___d/status/212165581678460928/photo/1 ). Diese werden in Koordinaten angegeben, von jVectorMap umgerechnet und passend ausgegeben. Auch kann man nun Regionen markieren und sich die markierten Regionen über eine Funktion ausgeben lassen.

    Beim Artikel von Matthias Schütz geht es nicht um jQuery Vectormap, sondern über jVectormap!!! Dieser Artikel wurde sogar auf meine Nachfrage hin geschrieben (siehe Kommentare bei: http://matthiasschuetz.com/jvectormap-interaktive-svg-karten-fuer-websites ).

    Zum Schluss noch eine Demo-App vom Entwickler (läuft, meine ich, noch mit einer älteren Version): http://geomusic.owl-hollow.net/

    Ich fände es wirklich sehr schön, wenn ihr dies noch zum Artikel hinzufügen könntet,
    Gruß, Andre :)

  3. Der Link für den Beitrag von Armando Roggio hat kein „href“, nur mal so :) Aber ansonsten mal wieder eine nette kleine Sache für zwischendurch.

Schreibe einen Kommentar

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