https://www.grandecig.com/hubfs/Contact%20Map/jquery.vmap.js

1/*!
2 * jQVMap Version 1.0
3 *
4 * http://jqvmap.com
5 *
6 * Copyright 2012, Peter Schmalfeldt <[email protected]>
7 * Copyright 2011-2012, Kirill Lebedev
8 * Licensed under the MIT license.
9 *
10 * Fork Me @ https://github.com/manifestinteractive/jqvmap
11 */
12(function ($) {
13
14  var apiParams = {
15    colors: 1,
16    values: 1,
17    backgroundColor: 1,
18    scaleColors: 1,
19    normalizeFunction: 1,
20    enableZoom: 1,
21    showTooltip: 1,
22    borderColor: 1,
23    borderWidth: 1,
24    borderOpacity: 1,
25    selectedRegions: 1,
26    multiSelectRegion: 1
27  };
28
29  var apiEvents = {
30    onLabelShow: 'labelShow',
31    onRegionOver: 'regionMouseOver',
32    onRegionOut: 'regionMouseOut',
33    onRegionClick: 'regionClick',
34    onRegionSelect: 'regionSelect',
35    onRegionDeselect: 'regionDeselect'
36  };
37
38  $.fn.vectorMap = function (options) {
39
40    var defaultParams = {
41      map: 'world_en',
42      backgroundColor: '#a5bfdd',
43      color: '#f4f3f0',
44      hoverColor: '#c9dfaf',
45      selectedColor: '#c9dfaf',
46      scaleColors: ['#b6d6ff', '#005ace'],
47      normalizeFunction: 'linear',
48      enableZoom: true,
49      showTooltip: true,
50      borderColor: '#818181',
51      borderWidth: 1,
52      borderOpacity: 0.25,
53      selectedRegions: null,
54      multiSelectRegion: false
55    }, map = this.data('mapObject');
56
57    if (options === 'addMap') {
58      WorldMap.maps[arguments[1]] = arguments[2];
59    } else if (options === 'set' && apiParams[arguments[1]]) {
60      map['set' + arguments[1].charAt(0).toUpperCase() + arguments[1].substr(1)].apply(map, Array.prototype.slice.call(arguments, 2));
61    } else if (typeof options === 'string' &&
62               typeof map[options] === 'function') {
63      return map[options].apply(map, Array.prototype.slice.call(arguments, 1));
64    } else {
65      $.extend(defaultParams, options);
66      defaultParams.container = this;
67      this.css({ position: 'relative', overflow: 'hidden' });
68
69      map = new WorldMap(defaultParams);
70
71      this.data('mapObject', map);
72
73      for (var e in apiEvents) {
74        if (defaultParams[e]) {
75          this.bind(apiEvents[e] + '.jqvmap', defaultParams[e]);
76        }
77      }
78    }
79  };
80
81  var VectorCanvas = function (width, height, params) {
82    this.mode = window.SVGAngle ? 'svg' : 'vml';
83    this.params = params;
84
85    if (this.mode == 'svg') {
86      this.createSvgNode = function (nodeName) {
87        return document.createElementNS(this.svgns, nodeName);
88      };
89    } else {
90      try {
91        if (!document.namespaces.rvml) {
92          document.namespaces.add("rvml", "urn:schemas-microsoft-com:vml");
93        }
94        this.createVmlNode = function (tagName) {
95          return document.createElement('<rvml:' + tagName + ' class="rvml">');
96        };
97      } catch (e) {
98        this.createVmlNode = function (tagName) {
99          return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
100        };
101      }
102
103      document.createStyleSheet().addRule(".rvml", "behavior:url(#default#VML)");
104    }
105
106    if (this.mode == 'svg') {
107      this.canvas = this.createSvgNode('svg');
108    } else {
109      this.canvas = this.createVmlNode('group');
110      this.canvas.style.position = 'absolute';
111    }
112
113    this.setSize(width, height);
114  };
115
116  VectorCanvas.prototype = {
117    svgns: "http://www.w3.org/2000/svg",
118    mode: 'svg',
119    width: 0,
120    height: 0,
121    canvas: null,
122
123    setSize: function (width, height) {
124      if (this.mode == 'svg') {
125        this.canvas.setAttribute('width', width);
126        this.canvas.setAttribute('height', height);
127      } else {
128        this.canvas.style.width = width + "px";
129        this.canvas.style.height = height + "px";
130        this.canvas.coordsize = width + ' ' + height;
131        this.canvas.coordorigin = "0 0";
132        if (this.rootGroup) {
133          var pathes = this.rootGroup.getElementsByTagName('shape');
134          for (var i = 0, l = pathes.length; i < l; i++) {
135            pathes[i].coordsize = width + ' ' + height;
136            pathes[i].style.width = width + 'px';
137            pathes[i].style.height = height + 'px';
138          }
139          this.rootGroup.coordsize = width + ' ' + height;
140          this.rootGroup.style.width = width + 'px';
141          this.rootGroup.style.height = height + 'px';
142        }
143      }
144      this.width = width;
145      this.height = height;
146    },
147
148    createPath: function (config) {
149      var node;
150      if (this.mode == 'svg') {
151        node = this.createSvgNode('path');
152        node.setAttribute('d', config.path);
153
154        if (this.params.borderColor !== null) {
155          node.setAttribute('stroke', this.params.borderColor);
156        }
157        if (this.params.borderWidth > 0) {
158          node.setAttribute('stroke-width', this.params.borderWidth);
159          node.setAttribute('stroke-linecap', 'round');
160          node.setAttribute('stroke-linejoin', 'round');
161        }
162        if (this.params.borderOpacity > 0) {
163          node.setAttribute('stroke-opacity', this.params.borderOpacity);
164        }
165
166        node.setFill = function (color) {
167          this.setAttribute("fill", color);
168          if (this.getAttribute("original") === null) {
169            this.setAttribute("original", color);
170          }
171        };
172
173        node.getFill = function (color) {
174          return this.getAttribute("fill");
175        };
176
177        node.getOriginalFill = function () {
178          return this.getAttribute("original");
179        };
180
181        node.setOpacity = function (opacity) {
182          this.setAttribute('fill-opacity', opacity);
183        };
184      } else {
185        node = this.createVmlNode('shape');
186        node.coordorigin = "0 0";
187        node.coordsize = this.width + ' ' + this.height;
188        node.style.width = this.width + 'px';
189        node.style.height = this.height + 'px';
190        node.fillcolor = WorldMap.defaultFillColor;
191        node.stroked = false;
192        node.path = VectorCanvas.pathSvgToVml(config.path);
193
194        var scale = this.createVmlNode('skew');
195        scale.on = true;
196        scale.matrix = '0.01,0,0,0.01,0,0';
197        scale.offset = '0,0';
198
199        node.appendChild(scale);
200
201        var fill = this.createVmlNode('fill');
202        node.appendChild(fill);
203
204        node.setFill = function (color) {
205          this.getElementsByTagName('fill')[0].color = color;
206          if (this.getAttribute("original") === null) {
207            this.setAttribute("original", color);
208          }
209        };
210
211        node.getFill = function (color) {
212          return this.getElementsByTagName('fill')[0].color;
213        };
214        node.getOriginalFill = function () {
215          return this.getAttribute("original");
216        };
217        node.setOpacity = function (opacity) {
218          this.getElementsByTagName('fill')[0].opacity = parseInt(opacity * 100, 10) + '%';
219        };
220      }
221      return node;
222    },
223
224    createGroup: function (isRoot) {
225      var node;
226      if (this.mode == 'svg') {
227        node = this.createSvgNode('g');
228      } else {
229        node = this.createVmlNode('group');
230        node.style.width = this.width + 'px';
231        node.style.height = this.height + 'px';
232        node.style.left = '0px';
233        node.style.top = '0px';
234        node.coordorigin = "0 0";
235        node.coordsize = this.width + ' ' + this.height;
236      }
237
238      if (isRoot) {
239        this.rootGroup = node;
240      }
241      return node;
242    },
243
244    applyTransformParams: function (scale, transX, transY) {
245      if (this.mode == 'svg') {
246        this.rootGroup.setAttribute('transform', 'scale(' + scale + ') translate(' + transX + ', ' + transY + ')');
247      } else {
248        this.rootGroup.coordorigin = (this.width - transX) + ',' + (this.height - transY);
249        this.rootGroup.coordsize = this.width / scale + ',' + this.height / scale;
250      }
251    }
252  };
253
254  VectorCanvas.pathSvgToVml = function (path) {
255    var result = '';
256    var cx = 0, cy = 0, ctrlx, ctrly;
257
258    return path.replace(/([MmLlHhVvCcSs])((?:-?(?:\d+)?(?:\.\d+)?,?\s?)+)/g, function (segment, letter, coords, index) {
259      coords = coords.replace(/(\d)-/g, '$1,-').replace(/\s+/g, ',').split(',');
260      if (!coords[0]) {
261        coords.shift();
262      }
263
264      for (var i = 0, l = coords.length; i < l; i++) {
265        coords[i] = Math.round(100 * coords[i]);
266      }
267
268      switch (letter) {
269      case 'm':
270        cx += coords[0];
271        cy += coords[1];
272        return 't' + coords.join(',');
273        break;
274
275      case 'M':
276        cx = coords[0];
277        cy = coords[1];
278        return 'm' + coords.join(',');
279        break;
280
281      case 'l':
282        cx += coords[0];
283        cy += coords[1];
284        return 'r' + coords.join(',');
285        break;
286
287      case 'L':
288        cx = coords[0];
289        cy = coords[1];
290        return 'l' + coords.join(',');
291        break;
292
293      case 'h':
294        cx += coords[0];
295        return 'r' + coords[0] + ',0';
296        break;
297
298      case 'H':
299        cx = coords[0];
300        return 'l' + cx + ',' + cy;
301        break;
302
303      case 'v':
304        cy += coords[0];
305        return 'r0,' + coords[0];
306        break;
307
308      case 'V':
309        cy = coords[0];
310        return 'l' + cx + ',' + cy;
311        break;
312
313      case 'c':
314        ctrlx = cx + coords[coords.length - 4];
315        ctrly = cy + coords[coords.length - 3];
316        cx += coords[coords.length - 2];
317        cy += coords[coords.length - 1];
318        return 'v' + coords.join(',');
319        break;
320
321      case 'C':
322        ctrlx = coords[coords.length - 4];
323        ctrly = coords[coords.length - 3];
324        cx = coords[coords.length - 2];
325        cy = coords[coords.length - 1];
326        return 'c' + coords.join(',');
327        break;
328
329      case 's':
330        coords.unshift(cy - ctrly);
331        coords.unshift(cx - ctrlx);
332        ctrlx = cx + coords[coords.length - 4];
333        ctrly = cy + coords[coords.length - 3];
334        cx += coords[coords.length - 2];
335        cy += coords[coords.length - 1];
336        return 'v' + coords.join(',');
337        break;
338
339      case 'S':
340        coords.unshift(cy + cy - ctrly);
341        coords.unshift(cx + cx - ctrlx);
342        ctrlx = coords[coords.length - 4];
343        ctrly = coords[coords.length - 3];
344        cx = coords[coords.length - 2];
345        cy = coords[coords.length - 1];
346        return 'c' + coords.join(',');
347        break;
348
349      default:
350        return false;
351        break;
352      }
353
354      return '';
355
356    }).replace(/z/g, '');
357  };
358
359  var WorldMap = function (params) {
360    params = params || {};
361    var map = this;
362    var mapData = WorldMap.maps[params.map];
363
364    this.selectedRegions = [];
365    this.multiSelectRegion = params.multiSelectRegion;
366
367    this.container = params.container;
368
369    this.defaultWidth = mapData.width;
370    this.defaultHeight = mapData.height;
371
372    this.color = params.color;
373    this.selectedColor = params.selectedColor;
374    this.hoverColor = params.hoverColor;
375    this.hoverOpacity = params.hoverOpacity;
376    this.setBackgroundColor(params.backgroundColor);
377
378    this.width = params.container.width();
379    this.height = params.container.height();
380
381    this.resize();
382
383    jQuery(window).resize(function () {
384      map.width = params.container.width();
385      map.height = params.container.height();
386      map.resize();
387      map.canvas.setSize(map.width, map.height);
388      map.applyTransform();
389    });
390
391    this.canvas = new VectorCanvas(this.width, this.height, params);
392    params.container.append(this.canvas.canvas);
393
394    this.makeDraggable();
395
396    this.rootGroup = this.canvas.createGroup(true);
397
398    this.index = WorldMap.mapIndex;
399    this.label = jQuery('<div/>').addClass('jqvmap-label').appendTo(jQuery('body')).hide();
400
401    if (params.enableZoom) {
402      jQuery('<div/>').addClass('jqvmap-zoomin').text('+').appendTo(params.container);
403      jQuery('<div/>').addClass('jqvmap-zoomout').html('&#x2212;').appendTo(params.container);
404    }
405
406    map.countries = [];
407
408    for (var key in mapData.pathes) {
409      var path = this.canvas.createPath({
410        path: mapData.pathes[key].path
411      });
412
413      path.setFill(this.color);
414      path.id = map.getCountryId(key);
415      map.countries[key] = path;
416
417      if (this.canvas.mode == 'svg') {
418        path.setAttribute('class', 'jvectormap-region');
419      } else {
420        jQuery(path).addClass('jvectormap-region');
421      }
422
423      jQuery(this.rootGroup).append(path);
424    }
425
426    jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e) {
427      var path = e.target,
428      code = e.target.id.split('_').pop(),
429      labelShowEvent = $.Event('labelShow.jqvmap'),
430      regionMouseOverEvent = $.Event('regionMouseOver.jqvmap');
431
432      if (e.type == 'mouseover') {
433        jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.pathes[code].name]);
434        if (!regionMouseOverEvent.isDefaultPrevented()) {
435          map.highlight(code, path);
436        }
437        if (params.showTooltip) {
438          map.label.text(mapData.pathes[code].name);
439          jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
440
441          if (!labelShowEvent.isDefaultPrevented()) {
442            map.label.show();
443            map.labelWidth = map.label.width();
444            map.labelHeight = map.label.height();
445          }
446        }
447      } else {
448        map.unhighlight(code, path);
449
450        map.label.hide();
451        jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.pathes[code].name]);
452      }
453    });
454
455    jQuery(params.container).delegate(this.canvas.mode == 'svg' ? 'path' : 'shape', 'click', function (e) {
456      if (!params.multiSelectRegion) {
457        for (var key in mapData.pathes) {
458          map.countries[key].currentFillColor = map.countries[key].getOriginalFill();
459          map.countries[key].setFill(map.countries[key].getOriginalFill());
460        }
461      }
462
463      var path = e.target;
464      var code = e.target.id.split('_').pop();
465
466      jQuery(params.container).trigger('regionClick.jqvmap', [code, mapData.pathes[code].name]);
467      if (!regionClickEvent.isDefaultPrevented()) {
468        if (map.selectedRegions.indexOf(code) !== -1) {
469          map.deselect(code, path);
470        } else {
471          map.select(code, path);
472        }
473      }
474
475      //console.log(selectedRegions);
476
477    });
478
479    if (params.showTooltip) {
480      params.container.mousemove(function (e) {
481        if (map.label.is(':visible')) {
482            var left = e.pageX - 15 - map.labelWidth;
483            var top = e.pageY - 15 - map.labelHeight;
484            
485            if(left < 0)
486               left = e.pageX + 15;
487            if(top < 0)
488                top = e.pageY + 15;
489            
490            map.label.css({
491                left: left,
492                top: top
493          });
494        }
495      });
496    }
497
498    this.setColors(params.colors);
499
500    this.canvas.canvas.appendChild(this.rootGroup);
501
502    this.applyTransform();
503
504    this.colorScale = new ColorScale(params.scaleColors, params.normalizeFunction, params.valueMin, params.valueMax);
505
506    if (params.values) {
507      this.values = params.values;
508      this.setValues(params.values);
509    }
510
511    if (params.selectedRegions) {
512      if (params.selectedRegions instanceof Array) {
513        for(var k in params.selectedRegions) {
514          this.select(params.selectedRegions[k].toLowerCase());
515        }
516      } else {
517        this.select(params.selectedRegions.toLowerCase());
518      }
519    }
520
521    this.bindZoomButtons();
522    
523    if(params.pins) {
524      /*if(params.pinMode) {
525          if(params.pinMode != "id" && params.pinMode != "content") {
526              params.pinMode = "content";
527          }
528      } else {
529          params.pinMode = "content";
530      }*/
531      this.pinHandlers = false;

971    setMax: function (max) {
972      this.clearMaxValue = max;
973      if (typeof this.normalize === 'function') {
974        this.maxValue = this.normalize(max);
975      } else {
976        this.maxValue = max;
977      }
978    },
979
980    setColors: function (colors) {
981      for (var i = 0; i < colors.length; i++) {
982        colors[i] = ColorScale.rgbToArray(colors[i]);
983      }
984      this.colors = colors;
985    },
986
987    setNormalizeFunction: function (f) {
988      if (f === 'polynomial') {
989        this.normalize = function (value) {
990          return Math.pow(value, 0.2);
991        };
992      }
993      else if (f === 'linear') {
994        delete this.normalize;
995      } else {
996        this.normalize = f;
997      }
998      this.setMin(this.clearMinValue);
999      this.setMax(this.clearMaxValue);
1000    },
1001
1002    getColor: function (value) {
1003      if (typeof this.normalize === 'function') {
1004        value = this.normalize(value);
1005      }
1006
1007      var lengthes = [];
1008      var fullLength = 0;
1009      var l;
1010
1011      for (var i = 0; i < this.colors.length - 1; i++) {
1012        l = this.vectorLength(this.vectorSubtract(this.colors[i + 1], this.colors[i]));
1013        lengthes.push(l);
1014        fullLength += l;
1015      }
1016
1017      var c = (this.maxValue - this.minValue) / fullLength;
1018
1019      for (i = 0; i < lengthes.length; i++) {
1020        lengthes[i] *= c;
1021      }
1022
1023      i = 0;
1024      value -= this.minValue;
1025
1026      while (value - lengthes[i] >= 0) {
1027        value -= lengthes[i];
1028        i++;
1029      }
1030
1031      var color;
1032      if (i == this.colors.length - 1) {
1033        color = this.vectorToNum(this.colors[i]).toString(16);
1034      } else {
1035        color = (this.vectorToNum(this.vectorAdd(this.colors[i], this.vectorMult(this.vectorSubtract(this.colors[i + 1], this.colors[i]), (value) / (lengthes[i]))))).toString(16);
1036      }
1037
1038      while (color.length < 6) {
1039        color = '0' + color;
1040      }
1041      return '#' + color;
1042    },
1043
1044    vectorToNum: function (vector) {
1045      var num = 0;
1046      for (var i = 0; i < vector.length; i++) {
1047        num += Math.round(vector[i]) * Math.pow(256, vector.length - i - 1);
1048      }
1049      return num;
1050    },
1051
1052    vectorSubtract: function (vector1, vector2) {
1053      var vector = [];
1054      for (var i = 0; i < vector1.length; i++) {
1055        vector[i] = vector1[i] - vector2[i];
1056      }
1057      return vector;
1058    },
1059
1060    vectorAdd: function (vector1, vector2) {
1061      var vector = [];
1062      for (var i = 0; i < vector1.length; i++) {
1063        vector[i] = vector1[i] + vector2[i];
1064      }
1065      return vector;
1066    },
1067
1068    vectorMult: function (vector, num) {
1069      var result = [];
1070      for (var i = 0; i < vector.length; i++) {
1071        result[i] = vector[i] * num;
1072      }
1073      return result;
1074    },
1075
1076    vectorLength: function (vector) {
1077      var result = 0;
1078      for (var i = 0; i < vector.length; i++) {
1079        result += vector[i] * vector[i];
1080      }
1081      return Math.sqrt(result);
1082    }
1083  };
1084
1085  ColorScale.arrayToRgb = function (ar) {
1086    var rgb = '#';
1087    var d;
1088    for (var i = 0; i < ar.length; i++) {
1089      d = ar[i].toString(16);
1090      rgb += d.length == 1 ? '0' + d : d;
1091    }
1092    return rgb;
1093  };
1094
1095  ColorScale.rgbToArray = function (rgb) {
1096    rgb = rgb.substr(1);
1097    return [parseInt(rgb.substr(0, 2), 16), parseInt(rgb.substr(2, 2), 16), parseInt(rgb.substr(4, 2), 16)];
1098  };
1099
1100})(jQuery);