New feature selectedBorderColor param, border color changes if selectedBord…

README.md

@@ -4,6 +4,10 @@ This project is a heavily modified version of [jVectorMap](https://github.com/bj
 
 **Tests:** [![Circle CI](https://circleci.com/gh/manifestinteractive/jqvmap/tree/master.svg?style=svg&circle-token=7bce3b80868ea5ca32009a195c4436db91e5ea67)](https://circleci.com/gh/manifestinteractive/jqvmap/tree/master)
 
+## IMPORTANT:  JQVMap has Transferred Ownership
+
+> Rest assured, **JQVMap will remain Open Source**. [@manifestinteractive](https://github.com/manifestinteractive) just felt it was time to hand over the reins to a team that can continue to give JQVMap the love and attention it deserves.  As of today, JQVMap will be managed by [@10bestdesign](https://github.com/10bestdesign).
+
 
 jQuery Vector Map
 ======
@@ -54,6 +58,7 @@ jQuery('#vmap').vectorMap(
     normalizeFunction: 'linear',
     scaleColors: ['#b6d6ff', '#005ace'],
     selectedColor: '#c9dfaf',
+    selectedBorderColor: '#ffffff',
     selectedRegions: null,
     showTooltip: true,
     onRegionClick: function(element, code, region)
@@ -133,6 +138,10 @@ This option defines colors, with which regions will be painted when you set opti
 
 Color for a region when you select it
 
+***selectedBorderColor** *'#ffffff'*
+
+Color a region border when you select it
+
 **selectedRegions** *['MO', 'FL', 'OR']*
 
 This is the Region that you are looking to have preselected (two letter ISO code, defaults to null ). See [REGIONS.md](REGIONS.md)

dist/jquery.vmap.js

@@ -88,7 +88,9 @@ var JQVMap = function (params) {
   this.defaultHeight = mapData.height;
 
   this.color = params.color;
+  this.borderColor = params.borderColor;
   this.selectedColor = params.selectedColor;
+  this.selectedBorderColor = params.selectedBorderColor;
   this.hoverColor = params.hoverColor;
   this.hoverColors = params.hoverColors;
   this.hoverOpacity = params.hoverOpacity;
@@ -144,6 +146,7 @@ var JQVMap = function (params) {
     });
 
     path.setFill(this.color);
+    path.setEdge(this.borderColor);
     path.id = map.getCountryId(key);
     map.countries[key] = path;
 
@@ -201,6 +204,8 @@ var JQVMap = function (params) {
       for (var keyPath in mapData.paths) {
         map.countries[keyPath].currentFillColor = map.countries[keyPath].getOriginalFill();
         map.countries[keyPath].setFill(map.countries[keyPath].getOriginalFill());
+        map.countries[keyPath].currentEdgeColor = map.countries[keyPath].getOriginalEdge();
+        map.countries[keyPath].setEdge(map.countries[keyPath].getOriginalEdge());
       }
     }
 
@@ -583,11 +588,15 @@ JQVMap.prototype.deselect = function (cc, path) {
     jQuery(this.container).trigger('regionDeselect.jqvmap', [cc]);
     path.currentFillColor = path.getOriginalFill();
     path.setFill(path.getOriginalFill());
+    path.currentEdgeColor = path.getOriginalEdge();
+    path.setEdge(path.getOriginalEdge());
   } else {
     for (var key in this.countries) {
       this.selectedRegions.splice(this.selectedRegions.indexOf(key), 1);
       this.countries[key].currentFillColor = this.color;
       this.countries[key].setFill(this.color);
+      this.countries[key].currentEdgeColor = this.borderColor;
+      this.countries[key].setEdge(this.borderColor);
     }
   }
 };
@@ -880,11 +889,13 @@ JQVMap.prototype.removePins = function(){
 JQVMap.prototype.reset = function () {
   for (var key in this.countries) {
     this.countries[key].setFill(this.color);
+    this.countries[key].setEdge(this.borderColor);
   }
   this.scale = this.baseScale;
   this.transX = this.baseTransX;
   this.transY = this.baseTransY;
   this.applyTransform();
+  this.zoomCurStep = 1;
 };
 
 JQVMap.prototype.resize = function () {
@@ -917,6 +928,10 @@ JQVMap.prototype.select = function (cc, path) {
       path.currentFillColor = this.selectedColor;
       path.setFill(this.selectedColor);
     }
+    if (this.selectedBorderColor && path) {
+      path.currentEdgeColor = this.selectedBorderColor;
+      path.setEdge(this.selectedBorderColor);
+    }
   }
 };
 
@@ -1100,6 +1115,21 @@ VectorCanvas.prototype.createPath = function (config) {
       node.setAttribute('stroke-opacity', this.params.borderOpacity);
     }
 
+    node.setEdge = function (borderColor) {
+      this.setAttribute('stroke', borderColor);
+      if (this.getAttribute('originalStroke') === null) {
+        this.setAttribute('originalStroke', borderColor);
+      }
+    };
+
+    node.getEdge = function () {
+      return this.getAttribute('stroke');
+    };
+
+    node.getOriginalEdge = function () {
+      return this.getAttribute('originalStroke');
+    };
+
     node.setFill = function (color) {
       this.setAttribute('fill', color);
       if (this.getAttribute('original') === null) {
@@ -1135,6 +1165,19 @@ VectorCanvas.prototype.createPath = function (config) {
 
     node.appendChild(scale);
 
+    node.setEdge = function (borderColor) {
+      this.getElementsByTagName('stroke')[0].borderColor = borderColor;
+      if (this.getAttribute('originalStroke') === null) {
+        this.setAttribute('originalStroke', borderColor);
+      }
+    };
+    node.getEdge = function () {
+      return this.getElementsByTagName('stroke')[0].borderColor;
+    };
+    node.getOriginalEdge = function () {
+      return this.getAttribute('originalStroke');
+    };
+
     var fill = this.createVmlNode('fill');
     node.appendChild(fill);
 

examples/croatia.html

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>JQVMap - Croatia Map</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+
+    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
+    <script type="text/javascript" src="../dist/maps/jquery.vmap.croatia.js" charset="utf-8"></script>
+
+    <script>
+      jQuery(document).ready(function () {
+        jQuery('#vmap').vectorMap({
+          map: 'croatia',
+          backgroundColor: '#333333',
+          color: '#ffffff',
+          hoverOpacity: 0.7,
+          selectedColor: '#999999',
+          enableZoom: true,
+          showTooltip: true,
+          scaleColors: ['#C8EEFF', '#006491'],
+          normalizeFunction: 'polynomial'
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vmap" style="width: 600px; height: 400px;"></div>
+  </body>
+</html>

examples/indonesia.html

@@ -0,0 +1,28 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>JQVMap - Indonesia Map</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
+  </head>
+  <body>
+    <div id="vmap" style="width: 900px; height: 400px;"></div>
+  </body>
+  <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
+    <script type="text/javascript" src="../dist/maps/jquery.vmap.indonesia.js" charset="utf-8"></script>
+    <script>
+      jQuery(document).ready(function () {
+        jQuery('#vmap').vectorMap({
+          map: 'indonesia_id',
+          enableZoom: true,
+          showTooltip: true,
+          selectedColor: null,
+          onRegionClick: function(event, code, region){
+            event.preventDefault();
+          }
+        });
+      });
+    </script>
+</html>

examples/usa_counties.html

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>JQVMap - USA Map</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+
+    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
+    <script type="text/javascript" src="../dist/maps/jquery.vmap.usa.counties.js" charset="utf-8"></script>
+
+    <script>
+      jQuery(document).ready(function () {
+        jQuery('#vmap').vectorMap({
+          map: 'usa_counties_en',
+          enableZoom: true,
+          showTooltip: true,
+          hoverColor: '#C9DFAF',
+          onRegionClick: function(event, code, region){
+            event.preventDefault();
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vmap" style="width: 900px; height: 600px;"></div>
+  </body>
+</html>

examples/usa_counties_election.html

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>JQVMap - 2016 Election Results County Map</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+
+    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
+    <script type="text/javascript" src="../dist/maps/jquery.vmap.usa.counties.js" charset="utf-8"></script>
+    <script type="text/javascript" src="./js/jquery.vmap.electioncolors.js"></script>
+
+    <script>
+      jQuery(document).ready(function () {
+        jQuery('#vmap').vectorMap({
+          map: 'usa_counties_en',
+          enableZoom: true,
+          showTooltip: true,
+          colors: electionColors,
+          backgroundColor: '#eee',
+          borderColor: '#fff',
+          hoverColor: '#0ff',
+          onRegionClick: function(event, code, region){
+            event.preventDefault();
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vmap" style="width: 900px; height: 600px;"></div>
+  </body>
+</html>

examples/usa_districts.html

@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+  <head>
+    <title>JQVMap - USA Map</title>
+    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+
+    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
+
+    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
+    <script type="text/javascript" src="../dist/jquery.vmap.js"></script>
+    <script type="text/javascript" src="../dist/maps/jquery.vmap.usa.districts.js" charset="utf-8"></script>
+
+    <script>
+      jQuery(document).ready(function () {
+        jQuery('#vmap').vectorMap({
+          map: 'usa_districts_en',
+          borderColor: '#000',
+          enableZoom: true,
+          showTooltip: true,
+          selectedColor: null,
+          hoverColor: '#639',
+          onRegionClick: function(event, code, region){
+            event.preventDefault();
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vmap" style="width: 600px; height: 400px;"></div>
+  </body>
+</html>

src/JQVMap.js

@@ -17,7 +17,9 @@ var JQVMap = function (params) {
   this.defaultHeight = mapData.height;
 
   this.color = params.color;
+  this.borderColor = params.borderColor;
   this.selectedColor = params.selectedColor;
+  this.selectedBorderColor = params.selectedBorderColor;
   this.hoverColor = params.hoverColor;
   this.hoverColors = params.hoverColors;
   this.hoverOpacity = params.hoverOpacity;
@@ -53,8 +55,6 @@ var JQVMap = function (params) {
   this.canvas = new VectorCanvas(this.width, this.height, params);
   params.container.append(this.canvas.canvas);
 
-  this.makeDraggable();
-
   this.rootGroup = this.canvas.createGroup(true);
 
   this.index = JQVMap.mapIndex;
@@ -63,6 +63,8 @@ var JQVMap = function (params) {
   if (params.enableZoom) {
     jQuery('<div/>').addClass('jqvmap-zoomin').text('+').appendTo(params.container);
     jQuery('<div/>').addClass('jqvmap-zoomout').html('&#x2212;').appendTo(params.container);
+
+    this.makeDraggable();
   }
 
   map.countries = [];
@@ -73,6 +75,7 @@ var JQVMap = function (params) {
     });
 
     path.setFill(this.color);
+    path.setEdge(this.borderColor);
     path.id = map.getCountryId(key);
     map.countries[key] = path;
 
@@ -130,6 +133,8 @@ var JQVMap = function (params) {
       for (var keyPath in mapData.paths) {
         map.countries[keyPath].currentFillColor = map.countries[keyPath].getOriginalFill();
         map.countries[keyPath].setFill(map.countries[keyPath].getOriginalFill());
+        map.countries[keyPath].currentEdgeColor = map.countries[keyPath].getOriginalEdge();
+        map.countries[keyPath].setEdge(map.countries[keyPath].getOriginalEdge());
       }
     }
 

src/JQVMap/deselect.js

@@ -8,11 +8,15 @@ JQVMap.prototype.deselect = function (cc, path) {
     jQuery(this.container).trigger('regionDeselect.jqvmap', [cc]);
     path.currentFillColor = path.getOriginalFill();
     path.setFill(path.getOriginalFill());
+    path.currentEdgeColor = path.getOriginalEdge();
+    path.setEdge(path.getOriginalEdge());
   } else {
     for (var key in this.countries) {
       this.selectedRegions.splice(this.selectedRegions.indexOf(key), 1);
       this.countries[key].currentFillColor = this.color;
       this.countries[key].setFill(this.color);
+      this.countries[key].currentEdgeColor = this.borderColor;
+      this.countries[key].setEdge(this.borderColor);
     }
   }
 };

src/JQVMap/reset.js

@@ -1,6 +1,7 @@
 JQVMap.prototype.reset = function () {
   for (var key in this.countries) {
     this.countries[key].setFill(this.color);
+    this.countries[key].setEdge(this.borderColor);
   }
   this.scale = this.baseScale;
   this.transX = this.baseTransX;

src/JQVMap/select.js

@@ -14,5 +14,9 @@ JQVMap.prototype.select = function (cc, path) {
       path.currentFillColor = this.selectedColor;
       path.setFill(this.selectedColor);
     }
+    if (this.selectedBorderColor && path) {
+      path.currentEdgeColor = this.selectedBorderColor;
+      path.setEdge(this.selectedBorderColor);
+    }
   }
 };