Saturday, September 7, 2013

How to add a popup modal to jVectorMap using Bootstrap

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
Introduction

In the previous post in this series, we explored adding some basic user interactivity to the jVectorMap display. In this post, we'll explore adding a popup modal dialog in which you can provide: an introduction to the map, help tips and other useful information to your users. We'll explore using the JavaScript-based Bootstrap modal dialog method to accomplish this, over the following five steps:
  1. Add New JavaScript Library References
  2. Modify Map Zoom Button CSS
  3. Add Custom Help Button CSS
  4. Add Help Button Image Container
  5. Add Popup Modal Dialog Container
Before we get started, let's first review the markup and script developed thus far through this series - this is what we'll be adding to in this posting:
<!DOCTYPE html>
<html>
 <head> 
<title>jVectorMap demo</title>
<!-- jQuery Library -->
  <script src="js/jquery.min.js"></script>
<!-- jvectormap -->
<link href="css/jquery-jvectormap.css" rel="stylesheet" media="all" />
<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>
<script src="assets/jquery-jvectormap-world-mill-en.js"></script>
  <!-- Script -->
<script>
  $.getJSON('data/cdata2.json', function(cdata){ 
function chkValue(val){ 
if (typeof val ==="undefined"){ 
 x = 0;
 }
 else{ 
 x = val; 
 }
 return x; 
 };
 $('#focus-single').click(function(){ 
 $('.map1').vectorMap('set', 'focus', 'SE'); 
 });
 //Reset focus 
 $('#focus-init').click(function(){ 
 $('.map1').vectorMap('set', 'focus', 1, 0, 0); 
 });
 //Clears all region colors 
 $('#clear-map').click(function(){ 
var map = $('.map1').vectorMap('get', 'mapObject'); 
map.series.regions[0].clear(); 
 });
 $('.map1').vectorMap({  
 map: 'world_mill_en',
//Set the initial focus to the center of the map 
//at the maximum zoom out
focusOn: { 
 x: 0.5, 
 y: 0.5, 
 scale: 1 
 }, 
 series: {
 //this is the object for passing country/region data into 
 regions: [{
 //define the range of color values 
 scale: ['#DEEBF7', '#08519C'], 
//define the function that maps data to color range 
normalizeFunction: 'linear', 
//define the coloration method 
 attribute: 'fill', 
//define the array of country data 
 values: cdata 
 }] 
 },
 onRegionLabelShow: function(event, label, code){ 
 label.html(label.html() +' (' + code.toString() + ') <br>Count: ' + chkValue(cdata[code])); 
 }, 
 });
 setInterval(function(){ 
 $.getJSON('data/cdata2.json', function(cdata){ 
var map = $('.map1').vectorMap('get', 'mapObject'); 
map.series.regions[0].setValues(cdata); 
 }) 
 }, 10000);   
 })
 </script> 
</head> 
<body>
<!-- jVectorMap display container --> 
<div class="map1" style="width: 800px; height: 550px"></div> 
<!-- Set focus on Sweden button --> 
<button id="focus-single">Focus on Sweden</button> 
<!-- Reset map button --> 
<button id="focus-init">Reset Map</button> 
<!-- Clear map button --> 
<button id="clear-map">Clear Map</button> 
</body> 
</html>
And here's what the file/folder structure built looks like so far:
We'll need to get the following files:
  • bootstrap.min.js - Minified Bootstrap core JavaScript library
  • modals.js - Bootstrap modal dialog library
  • bootstrap.css - Bootstrap CSS
Additionally, you'll need to get a suitable icon for building the help dialog link and to create an empty CSS file, in which you'll build the custom help CSS.  The Bootstrap files can be downloaded from the Bootstrap site, noted below in the References section.

After getting these files, adding an image, and creating a blank CSS file, we'll have the following folder contents:
The help.css is our blank CSS file for containing our custom help CSS. 

Add New JavaScript Library References

First, we'll add the new JavaScript library and CSS references to the current project file.  These new references need to be added after the jQuery library reference, which should always come first.
<!-- help -->
<link href="css/help.css" rel="stylesheet" type="text/css" media="all" >
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all" >
<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/modals.js"></script>
Modify Zoom Button CSS

Now, the image that we want to display is 48 pixels square.  We want to place it in the top left corner of the map.  To do this, we'll need to move the existing zoom help buttons to the right.  The help button CSS is located in jquery-jvectormap.css, which came with the original jVectorMap files.  Open this file and then look for the jvectormap-zoomin and jvectormap-zoomout selectors and change their left property declarations from 5px to 55px.  This should give enough space to allow the these  items to continue to appear. 

Add Custom CSS for New Help Button

Now we'll open the empty CSS file for our custom CSS and add some declarations to it that control the position and appearance of the new help button:
Add New Help Button Image Container
Then add a container for the image and its hyperlink to the body section of the HTML page, so that now the markup here looks like this (markup added is highlighted):
<body>
<!-- jVectorMap display container -->
<div class="map1" style="width: 800px; height: 550px"></div>
<!-- Set focus on Sweden button -->
<button id="focus-single">Focus on Sweden</button>
<!-- Reset map button -->
<button id="focus-init">Reset Map</button>
<!-- Clear map button -->
<button id="clear-map">Clear Map</button>
<!-- help button -->
<div id="helpbtn"><a href="#modalwin" data-toggle="modal"><img src="img/help.png" alt="Help" /></a></div>
</body>
Once this is completed, refreshing the HTML page will return this:
Add Popup Modal Dialog Container

For the final step, we need to add the container and markup for the popup modal dialog.
<!-- modal window -->
<div id="modalwin" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<header class="modal-header">
<a href="#" class="close" data-dismiss="modal">x</a>
<h3>World Map Interface Help</h3>
</header>
<div class="modal-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eget augue porta, bibendum nisi in, sagittis urna. Cras placerat orci ac lectus consequat, sed porta tortor sollicitudin. Aenean lorem nibh, porta id neque sit amet, fermentum dapibus turpis. Aliquam in sagittis arcu. Sed sit amet viverra enim. Sed ac elit feugiat, ultricies tortor sit amet, tincidunt lorem. Suspendisse condimentum mi eget massa euismod porttitor. In dictum arcu ac pellentesque imperdiet. </p>
<p>In hac habitasse platea dictumst. Nullam metus neque, facilisis nec felis at, vehicula posuere ligula. Donec interdum consectetur mi eget facilisis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer eget magna sed enim aliquet molestie a vel ligula. Quisque tellus odio, euismod in cursus id, semper at ipsum. Quisque non eros iaculis, consequat odio in, iaculis odio. Donec accumsan consequat risus, ut dictum lorem volutpat ut. </p>
<p>Close me by clicking anywhere outside the window, or by clicking the blue button.</p>
</div>
<footer class="modal-footer">
<a href="#" class="btn" id="okwin01">Close</a>
</footer>
</div> 
<!-- @end @modalwin -->

After refreshing the HTML page, and clicking the new help button, we'll see this:
To customize the modal popup, refer to the Bootstrap documentation.

Summary

In this posting in the jVectorMap series, we explored adding a modal help dialog to the map display using the Bootstrap method.  This method is simple and easy to implement and requires no additional script development.  Just drop the library references in, add the markup and you are on your way.  In the next posting of this series, we'll explore how to migrate the jVectorMap project developed to date onto a SharePoint Server 2010 platform.

References
Notes
  • The Bootstrap approach is simple and easy to implement.  However, the CSS used with this approach conflicts in part with the SharePoint 2010 Core4.CSS, disrupting the appearance of the SharePoint 2010 ribbon and other UI features.  A new Bootstrap version specifically for SharePoint 2010 is available, however, the author has not yet tested this new version.  Instead, in a subsequent article, we'll explore using the SP.UI.ModalDialog.showModalDialog method to show popup help dialogs for SharePoint 2010 deployments of jVectorMap. 
Posted by at
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)