jVectorMap is a JavaScript-based vector mapping library built upon the jQuery library. It supports the development of interactive maps that run on the client. As it is JavaScript-based, it is fully compatible with all browsers supporting JavaScript. This series of postings explores how to work with jVectorMap. In this first posting, we will explore how to build a simple jVectorMap display using jVectorMap version 1.2.2 and jQuery version 1.9.1.
Base Page
The following is the markup and script needed to display a basic jVectorMap. The jQuery and jVectorMap library download URLs are provided in the References section. Create these using the file/folder structure noted below. Then, in the root folder for this project, create a new HTML page and past the following markup into it:
<!DOCTYPE html>
<html>
<head>
<title>jVectorMap demo</title>
<!-- jQuery library -->
<!-- This library declaration must come before all others -->
<!-- since the jVectorMap libraries rely upon it -->
<script src="js/jquery.min.js"></script>
<!-- jvectormap library -->
<script src="js/jquery-jvectormap.js"></script>
<script src="js/jquery-mousewheel.js"></script>
<script src="lib/jvectormap.js"></script>
<script src="lib/abstract-element.js"></script>
<script src="lib/abstract-canvas-element.js"></script>
<script src="lib/abstract-shape-element.js"></script>
<script src="lib/svg-element.js"></script>
<script src="lib/svg-group-element.js"></script>
<script src="lib/svg-canvas-element.js"></script>
<script src="lib/svg-shape-element.js"></script>
<script src="lib/svg-path-element.js"></script>
<script src="lib/svg-circle-element.js"></script>
<script src="lib/vml-element.js"></script>
<script src="lib/vml-group-element.js"></script>
<script src="lib/vml-canvas-element.js"></script>
<script src="lib/vml-shape-element.js"></script>
<script src="lib/vml-path-element.js"></script>
<script src="lib/vml-circle-element.js"></script>
<script src="lib/vector-canvas.js"></script>
<script src="lib/simple-scale.js"></script>
<script src="lib/numeric-scale.js"></script>
<script src="lib/ordinal-scale.js"></script>
<script src="lib/color-scale.js"></script>
<script src="lib/data-series.js"></script>
<script src="lib/proj.js"></script>
<script src="lib/world-map.js"></script>
<!-- vector map library -->
<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
<!-- CSS -->
<link href="css/jquery-jvectormap.css" rel="stylesheet" media="all" />
<!-- Script -->
<script>
//Bind the function to be executed when the
//DOM is ready
$(function(){
//Search through the DOM to find the element
//with CSS class name "map1" and select it;
//then execute the vectorMap method for this
//object
$('.map1').vectorMap({
//set the map property to the specific map
//to be displayed
map: 'world_mill_en',
});
})
</script>
</head>
<body>
<!-- jVectorMap Container -->
<div class="map1" style="width: 800px; height: 550px"></div>
</body>
</html>
Save the page and then refresh. You should see something like the image below. Note: you needn't develop this on a web server.
In this article, you have been shown how to build a simple jVectorMap display. In the next article on jVectorMap, you will learn how to integrate country data into the display.
Notes
- The map file used in this article, jquery-jvectormap-world-mill-en, defines a JavaScript array. Individual countries are identified by a country digraph (two-letter code). The array is little more than a simple string/value paring.
References
No comments:
Post a Comment