http://www.lodging.ru/Scripts/map/js/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[co

603    setBackgroundColor: function (backgroundColor) {
604      this.container.css('background-color', backgroundColor);
605    },
606
607    setScaleColors: function (colors) {
608      this.colorScale.setColors(colors);
609
610      if (this.values) {
611        this.setValues(this.values);
612      }
613    },
614
615    setNormalizeFunction: function (f) {
616      this.colorScale.setNormalizeFunction(f);
617
618      if (this.values) {
619        this.setValues(this.values);
620      }
621    },
622
623    highlight: function (cc, path) {
624      path = path || $('#' + this.getCountryId(cc))[0];
625      if (this.hoverOpacity) {
626        path.setOpacity(this.hoverOpacity);
627      } else if (this.hoverColor) {
628        path.currentFillColor = path.getFill() + '';
629        path.setFill(this.hoverColor);
630      }
631    },
632
633    unhighlight: function (cc, path) {
634      path = path || $('#' + this.getCountryId(cc))[0];
635      path.setOpacity(1);
636      if (path.currentFillColor) {
637        path.setFill(path.currentFillColor);
638      }
639    },
640
641    select: function (cc, path) {
642      path = path || $('#' + this.getCountryId(cc))[0];
643      if(this.selectedRegions.indexOf(cc) < 0) {
644        if (this.multiSelectRegion) {
645          this.selectedRegions.push(cc);
646        } else {
647          this.selectedRegions = [cc];
648        }
649        // MUST BE after the change of selectedRegions
650        // Otherwise, we might loop
651        $(this.container).trigger('regionSelect.jqvmap', [cc]);
652        if (this.selectedColor) {
653          path.currentFillColor = this.selectedColor;
654          path.setFill(this.selectedColor);
655        }
656      }
657    },
658
659    deselect: function (cc, path) {
660      path = path || $('#' + this.getCountryId(cc))[0];
661      if(this.selectedRegions.indexOf(cc) >= 0) {
662        this.selectedRegions.splice(this.selectedRegions.indexOf(cc), 1);
663        // MUST BE after the change of selectedRegions
664        // Otherwise, we might loop
665        $(this.container).trigger('regionDeselect.jqvmap', [cc]);
666        path.currentFillColor = path.getOriginalFill();
667        path.setFill(path.getOriginalFill());
668      }
669    },
670
671    isSelected: function(cc) {
672      return this.selectedRegions.indexOf(cc) >= 0;
673    },
674
675    resize: function () {
676      var curBaseScale = this.baseScale;
677      if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
678        this.baseScale = this.height / this.defaultHeight;
679        this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
680      } else {
681        this.baseScale = this.width / this.defaultWidth;
682        this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
683      }
684      this.scale *= this.baseScale / curBaseScale;
685      this.transX *= this.baseScale / curBaseScale;
686      this.transY *= this.baseScale / curBaseScale;
687    },
688
689    reset: function () {
690      this.countryTitle.reset();
691      for (var key in this.countries) {
692        this.countries[key].setFill(WorldMap.defaultColor);
693      }
694      this.scale = this.baseScale;
695      this.transX = this.baseTransX;
696      this.transY = this.baseTransY;
697      this.applyTransform();
698    },
699
700    applyTransform: function () {
701      var maxTransX, maxTransY, minTransX, minTransY;
702      if (this.defaultWidth * this.scale <= this.width) {
703        maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
704        minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
705      } else {
706        maxTransX = 0;
707        minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
708      }
709
710      if (this.defaultHeight * this.scale <= this.height) {
711        maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
712        minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
713      } else {
714        maxTransY = 0;
715        minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
716      }
717
718      if (this.transY > maxTransY) {
719        this.transY = maxTransY;
720      }
721      else if (this.transY < minTransY) {
722        this.transY = minTransY;
723      }
724      if (this.transX > maxTransX) {
725        this.transX = maxTransX;
726      }
727      else if (this.transX < minTransX) {
728        this.transX = minTransX;
729      }
730
731      this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
732    },
733
734    makeDraggable: function () {
735      var mouseDown = false;
736      var oldPageX, oldPageY;
737      var self = this;
738
739      self.isMoving = false;
740      self.isMovingTimeout = false;
741
742      this.container.mousemove(function (e) {
743
744        if (mouseDown) {
745          var curTransX = self.transX;
746          var curTransY = self.transY;
747
748          self.transX -= (oldPageX - e.pageX) / self.scale;
749          self.transY -= (oldPageY - e.pageY) / self.scale;
750
751          self.applyTransform();
752
753          oldPageX = e.pageX;
754          oldPageY = e.pageY;
755
756          self.isMoving = true;
757          if (self.isMovingTimeout) {
758            clearTimeout(self.isMovingTimeout);
759          }
760
761          self.container.trigger('drag');
762        }
763
764        return false;
765
766      }).mousedown(function (e) {
767
768        mouseDown = true;
769        oldPageX = e.pageX;
770        oldPageY = e.pageY;
771
772        return false;
773
774      }).mouseup(function () {
775
776        mouseDown = false;
777
778        self.isMovingTimeout = setTimeout(function () {
779          self.isMoving = false;
780        }, 100);
781
782        return false;
783
784      });
785    },
786
787    bindZoomButtons: function () {
788      var map = this;
789      this.container.find('.jqvmap-zoomin').click(function(){
790        map.zoomIn();
791      });
792      this.container.find('.jqvmap-zoomout').click(function(){
793        map.zoomOut();
794      });
795    },
796    
797    zoomIn: function () {
798      var map = this;
799      var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
800
801      if (map.zoomCurStep < map.zoomMaxStep) {
802        var curTransX = map.transX;
803        var curTransY = map.transY;
804        var curScale = map.scale;
805
806        map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
807        map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
808        map.setScale(map.scale * map.zoomStep);
809        map.zoomCurStep++;
810

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