1. Updated LICENSE path in packaged dist files

2. Fixed bugs in labels and pins where mouse events were not passing through to clickable region
3. Removed -merc suffix from map files created by map creator ( fixes #204 )
4. Added new example for custom placement of pins `./examples/pins_custom.html`
5. Fixed `onRegionSelect` issue not returning region ( fixes #201 )
6. Added better support to make regions disabled ( see #197 and new `./examples/inactive_regions.html` )

CHANGELOG.md

@@ -3,6 +3,23 @@
 Change Log
 ======
 
+Version 1.5.0
+---
+
+`Released on March 15th, 2016`
+
+1. Updated LICENSE path in packaged dist files
+
+2. Fixed bugs in labels and pins where mouse events were not passing through to clickable region
+
+3. Removed -merc suffix from map files created by map creator ( fixes #204 )
+
+4. Added new example for custom placement of pins `./examples/pins_custom.html`
+
+5. Fixed `onRegionSelect` issue not returning region ( fixes #201 )
+
+6. Added better support to make regions disabled ( see #197 and new `./examples/inactive_regions.html` )
+
 Version 1.4.0
 ---
 

LICENSE

@@ -2,7 +2,7 @@ All code in this Github Repository are available under both the MIT and GPL lice
 
 MIT License
 
-Copyright (c) 2013 Manifest Interactive
+Copyright (c) 2016 Manifest Interactive
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation
@@ -27,7 +27,7 @@ OTHER DEALINGS IN THE SOFTWARE.
 
 GPL License
 
-Copyright (c) 2013 Manifest Interactive
+Copyright (c) 2016 Manifest Interactive
 
 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU General Public License as published by

README.md

@@ -316,12 +316,19 @@ jQuery('#vmap').vectorMap(
     {
         if (code == 'ca')
         {
+            // Hide the label
             event.preventDefault();
         }
         else if (code == 'ru')
         {
+            // Plain TEXT labels
             label.text('Bears, vodka, balalaika');
         }
+        else if (code == 'us')
+        {
+            // HTML Based Labels. You can use any HTML you want, this is just an example
+            label.html('<div class="map-tooltip"><h1 class="header">Header</h1><p class="description">Some Description</p></div>');
+        }
     },
     onRegionOver: function(event, code)
     {

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jqvmap",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "homepage": "http://jqvmap.com",
   "authors": [
     "JQVMap"

create/jqvmap.py

@@ -27,7 +27,7 @@ def addPath(self, path, code, name):
   def getJSCode(self):
     map = {"paths": self.paths, "width": self.width, "height": self.height, "insets": self.insets, "projection": self.projection}
     header = "/** JQVMap " + self.projection['type'] + " map for " + self.name + "  */"
-    js = "jQuery.fn.vectorMap('addMap', '" + self.name + "-" + self.projection['type'] + "'," + json.dumps(map) + ");"
+    js = "jQuery.fn.vectorMap('addMap', '" + self.name + "'," + json.dumps(map) + ");"
     return  header + "\n" + js
 
 

dist/jquery.vmap.js

@@ -1,10 +1,10 @@
 /*!
  * JQVMap: jQuery Vector Map Library
- * @author JQVMap
- * @version 1.4.0
+ * @author JQVMap <[email protected]>
+ * @version 1.5.0
  * @link http://jqvmap.com
- * @license https://raw.githubusercontent.com/manifestinteractive/jqvmap/master/LICENSE
- * @builddate 2015/12/06
+ * @license https://github.com/manifestinteractive/jqvmap/blob/master/LICENSE
+ * @builddate 2016/03/15
  */
 
 var VectorCanvas = function (width, height, params) {
@@ -90,6 +90,7 @@ var JQVMap = function (params) {
   this.color = params.color;
   this.selectedColor = params.selectedColor;
   this.hoverColor = params.hoverColor;
+  this.hoverColors = params.hoverColors;
   this.hoverOpacity = params.hoverOpacity;
   this.setBackgroundColor(params.backgroundColor);
 
@@ -113,7 +114,7 @@ var JQVMap = function (params) {
       jQuery(params.container).trigger(resizeEvent, [newWidth, newHeight]);
 
       if(mapPins){
-        jQuery('.jqvmap_pin').remove();
+        jQuery('.jqvmap-pin').remove();
         map.pinHandlers = false;
         map.placePins(mapPins.pins, mapPins.mode);
       }
@@ -147,9 +148,9 @@ var JQVMap = function (params) {
     map.countries[key] = path;
 
     if (this.canvas.mode === 'svg') {
-      path.setAttribute('class', 'jvectormap-region');
+      path.setAttribute('class', 'jqvmap-region');
     } else {
-      jQuery(path).addClass('jvectormap-region');
+      jQuery(path).addClass('jqvmap-region');
     }
 
     jQuery(this.rootGroup).append(path);
@@ -187,12 +188,6 @@ var JQVMap = function (params) {
   });
 
   jQuery(params.container).delegate(this.canvas.mode === 'svg' ? 'path' : 'shape', 'click', function (regionClickEvent) {
-    if (!params.multiSelectRegion) {
-      for (var keyPath in mapData.paths) {
-        map.countries[keyPath].currentFillColor = map.countries[keyPath].getOriginalFill();
-        map.countries[keyPath].setFill(map.countries[keyPath].getOriginalFill());
-      }
-    }
 
     var targetPath = regionClickEvent.target;
     var code = regionClickEvent.target.id.split('_').pop();
@@ -201,6 +196,14 @@ var JQVMap = function (params) {
     code = code.toLowerCase();
 
     jQuery(params.container).trigger(mapClickEvent, [code, mapData.paths[code].name]);
+
+    if ( !params.multiSelectRegion && !mapClickEvent.isDefaultPrevented()) {
+      for (var keyPath in mapData.paths) {
+        map.countries[keyPath].currentFillColor = map.countries[keyPath].getOriginalFill();
+        map.countries[keyPath].setFill(map.countries[keyPath].getOriginalFill());
+      }
+    }
+
     if ( !mapClickEvent.isDefaultPrevented()) {
       if (map.isSelected(code)) {
         map.deselect(code, targetPath);
@@ -345,6 +348,7 @@ JQVMap.maps = {};
       backgroundColor: '#a5bfdd',
       color: '#f4f3f0',
       hoverColor: '#c9dfaf',
+      hoverColors: {},
       selectedColor: '#c9dfaf',
       scaleColors: ['#b6d6ff', '#005ace'],
       normalizeFunction: 'linear',
@@ -602,7 +606,7 @@ JQVMap.prototype.getPinId = function (cc) {
 };
 
 JQVMap.prototype.getPins = function(){
-  var pins = this.container.find('.jqvmap_pin');
+  var pins = this.container.find('.jqvmap-pin');
   var ret = {};
   jQuery.each(pins, function(index, pinObj){
     pinObj = jQuery(pinObj);
@@ -617,6 +621,9 @@ JQVMap.prototype.highlight = function (cc, path) {
   path = path || jQuery('#' + this.getCountryId(cc))[0];
   if (this.hoverOpacity) {
     path.setOpacity(this.hoverOpacity);
+  } else if (this.hoverColors && (cc in this.hoverColors)) {
+    path.currentFillColor = path.getFill() + '';
+    path.setFill(this.hoverColors[cc]);
   } else if (this.hoverColor) {
     path.currentFillColor = path.getFill() + '';
     path.setFill(this.hoverColor);
@@ -805,7 +812,7 @@ JQVMap.prototype.placePins = function(pins, pinMode){
       if($pin.length > 0){
         $pin.remove();
       }
-      map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap_pin" style="position:absolute">' + pin + '</div>');
+      map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap-pin" style="position:absolute">' + pin + '</div>');
     });
   } else { //treat pin as id of an html content
     jQuery.each(pins, function(index, pin){
@@ -817,7 +824,7 @@ JQVMap.prototype.placePins = function(pins, pinMode){
       if($pin.length > 0){
         $pin.remove();
       }
-      map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap_pin" style="position:absolute"></div>');
+      map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap-pin" style="position:absolute"></div>');
       $pin.append(jQuery('#' + pin));
     });
   }
@@ -836,7 +843,7 @@ JQVMap.prototype.placePins = function(pins, pinMode){
 
 JQVMap.prototype.positionPins = function(){
   var map = this;
-  var pins = this.container.find('.jqvmap_pin');
+  var pins = this.container.find('.jqvmap-pin');
   jQuery.each(pins, function(index, pinObj){
     pinObj = jQuery(pinObj);
     var countryId = map.getCountryId(pinObj.attr('for').toLowerCase());
@@ -860,7 +867,7 @@ JQVMap.prototype.removePin = function(cc) {
 };
 
 JQVMap.prototype.removePins = function(){
-  this.container.find('.jqvmap_pin').remove();
+  this.container.find('.jqvmap-pin').remove();
 };
 
 JQVMap.prototype.reset = function () {

dist/jqvmap.css

@@ -10,6 +10,10 @@
 	font-family: sans-serif, Verdana;
 	font-size: smaller;
 	padding: 3px;
+  pointer-events:none;
+}
+.jqvmap-pin {
+  pointer-events:none;
 }
 .jqvmap-zoomin, .jqvmap-zoomout
 {

examples/inactive_regions.html

@@ -0,0 +1,62 @@
+<?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.js" charset="utf-8"></script>
+
+    <script>
+      var map;
+
+      jQuery(document).ready(function () {
+
+        // Store currentRegion
+        var currentRegion = 'fl';
+
+        // List of Regions we'll let clicks through for
+        var enabledRegions = ['mo', 'fl', 'or'];
+
+        map = jQuery('#vmap').vectorMap({
+          map: 'usa_en',
+          enableZoom: true,
+          showTooltip: true,
+          selectedColor: '#333333',
+          selectedRegions: ['fl'],
+          hoverColor: null,
+          colors: {
+            mo: '#C9DFAF',
+            fl: '#C9DFAF',
+            or: '#C9DFAF'
+          },
+          onRegionClick: function(event, code, region){
+            // Check if this is an Enabled Region, and not the current selected on
+            if(enabledRegions.indexOf(code) === -1 || currentRegion === code){
+              // Not an Enabled Region
+              event.preventDefault();
+            } else {
+              // Enabled Region. Update Newly Selected Region.
+              currentRegion = code;
+            }
+          },
+          onRegionSelect: function(event, code, region){
+            console.log(map.selectedRegions);
+          },
+          onLabelShow: function(event, label, code){
+            if(enabledRegions.indexOf(code) === -1){
+              event.preventDefault();
+            }
+          }
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vmap" style="width: 600px; height: 400px;"></div>
+  </body>
+</html>

examples/labels.html

@@ -27,9 +27,10 @@
       }
 
       /* Setup basic CSS for Label */
-      .jqvmap_pin {
+      .jqvmap-pin {
         font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
         cursor: default;
+        pointer-events: none;
       }
 
       /* Hide Whichever Labels you want */
@@ -95,31 +96,31 @@
       /* Add responsibe support to resize labels for difference screen sizes */
 
       @media only screen and (min-width: 320px) {
-        .jqvmap_pin {
+        .jqvmap-pin {
           font-size: 6px;
         }
       }
 
       @media only screen and (min-width: 480px) {
-        .jqvmap_pin {
+        .jqvmap-pin {
           font-size: 8px;
         }
       }
 
       @media only screen and (min-width: 640px) {
-        .jqvmap_pin {
+        .jqvmap-pin {
           font-size: 10px;
         }
       }
 
       @media only screen and (min-width: 800px) {
-        .jqvmap_pin {
+        .jqvmap-pin {
           font-size: 12px;
         }
       }
 
       @media only screen and (min-width: 1024px) {
-        .jqvmap_pin {
+        .jqvmap-pin {
           font-size: 14px;
         }
       }

examples/pins.html

@@ -34,6 +34,7 @@
         height: 5px;
         position: absolute;
         cursor: pointer;
+        pointer-events: none;
       }
 
       .pin .pin_content {