Wednesday, September 4, 2013

How to Build a Simple jVectorMap Display

jVectorMap Series 
How to Build a Simple jVectorMap Display
How to integrate data with jVectorMap
How to customize jVectorMap region popups
How to add user interactivity to jVectorMap
How to add a popup modal to jVectorMap using Bootstrap
How to integrate jVectorMap with SharePoint 2010
How to integrate SharePoint 2010 list data with jVectorMap
How to use REST to integrate SharePoint 2010 list data with jVectorMap
How to use SOAP to integrate SharePoint 2010 list data with jVectorMap

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>
<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 -->
//Bind the function to be executed when the
//DOM is ready
  //Search through the DOM to find the element
  //with CSS class name "map1" and select it;
  //then execute the vectorMap method for this
    //set the map property to the specific map
    //to be displayed
    map: 'world_mill_en',
<!-- jVectorMap Container -->
<div class="map1" style="width: 800px; height: 550px"></div>
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.

  • 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.


No comments: