Fundstück der Woche: jVectorMap …


… das einfache jQuery-Plugin für interaktive Vektorkarten im Browser
Neulich bin ich im Netz über jVectorMap gestolpert. Ein kleines Projekt von Kirill Lebedev, welches es relativ einfach ermöglicht Vektordaten in einer interaktiven Webkarte darzustellen. Das Ganze ist als jQuery-Plugin realisiert und bietet eine Menge von vordefinierten Karten, die mit einem Einzeiler in die eigene Webseite integriert werden können. Für eine Weltkarte braucht es beispielsweise nur folgende Codezeile (nachdem die Ressourcen eigebunden wurden):

1
$('#map').vectorMap({map: 'world_merc_en'});
$('#map').vectorMap({map: 'world_merc_en'});

 


Neben der reinen Visualisierung können über eine API das Verhalten der Karte (z. B. Hovering von Kartenobjekten) beeinflusst werden. Außerdem ist es möglich Sachdaten (sog. DataSeries) mit der Karte zu verknüpfen, um die Ausgestaltung der Daten und die Interaktion mit den Daten zu verbessern. Dadurch lassen sich bereits kleinere Webmapping-Applikationen mit jVectorMap erstellen.

Natürlich lassen sich solche interaktiven Webkarten auch mit bekannten Webmapping-Frameworks wie OpenLayers oder Leaflet realisieren – und komplexere WebGIS-Anwedungen würde ich auch jederzeit mit OpenLayers oder Leaflet umsetzen. jVectorMap ermöglicht es jedoch mit minimalstem Aufwand ansprechende vektorbasierte Webkarten zu visualisieren. Sowohl die einfache Erzeugung als auch die Tatsache, dass für eine Vielzahl von Standardanwendungen bereits fertige Karten existieren und so die aufwändige Geodatenaufbereitung entfällt, sprechen für jVectorMap. Reinschauen lohnt sich auf jeden Fall!

Der gesamte Code für die oben dargestellte Weltkarte:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="en">
  <head>
    <title>jVectorMap demo</title>
    <link rel="stylesheet" href="../libs/jquery-jvectormap-1.2.2/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
    <script src="../libs/jquery-jvectormap-1.2.2/jquery-1.11.1.min.js"></script>
    <script src="../libs/jquery-jvectormap-1.2.2/jquery-jvectormap-1.2.2.min.js"></script>
    <script src="../libs/jquery-jvectormap-1.2.2/jquery-jvectormap-world-merc-en.js"></script>
  </head>
  <body>
    <div id="map" style="width: 90%; height: 300px;"></div>
 
    <script type="text/javascript">
        $(function(){
            $('#map').vectorMap({map: 'world_merc_en'});
        });
  </script>
  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <title>jVectorMap demo</title>
  	<link rel="stylesheet" href="../libs/jquery-jvectormap-1.2.2/jquery-jvectormap-1.2.2.css" type="text/css" media="screen"/>
  	<script src="../libs/jquery-jvectormap-1.2.2/jquery-1.11.1.min.js"></script>
 	<script src="../libs/jquery-jvectormap-1.2.2/jquery-jvectormap-1.2.2.min.js"></script>
 	<script src="../libs/jquery-jvectormap-1.2.2/jquery-jvectormap-world-merc-en.js"></script>
  </head>
  <body>
	<div id="map" style="width: 90%; height: 300px;"></div>

    <script type="text/javascript">
    	$(function(){
      		$('#map').vectorMap({map: 'world_merc_en'});
    	});
  </script>
  </body>
</html>