Merge pull request #185 from manifestinteractive/issue-84

Adds a `showLabels` config option to show labels by default
10bestdesign · Dec 7, 2015 · e53d79d · e53d79d
2 parents ed50b0a + a0d8dcb
commit e53d79d
Show file tree

Hide file tree

Showing 6 changed files with 237 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -137,9 +137,13 @@ This is the Region that you are looking to have preselected (two letter ISO code
 
 Whether to enable more than one region to be selected at a time.
 
+**showLabels** *boolean*
+
+Whether to show ISO Code Labels ( true or false, defaults to false )
+
 **showTooltip** *boolean*
 
-Whether to show Tooltips on Mouseover ( true or false, defaults to true)
+Whether to show Tooltips on Mouseover ( true or false, defaults to true )
 
 **onLoad** *function(event, map)*
 

diff --git a/dist/jquery.vmap.js b/dist/jquery.vmap.js
@@ -73,6 +73,7 @@ var JQVMap = function (params) {
   params = params || {};
   var map = this;
   var mapData = JQVMap.maps[params.map];
+  var mapPins;
 
   if( !mapData){
     throw new Error('Invalid "' + params.map + '" map parameter. Please make sure you have loaded this map file in your HTML.');
@@ -98,7 +99,6 @@ var JQVMap = function (params) {
   this.resize();
 
   jQuery(window).resize(function () {
-
     var newWidth = params.container.width();
     var newHeight = params.container.height();
 
@@ -111,6 +111,12 @@ var JQVMap = function (params) {
 
       var resizeEvent = jQuery.Event('resize.jqvmap');
       jQuery(params.container).trigger(resizeEvent, [newWidth, newHeight]);
+
+      if(mapPins){
+        jQuery('.jqvmap_pin').remove();
+        map.pinHandlers = false;
+        map.placePins(mapPins.pins, mapPins.mode);
+      }
     }
   });
 
@@ -251,10 +257,35 @@ var JQVMap = function (params) {
   this.bindZoomButtons();
 
   if(params.pins) {
+    mapPins = {
+      pins: params.pins,
+      mode: params.pinMode
+    };
+
     this.pinHandlers = false;
     this.placePins(params.pins, params.pinMode);
   }
 
+  if(params.showLabels){
+    this.pinHandlers = false;
+
+    var pins = {};
+    for (key in map.countries){
+      if (typeof map.countries[key] !== 'function') {
+        if( !params.pins || !params.pins[key] ){
+          pins[key] = key.toUpperCase();
+        }
+      }
+    }
+
+    mapPins = {
+      pins: pins,
+      mode: 'content'
+    };
+
+    this.placePins(pins, 'content');
+  }
+
   JQVMap.mapIndex++;
 };
 

diff --git a/dist/jquery.vmap.min.js b/dist/jquery.vmap.min.js
diff --git a/examples/labels.html b/examples/labels.html
@@ -0,0 +1,145 @@
+<?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">
+
+    <!-- Mobile Specific Meta Tags -->
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+
+    <link href="../dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css"/>
+
+    <style>
+      html, body {
+        padding: 0;
+        margin: 0;
+        width: 100%;
+        height: 100%;
+      }
+      #vmap {
+        width: 100%;
+        height: 100%;
+        background-color: red;
+        -webkit-tap-highlight-color: rgba(0,0,0,0);
+      }
+
+      /* Setup basic CSS for Label */
+      .jqvmap_pin {
+        font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial, sans-serif;
+        cursor: default;
+      }
+
+      /* Hide Whichever Labels you want */
+
+      #jqvmap1_ri_pin, #jqvmap1_dc_pin, #jqvmap1_de_pin, #jqvmap1_md_pin {
+        display: none;
+      }
+
+      /* Reposition Labels that are not quite right ( labels are centered in shape, and sometimes need tweaking ) */
+
+      #jqvmap1_ak_pin {
+        margin-top: -2%;
+      }
+      #jqvmap1_ca_pin {
+        margin-left: -2%;
+      }
+      #jqvmap1_ct_pin {
+        margin-top: -0.25%;
+        margin-left: -0.25%;
+      }
+      #jqvmap1_fl_pin {
+        margin-left: 5%;
+      }
+      #jqvmap1_id_pin {
+        margin-top: 3%;
+        margin-left: -1%;
+      }
+      #jqvmap1_ky_pin {
+        margin-left: 2%;
+      }
+      #jqvmap1_la_pin {
+        margin-left: -2%;
+      }
+      #jqvmap1_mi_pin {
+        margin-top: 4%;
+        margin-left: 3%;
+      }
+      #jqvmap1_ma_pin {
+        margin-top: -0.25%;
+      }
+      #jqvmap1_mn_pin {
+        margin-top: 2%;
+        margin-left: -2%;
+      }
+      #jqvmap1_nh_pin {
+        margin-top: 1%;
+        margin-left: -0.25%;
+      }
+      #jqvmap1_nj_pin {
+        margin-top: 1%;
+      }
+      #jqvmap1_ok_pin {
+        margin-left: 2%;
+      }
+      #jqvmap1_va_pin {
+        margin-left: 2%;
+      }
+      #jqvmap1_wv_pin {
+        margin-left: -1%;
+        margin-top: 1%;
+      }
+
+      /* Add responsibe support to resize labels for difference screen sizes */
+
+      @media only screen and (min-width: 320px) {
+        .jqvmap_pin {
+          font-size: 6px;
+        }
+      }
+
+      @media only screen and (min-width: 480px) {
+        .jqvmap_pin {
+          font-size: 8px;
+        }
+      }
+
+      @media only screen and (min-width: 640px) {
+        .jqvmap_pin {
+          font-size: 10px;
+        }
+      }
+
+      @media only screen and (min-width: 800px) {
+        .jqvmap_pin {
+          font-size: 12px;
+        }
+      }
+
+      @media only screen and (min-width: 1024px) {
+        .jqvmap_pin {
+          font-size: 14px;
+        }
+      }
+    </style>
+
+    <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>
+      jQuery(document).ready(function () {
+        jQuery('#vmap').vectorMap({
+          map: 'usa_en',
+          borderWidth: 0.25,
+          showLabels: true
+        });
+      });
+    </script>
+  </head>
+  <body>
+    <div id="vmap"></div>
+  </body>
+</html>
diff --git a/src/JQVMap.js b/src/JQVMap.js
@@ -2,6 +2,7 @@ var JQVMap = function (params) {
   params = params || {};
   var map = this;
   var mapData = JQVMap.maps[params.map];
+  var mapPins;
 
   if( !mapData){
     throw new Error('Invalid "' + params.map + '" map parameter. Please make sure you have loaded this map file in your HTML.');
@@ -27,7 +28,6 @@ var JQVMap = function (params) {
   this.resize();
 
   jQuery(window).resize(function () {
-
     var newWidth = params.container.width();
     var newHeight = params.container.height();
 
@@ -40,6 +40,12 @@ var JQVMap = function (params) {
 
       var resizeEvent = jQuery.Event('resize.jqvmap');
       jQuery(params.container).trigger(resizeEvent, [newWidth, newHeight]);
+
+      if(mapPins){
+        jQuery('.jqvmap_pin').remove();
+        map.pinHandlers = false;
+        map.placePins(mapPins.pins, mapPins.mode);
+      }
     }
   });
 
@@ -180,10 +186,35 @@ var JQVMap = function (params) {
   this.bindZoomButtons();
 
   if(params.pins) {
+    mapPins = {
+      pins: params.pins,
+      mode: params.pinMode
+    };
+
     this.pinHandlers = false;
     this.placePins(params.pins, params.pinMode);
   }
 
+  if(params.showLabels){
+    this.pinHandlers = false;
+
+    var pins = {};
+    for (key in map.countries){
+      if (typeof map.countries[key] !== 'function') {
+        if( !params.pins || !params.pins[key] ){
+          pins[key] = key.toUpperCase();
+        }
+      }
+    }
+
+    mapPins = {
+      pins: pins,
+      mode: 'content'
+    };
+
+    this.placePins(pins, 'content');
+  }
+
   JQVMap.mapIndex++;
 };
 

diff --git a/tests/tests.js b/tests/tests.js
@@ -76,6 +76,7 @@ test("Test Config Options", function () {
     selectedRegions: ['us', 'mx'],
     multiSelectRegion: false,
     showTooltip: false,
+    showLabels: true,
     onLabelShow: function(){ return 'Label Showing'; },
     onRegionOver: function(){ return 'Region Over'; },
     onRegionOut: function(){ return 'Region Out'; },
@@ -108,6 +109,7 @@ test("Test Config Options", function () {
   equal(map.canvas.params.selectedRegions[1], 'mx', 'vectorMap({ selectedRegions: ["us", "mx"] }) MX set correctly');
   equal(map.canvas.params.multiSelectRegion, false, 'vectorMap({ multiSelectRegion: false }) set correctly');
   equal(map.canvas.params.showTooltip, false, 'vectorMap({ showTooltip: false }) set correctly');
+  equal(map.canvas.params.showLabels, true, 'vectorMap({ showLabels: true }) set correctly');
   equal(map.canvas.params.onLabelShow(), 'Label Showing', 'vectorMap({ onLabelShow: function(){} }) set correctly');
   equal(map.canvas.params.onRegionOver(), 'Region Over', 'vectorMap({ onRegionOver: function(){} }) set correctly');
   equal(map.canvas.params.onRegionOut(), 'Region Out', 'vectorMap({ onRegionOut: function(){} }) set correctly');
@@ -158,6 +160,26 @@ test("Test colors actually set in canvas", function () {
   $container.html('');
 });
 
+test("Test labels show up", function () {
+
+  var $container = $('#test-map');
+  var testMap = $('<div id="vmap" style="width: 600px; height: 400px;"></div>');
+
+  $container.append(testMap);
+
+  var map = $('#vmap').vectorMap({
+    map: 'world_en',
+    showLabels: true
+  });
+
+  var labelsExist = (jQuery('.jqvmap_pin').length > 0);
+
+  equal(labelsExist, 1, 'vectorMap({ showLabels: true }) set correctly and label showing');
+
+  jQuery('.jqvmap_pin').remove();
+  $container.html('');
+});
+
 /**
  * --------------------------------------------------------------------------------
  * Test Event Handlers
@@ -373,36 +395,6 @@ test("onRegionDeselect() event handler", function () {
   $container.html('');
 });
 
-test("onResize() event handler", function () {
-
-  var $container = $('#test-map');
-  var testMap = $('<div id="vmap" style="width: 600px; height: 400px;"></div>');
-  var testHandler = {
-    event: null,
-    width: null,
-    height: null
-  };
-
-  $container.append(testMap);
-
-  var map = $('#vmap').vectorMap({
-    map: 'world_en',
-    onResize: function(event, width, height){
-      testHandler.event = typeof event;
-      testHandler.width = width;
-      testHandler.height = height;
-    }
-  });
-
-  jQuery(window).trigger('resize');
-
-  equal(testHandler.event, 'object', 'vectorMap({ onResize: function(event, width, height){ ... } }) fires correctly and returns an event');
-  equal(testHandler.width, 600, 'vectorMap({ onResize: function(event, width, height){ ... } }) fires correctly and returns width');
-  equal(testHandler.height, 400, 'vectorMap({ onResize: function(event, width, height){ ... } }) fires correctly and returns height');
-
-  $container.html('');
-});
-
 /**
  * --------------------------------------------------------------------------------
  * Test for Known Errors