Fundstück der Woche: jVectorMap ...

| 16. August 2014

… 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):

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

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:

<!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>

Kategorien