[7304c7f] | 1 | /*!
|
---|
| 2 | * JQVMap: jQuery Vector Map Library
|
---|
| 3 | * @author JQVMap <me@peterschmalfeldt.com>
|
---|
| 4 | * @version 1.5.1
|
---|
| 5 | * @link http://jqvmap.com
|
---|
| 6 | * @license https://github.com/manifestinteractive/jqvmap/blob/master/LICENSE
|
---|
| 7 | * @builddate 2016/06/02
|
---|
| 8 | */
|
---|
| 9 |
|
---|
| 10 | var VectorCanvas = function (width, height, params) {
|
---|
| 11 | this.mode = window.SVGAngle ? 'svg' : 'vml';
|
---|
| 12 | this.params = params;
|
---|
| 13 |
|
---|
| 14 | if (this.mode === 'svg') {
|
---|
| 15 | this.createSvgNode = function (nodeName) {
|
---|
| 16 | return document.createElementNS(this.svgns, nodeName);
|
---|
| 17 | };
|
---|
| 18 | } else {
|
---|
| 19 | try {
|
---|
| 20 | if (!document.namespaces.rvml) {
|
---|
| 21 | document.namespaces.add('rvml', 'urn:schemas-microsoft-com:vml');
|
---|
| 22 | }
|
---|
| 23 | this.createVmlNode = function (tagName) {
|
---|
| 24 | return document.createElement('<rvml:' + tagName + ' class="rvml">');
|
---|
| 25 | };
|
---|
| 26 | } catch (e) {
|
---|
| 27 | this.createVmlNode = function (tagName) {
|
---|
| 28 | return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
|
---|
| 29 | };
|
---|
| 30 | }
|
---|
| 31 |
|
---|
| 32 | document.createStyleSheet().addRule('.rvml', 'behavior:url(#default#VML)');
|
---|
| 33 | }
|
---|
| 34 |
|
---|
| 35 | if (this.mode === 'svg') {
|
---|
| 36 | this.canvas = this.createSvgNode('svg');
|
---|
| 37 | } else {
|
---|
| 38 | this.canvas = this.createVmlNode('group');
|
---|
| 39 | this.canvas.style.position = 'absolute';
|
---|
| 40 | }
|
---|
| 41 |
|
---|
| 42 | this.setSize(width, height);
|
---|
| 43 | };
|
---|
| 44 |
|
---|
| 45 | VectorCanvas.prototype = {
|
---|
| 46 | svgns: 'http://www.w3.org/2000/svg',
|
---|
| 47 | mode: 'svg',
|
---|
| 48 | width: 0,
|
---|
| 49 | height: 0,
|
---|
| 50 | canvas: null
|
---|
| 51 | };
|
---|
| 52 |
|
---|
| 53 | var ColorScale = function (colors, normalizeFunction, minValue, maxValue) {
|
---|
| 54 | if (colors) {
|
---|
| 55 | this.setColors(colors);
|
---|
| 56 | }
|
---|
| 57 | if (normalizeFunction) {
|
---|
| 58 | this.setNormalizeFunction(normalizeFunction);
|
---|
| 59 | }
|
---|
| 60 | if (minValue) {
|
---|
| 61 | this.setMin(minValue);
|
---|
| 62 | }
|
---|
| 63 | if (minValue) {
|
---|
| 64 | this.setMax(maxValue);
|
---|
| 65 | }
|
---|
| 66 | };
|
---|
| 67 |
|
---|
| 68 | ColorScale.prototype = {
|
---|
| 69 | colors: []
|
---|
| 70 | };
|
---|
| 71 |
|
---|
| 72 | var JQVMap = function (params) {
|
---|
| 73 | params = params || {};
|
---|
| 74 | var map = this;
|
---|
| 75 | var mapData = JQVMap.maps[params.map];
|
---|
| 76 | var mapPins;
|
---|
| 77 |
|
---|
| 78 | if( !mapData){
|
---|
| 79 | throw new Error('Invalid "' + params.map + '" map parameter. Please make sure you have loaded this map file in your HTML.');
|
---|
| 80 | }
|
---|
| 81 |
|
---|
| 82 | this.selectedRegions = [];
|
---|
| 83 | this.multiSelectRegion = params.multiSelectRegion;
|
---|
| 84 |
|
---|
| 85 | this.container = params.container;
|
---|
| 86 |
|
---|
| 87 | this.defaultWidth = mapData.width;
|
---|
| 88 | this.defaultHeight = mapData.height;
|
---|
| 89 |
|
---|
| 90 | this.color = params.color;
|
---|
| 91 | this.selectedColor = params.selectedColor;
|
---|
| 92 | this.hoverColor = params.hoverColor;
|
---|
| 93 | this.hoverColors = params.hoverColors;
|
---|
| 94 | this.hoverOpacity = params.hoverOpacity;
|
---|
| 95 | this.setBackgroundColor(params.backgroundColor);
|
---|
| 96 |
|
---|
| 97 | this.width = params.container.width();
|
---|
| 98 | this.height = params.container.height();
|
---|
| 99 |
|
---|
| 100 | this.resize();
|
---|
| 101 |
|
---|
| 102 | jQuery(window).resize(function () {
|
---|
| 103 | var newWidth = params.container.width();
|
---|
| 104 | var newHeight = params.container.height();
|
---|
| 105 |
|
---|
| 106 | if(newWidth && newHeight){
|
---|
| 107 | map.width = newWidth;
|
---|
| 108 | map.height = newHeight;
|
---|
| 109 | map.resize();
|
---|
| 110 | map.canvas.setSize(map.width, map.height);
|
---|
| 111 | map.applyTransform();
|
---|
| 112 |
|
---|
| 113 | var resizeEvent = jQuery.Event('resize.jqvmap');
|
---|
| 114 | jQuery(params.container).trigger(resizeEvent, [newWidth, newHeight]);
|
---|
| 115 |
|
---|
| 116 | if(mapPins){
|
---|
| 117 | jQuery('.jqvmap-pin').remove();
|
---|
| 118 | map.pinHandlers = false;
|
---|
| 119 | map.placePins(mapPins.pins, mapPins.mode);
|
---|
| 120 | }
|
---|
| 121 | }
|
---|
| 122 | });
|
---|
| 123 |
|
---|
| 124 | this.canvas = new VectorCanvas(this.width, this.height, params);
|
---|
| 125 | params.container.append(this.canvas.canvas);
|
---|
| 126 |
|
---|
| 127 | this.makeDraggable();
|
---|
| 128 |
|
---|
| 129 | this.rootGroup = this.canvas.createGroup(true);
|
---|
| 130 |
|
---|
| 131 | this.index = JQVMap.mapIndex;
|
---|
| 132 | this.label = jQuery('<div/>').addClass('jqvmap-label').appendTo(jQuery('body')).hide();
|
---|
| 133 |
|
---|
| 134 | if (params.enableZoom) {
|
---|
| 135 | jQuery('<div/>').addClass('jqvmap-zoomin').text('+').appendTo(params.container);
|
---|
| 136 | jQuery('<div/>').addClass('jqvmap-zoomout').html('−').appendTo(params.container);
|
---|
| 137 | }
|
---|
| 138 |
|
---|
| 139 | map.countries = [];
|
---|
| 140 |
|
---|
| 141 | for (var key in mapData.paths) {
|
---|
| 142 | var path = this.canvas.createPath({
|
---|
| 143 | path: mapData.paths[key].path
|
---|
| 144 | });
|
---|
| 145 |
|
---|
| 146 | path.setFill(this.color);
|
---|
| 147 | path.id = map.getCountryId(key);
|
---|
| 148 | map.countries[key] = path;
|
---|
| 149 |
|
---|
| 150 | if (this.canvas.mode === 'svg') {
|
---|
| 151 | path.setAttribute('class', 'jqvmap-region');
|
---|
| 152 | } else {
|
---|
| 153 | jQuery(path).addClass('jqvmap-region');
|
---|
| 154 | }
|
---|
| 155 |
|
---|
| 156 | jQuery(this.rootGroup).append(path);
|
---|
| 157 | }
|
---|
| 158 |
|
---|
| 159 | jQuery(params.container).delegate(this.canvas.mode === 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e) {
|
---|
| 160 | var containerPath = e.target,
|
---|
| 161 | code = e.target.id.split('_').pop(),
|
---|
| 162 | labelShowEvent = jQuery.Event('labelShow.jqvmap'),
|
---|
| 163 | regionMouseOverEvent = jQuery.Event('regionMouseOver.jqvmap');
|
---|
| 164 |
|
---|
| 165 | code = code.toLowerCase();
|
---|
| 166 |
|
---|
| 167 | if (e.type === 'mouseover') {
|
---|
| 168 | jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.paths[code].name]);
|
---|
| 169 | if (!regionMouseOverEvent.isDefaultPrevented()) {
|
---|
| 170 | map.highlight(code, containerPath);
|
---|
| 171 | }
|
---|
| 172 | if (params.showTooltip) {
|
---|
| 173 | map.label.text(mapData.paths[code].name);
|
---|
| 174 | jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
|
---|
| 175 |
|
---|
| 176 | if (!labelShowEvent.isDefaultPrevented()) {
|
---|
| 177 | map.label.show();
|
---|
| 178 | map.labelWidth = map.label.width();
|
---|
| 179 | map.labelHeight = map.label.height();
|
---|
| 180 | }
|
---|
| 181 | }
|
---|
| 182 | } else {
|
---|
| 183 | map.unhighlight(code, containerPath);
|
---|
| 184 |
|
---|
| 185 | map.label.hide();
|
---|
| 186 | jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.paths[code].name]);
|
---|
| 187 | }
|
---|
| 188 | });
|
---|
| 189 |
|
---|
| 190 | jQuery(params.container).delegate(this.canvas.mode === 'svg' ? 'path' : 'shape', 'click', function (regionClickEvent) {
|
---|
| 191 |
|
---|
| 192 | var targetPath = regionClickEvent.target;
|
---|
| 193 | var code = regionClickEvent.target.id.split('_').pop();
|
---|
| 194 | var mapClickEvent = jQuery.Event('regionClick.jqvmap');
|
---|
| 195 |
|
---|
| 196 | code = code.toLowerCase();
|
---|
| 197 |
|
---|
| 198 | jQuery(params.container).trigger(mapClickEvent, [code, mapData.paths[code].name]);
|
---|
| 199 |
|
---|
| 200 | if ( !params.multiSelectRegion && !mapClickEvent.isDefaultPrevented()) {
|
---|
| 201 | for (var keyPath in mapData.paths) {
|
---|
| 202 | map.countries[keyPath].currentFillColor = map.countries[keyPath].getOriginalFill();
|
---|
| 203 | map.countries[keyPath].setFill(map.countries[keyPath].getOriginalFill());
|
---|
| 204 | }
|
---|
| 205 | }
|
---|
| 206 |
|
---|
| 207 | if ( !mapClickEvent.isDefaultPrevented()) {
|
---|
| 208 | if (map.isSelected(code)) {
|
---|
| 209 | map.deselect(code, targetPath);
|
---|
| 210 | } else {
|
---|
| 211 | map.select(code, targetPath);
|
---|
| 212 | }
|
---|
| 213 | }
|
---|
| 214 | });
|
---|
| 215 |
|
---|
| 216 | if (params.showTooltip) {
|
---|
| 217 | params.container.mousemove(function (e) {
|
---|
| 218 | if (map.label.is(':visible')) {
|
---|
| 219 | var left = e.pageX - 15 - map.labelWidth;
|
---|
| 220 | var top = e.pageY - 15 - map.labelHeight;
|
---|
| 221 |
|
---|
| 222 | if(left < 0) {
|
---|
| 223 | left = e.pageX + 15;
|
---|
| 224 | }
|
---|
| 225 | if(top < 0) {
|
---|
| 226 | top = e.pageY + 15;
|
---|
| 227 | }
|
---|
| 228 |
|
---|
| 229 | map.label.css({
|
---|
| 230 | left: left,
|
---|
| 231 | top: top
|
---|
| 232 | });
|
---|
| 233 | }
|
---|
| 234 | });
|
---|
| 235 | }
|
---|
| 236 |
|
---|
| 237 | this.setColors(params.colors);
|
---|
| 238 |
|
---|
| 239 | this.canvas.canvas.appendChild(this.rootGroup);
|
---|
| 240 |
|
---|
| 241 | this.applyTransform();
|
---|
| 242 |
|
---|
| 243 | this.colorScale = new ColorScale(params.scaleColors, params.normalizeFunction, params.valueMin, params.valueMax);
|
---|
| 244 |
|
---|
| 245 | if (params.values) {
|
---|
| 246 | this.values = params.values;
|
---|
| 247 | this.setValues(params.values);
|
---|
| 248 | }
|
---|
| 249 |
|
---|
| 250 | if (params.selectedRegions) {
|
---|
| 251 | if (params.selectedRegions instanceof Array) {
|
---|
| 252 | for(var k in params.selectedRegions) {
|
---|
| 253 | this.select(params.selectedRegions[k].toLowerCase());
|
---|
| 254 | }
|
---|
| 255 | } else {
|
---|
| 256 | this.select(params.selectedRegions.toLowerCase());
|
---|
| 257 | }
|
---|
| 258 | }
|
---|
| 259 |
|
---|
| 260 | this.bindZoomButtons();
|
---|
| 261 |
|
---|
| 262 | if(params.pins) {
|
---|
| 263 | mapPins = {
|
---|
| 264 | pins: params.pins,
|
---|
| 265 | mode: params.pinMode
|
---|
| 266 | };
|
---|
| 267 |
|
---|
| 268 | this.pinHandlers = false;
|
---|
| 269 | this.placePins(params.pins, params.pinMode);
|
---|
| 270 | }
|
---|
| 271 |
|
---|
| 272 | if(params.showLabels){
|
---|
| 273 | this.pinHandlers = false;
|
---|
| 274 |
|
---|
| 275 | var pins = {};
|
---|
| 276 | for (key in map.countries){
|
---|
| 277 | if (typeof map.countries[key] !== 'function') {
|
---|
| 278 | if( !params.pins || !params.pins[key] ){
|
---|
| 279 | pins[key] = key.toUpperCase();
|
---|
| 280 | }
|
---|
| 281 | }
|
---|
| 282 | }
|
---|
| 283 |
|
---|
| 284 | mapPins = {
|
---|
| 285 | pins: pins,
|
---|
| 286 | mode: 'content'
|
---|
| 287 | };
|
---|
| 288 |
|
---|
| 289 | this.placePins(pins, 'content');
|
---|
| 290 | }
|
---|
| 291 |
|
---|
| 292 | JQVMap.mapIndex++;
|
---|
| 293 | };
|
---|
| 294 |
|
---|
| 295 | JQVMap.prototype = {
|
---|
| 296 | transX: 0,
|
---|
| 297 | transY: 0,
|
---|
| 298 | scale: 1,
|
---|
| 299 | baseTransX: 0,
|
---|
| 300 | baseTransY: 0,
|
---|
| 301 | baseScale: 1,
|
---|
| 302 | width: 0,
|
---|
| 303 | height: 0,
|
---|
| 304 | countries: {},
|
---|
| 305 | countriesColors: {},
|
---|
| 306 | countriesData: {},
|
---|
| 307 | zoomStep: 1.4,
|
---|
| 308 | zoomMaxStep: 4,
|
---|
| 309 | zoomCurStep: 1
|
---|
| 310 | };
|
---|
| 311 |
|
---|
| 312 | JQVMap.xlink = 'http://www.w3.org/1999/xlink';
|
---|
| 313 | JQVMap.mapIndex = 1;
|
---|
| 314 | JQVMap.maps = {};
|
---|
| 315 |
|
---|
| 316 | (function(){
|
---|
| 317 |
|
---|
| 318 | var apiParams = {
|
---|
| 319 | colors: 1,
|
---|
| 320 | values: 1,
|
---|
| 321 | backgroundColor: 1,
|
---|
| 322 | scaleColors: 1,
|
---|
| 323 | normalizeFunction: 1,
|
---|
| 324 | enableZoom: 1,
|
---|
| 325 | showTooltip: 1,
|
---|
| 326 | borderColor: 1,
|
---|
| 327 | borderWidth: 1,
|
---|
| 328 | borderOpacity: 1,
|
---|
| 329 | selectedRegions: 1,
|
---|
| 330 | multiSelectRegion: 1
|
---|
| 331 | };
|
---|
| 332 |
|
---|
| 333 | var apiEvents = {
|
---|
| 334 | onLabelShow: 'labelShow',
|
---|
| 335 | onLoad: 'load',
|
---|
| 336 | onRegionOver: 'regionMouseOver',
|
---|
| 337 | onRegionOut: 'regionMouseOut',
|
---|
| 338 | onRegionClick: 'regionClick',
|
---|
| 339 | onRegionSelect: 'regionSelect',
|
---|
| 340 | onRegionDeselect: 'regionDeselect',
|
---|
| 341 | onResize: 'resize'
|
---|
| 342 | };
|
---|
| 343 |
|
---|
| 344 | jQuery.fn.vectorMap = function (options) {
|
---|
| 345 |
|
---|
| 346 | var defaultParams = {
|
---|
| 347 | map: 'world_en',
|
---|
| 348 | backgroundColor: '#a5bfdd',
|
---|
| 349 | color: '#f4f3f0',
|
---|
| 350 | hoverColor: '#c9dfaf',
|
---|
| 351 | hoverColors: {},
|
---|
| 352 | selectedColor: '#c9dfaf',
|
---|
| 353 | scaleColors: ['#b6d6ff', '#005ace'],
|
---|
| 354 | normalizeFunction: 'linear',
|
---|
| 355 | enableZoom: true,
|
---|
| 356 | showTooltip: true,
|
---|
| 357 | borderColor: '#818181',
|
---|
| 358 | borderWidth: 1,
|
---|
| 359 | borderOpacity: 0.25,
|
---|
| 360 | selectedRegions: null,
|
---|
| 361 | multiSelectRegion: false
|
---|
| 362 | }, map = this.data('mapObject');
|
---|
| 363 |
|
---|
| 364 | if (options === 'addMap') {
|
---|
| 365 | JQVMap.maps[arguments[1]] = arguments[2];
|
---|
| 366 | } else if (options === 'set' && apiParams[arguments[1]]) {
|
---|
| 367 | map['set' + arguments[1].charAt(0).toUpperCase() + arguments[1].substr(1)].apply(map, Array.prototype.slice.call(arguments, 2));
|
---|
| 368 | } else if (typeof options === 'string' &&
|
---|
| 369 | typeof map[options] === 'function') {
|
---|
| 370 | return map[options].apply(map, Array.prototype.slice.call(arguments, 1));
|
---|
| 371 | } else {
|
---|
| 372 | jQuery.extend(defaultParams, options);
|
---|
| 373 | defaultParams.container = this;
|
---|
| 374 | this.css({ position: 'relative', overflow: 'hidden' });
|
---|
| 375 |
|
---|
| 376 | map = new JQVMap(defaultParams);
|
---|
| 377 |
|
---|
| 378 | this.data('mapObject', map);
|
---|
| 379 |
|
---|
| 380 | this.unbind('.jqvmap');
|
---|
| 381 |
|
---|
| 382 | for (var e in apiEvents) {
|
---|
| 383 | if (defaultParams[e]) {
|
---|
| 384 | this.bind(apiEvents[e] + '.jqvmap', defaultParams[e]);
|
---|
| 385 | }
|
---|
| 386 | }
|
---|
| 387 |
|
---|
| 388 | var loadEvent = jQuery.Event('load.jqvmap');
|
---|
| 389 | jQuery(defaultParams.container).trigger(loadEvent, map);
|
---|
| 390 |
|
---|
| 391 | return map;
|
---|
| 392 | }
|
---|
| 393 | };
|
---|
| 394 |
|
---|
| 395 | })(jQuery);
|
---|
| 396 |
|
---|
| 397 | ColorScale.arrayToRgb = function (ar) {
|
---|
| 398 | var rgb = '#';
|
---|
| 399 | var d;
|
---|
| 400 | for (var i = 0; i < ar.length; i++) {
|
---|
| 401 | d = ar[i].toString(16);
|
---|
| 402 | rgb += d.length === 1 ? '0' + d : d;
|
---|
| 403 | }
|
---|
| 404 | return rgb;
|
---|
| 405 | };
|
---|
| 406 |
|
---|
| 407 | ColorScale.prototype.getColor = function (value) {
|
---|
| 408 | if (typeof this.normalize === 'function') {
|
---|
| 409 | value = this.normalize(value);
|
---|
| 410 | }
|
---|
| 411 |
|
---|
| 412 | var lengthes = [];
|
---|
| 413 | var fullLength = 0;
|
---|
| 414 | var l;
|
---|
| 415 |
|
---|
| 416 | for (var i = 0; i < this.colors.length - 1; i++) {
|
---|
| 417 | l = this.vectorLength(this.vectorSubtract(this.colors[i + 1], this.colors[i]));
|
---|
| 418 | lengthes.push(l);
|
---|
| 419 | fullLength += l;
|
---|
| 420 | }
|
---|
| 421 |
|
---|
| 422 | var c = (this.maxValue - this.minValue) / fullLength;
|
---|
| 423 |
|
---|
| 424 | for (i = 0; i < lengthes.length; i++) {
|
---|
| 425 | lengthes[i] *= c;
|
---|
| 426 | }
|
---|
| 427 |
|
---|
| 428 | i = 0;
|
---|
| 429 | value -= this.minValue;
|
---|
| 430 |
|
---|
| 431 | while (value - lengthes[i] >= 0) {
|
---|
| 432 | value -= lengthes[i];
|
---|
| 433 | i++;
|
---|
| 434 | }
|
---|
| 435 |
|
---|
| 436 | var color;
|
---|
| 437 | if (i === this.colors.length - 1) {
|
---|
| 438 | color = this.vectorToNum(this.colors[i]).toString(16);
|
---|
| 439 | } else {
|
---|
| 440 | color = (this.vectorToNum(this.vectorAdd(this.colors[i], this.vectorMult(this.vectorSubtract(this.colors[i + 1], this.colors[i]), (value) / (lengthes[i]))))).toString(16);
|
---|
| 441 | }
|
---|
| 442 |
|
---|
| 443 | while (color.length < 6) {
|
---|
| 444 | color = '0' + color;
|
---|
| 445 | }
|
---|
| 446 | return '#' + color;
|
---|
| 447 | };
|
---|
| 448 |
|
---|
| 449 | ColorScale.rgbToArray = function (rgb) {
|
---|
| 450 | rgb = rgb.substr(1);
|
---|
| 451 | return [parseInt(rgb.substr(0, 2), 16), parseInt(rgb.substr(2, 2), 16), parseInt(rgb.substr(4, 2), 16)];
|
---|
| 452 | };
|
---|
| 453 |
|
---|
| 454 | ColorScale.prototype.setColors = function (colors) {
|
---|
| 455 | for (var i = 0; i < colors.length; i++) {
|
---|
| 456 | colors[i] = ColorScale.rgbToArray(colors[i]);
|
---|
| 457 | }
|
---|
| 458 | this.colors = colors;
|
---|
| 459 | };
|
---|
| 460 |
|
---|
| 461 | ColorScale.prototype.setMax = function (max) {
|
---|
| 462 | this.clearMaxValue = max;
|
---|
| 463 | if (typeof this.normalize === 'function') {
|
---|
| 464 | this.maxValue = this.normalize(max);
|
---|
| 465 | } else {
|
---|
| 466 | this.maxValue = max;
|
---|
| 467 | }
|
---|
| 468 | };
|
---|
| 469 |
|
---|
| 470 | ColorScale.prototype.setMin = function (min) {
|
---|
| 471 | this.clearMinValue = min;
|
---|
| 472 |
|
---|
| 473 | if (typeof this.normalize === 'function') {
|
---|
| 474 | this.minValue = this.normalize(min);
|
---|
| 475 | } else {
|
---|
| 476 | this.minValue = min;
|
---|
| 477 | }
|
---|
| 478 | };
|
---|
| 479 |
|
---|
| 480 | ColorScale.prototype.setNormalizeFunction = function (f) {
|
---|
| 481 | if (f === 'polynomial') {
|
---|
| 482 | this.normalize = function (value) {
|
---|
| 483 | return Math.pow(value, 0.2);
|
---|
| 484 | };
|
---|
| 485 | } else if (f === 'linear') {
|
---|
| 486 | delete this.normalize;
|
---|
| 487 | } else {
|
---|
| 488 | this.normalize = f;
|
---|
| 489 | }
|
---|
| 490 | this.setMin(this.clearMinValue);
|
---|
| 491 | this.setMax(this.clearMaxValue);
|
---|
| 492 | };
|
---|
| 493 |
|
---|
| 494 | ColorScale.prototype.vectorAdd = function (vector1, vector2) {
|
---|
| 495 | var vector = [];
|
---|
| 496 | for (var i = 0; i < vector1.length; i++) {
|
---|
| 497 | vector[i] = vector1[i] + vector2[i];
|
---|
| 498 | }
|
---|
| 499 | return vector;
|
---|
| 500 | };
|
---|
| 501 |
|
---|
| 502 | ColorScale.prototype.vectorLength = function (vector) {
|
---|
| 503 | var result = 0;
|
---|
| 504 | for (var i = 0; i < vector.length; i++) {
|
---|
| 505 | result += vector[i] * vector[i];
|
---|
| 506 | }
|
---|
| 507 | return Math.sqrt(result);
|
---|
| 508 | };
|
---|
| 509 |
|
---|
| 510 | ColorScale.prototype.vectorMult = function (vector, num) {
|
---|
| 511 | var result = [];
|
---|
| 512 | for (var i = 0; i < vector.length; i++) {
|
---|
| 513 | result[i] = vector[i] * num;
|
---|
| 514 | }
|
---|
| 515 | return result;
|
---|
| 516 | };
|
---|
| 517 |
|
---|
| 518 | ColorScale.prototype.vectorSubtract = function (vector1, vector2) {
|
---|
| 519 | var vector = [];
|
---|
| 520 | for (var i = 0; i < vector1.length; i++) {
|
---|
| 521 | vector[i] = vector1[i] - vector2[i];
|
---|
| 522 | }
|
---|
| 523 | return vector;
|
---|
| 524 | };
|
---|
| 525 |
|
---|
| 526 | ColorScale.prototype.vectorToNum = function (vector) {
|
---|
| 527 | var num = 0;
|
---|
| 528 | for (var i = 0; i < vector.length; i++) {
|
---|
| 529 | num += Math.round(vector[i]) * Math.pow(256, vector.length - i - 1);
|
---|
| 530 | }
|
---|
| 531 | return num;
|
---|
| 532 | };
|
---|
| 533 |
|
---|
| 534 | JQVMap.prototype.applyTransform = function () {
|
---|
| 535 | var maxTransX, maxTransY, minTransX, minTransY;
|
---|
| 536 | if (this.defaultWidth * this.scale <= this.width) {
|
---|
| 537 | maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
|
---|
| 538 | minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
|
---|
| 539 | } else {
|
---|
| 540 | maxTransX = 0;
|
---|
| 541 | minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
|
---|
| 542 | }
|
---|
| 543 |
|
---|
| 544 | if (this.defaultHeight * this.scale <= this.height) {
|
---|
| 545 | maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
|
---|
| 546 | minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
|
---|
| 547 | } else {
|
---|
| 548 | maxTransY = 0;
|
---|
| 549 | minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
|
---|
| 550 | }
|
---|
| 551 |
|
---|
| 552 | if (this.transY > maxTransY) {
|
---|
| 553 | this.transY = maxTransY;
|
---|
| 554 | } else if (this.transY < minTransY) {
|
---|
| 555 | this.transY = minTransY;
|
---|
| 556 | }
|
---|
| 557 | if (this.transX > maxTransX) {
|
---|
| 558 | this.transX = maxTransX;
|
---|
| 559 | } else if (this.transX < minTransX) {
|
---|
| 560 | this.transX = minTransX;
|
---|
| 561 | }
|
---|
| 562 |
|
---|
| 563 | this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
|
---|
| 564 | };
|
---|
| 565 |
|
---|
| 566 | JQVMap.prototype.bindZoomButtons = function () {
|
---|
| 567 | var map = this;
|
---|
| 568 | this.container.find('.jqvmap-zoomin').click(function(){
|
---|
| 569 | map.zoomIn();
|
---|
| 570 | });
|
---|
| 571 | this.container.find('.jqvmap-zoomout').click(function(){
|
---|
| 572 | map.zoomOut();
|
---|
| 573 | });
|
---|
| 574 | };
|
---|
| 575 |
|
---|
| 576 | JQVMap.prototype.deselect = function (cc, path) {
|
---|
| 577 | cc = cc.toLowerCase();
|
---|
| 578 | path = path || jQuery('#' + this.getCountryId(cc))[0];
|
---|
| 579 |
|
---|
| 580 | if (this.isSelected(cc)) {
|
---|
| 581 | this.selectedRegions.splice(this.selectIndex(cc), 1);
|
---|
| 582 |
|
---|
| 583 | jQuery(this.container).trigger('regionDeselect.jqvmap', [cc]);
|
---|
| 584 | path.currentFillColor = path.getOriginalFill();
|
---|
| 585 | path.setFill(path.getOriginalFill());
|
---|
| 586 | } else {
|
---|
| 587 | for (var key in this.countries) {
|
---|
| 588 | this.selectedRegions.splice(this.selectedRegions.indexOf(key), 1);
|
---|
| 589 | this.countries[key].currentFillColor = this.color;
|
---|
| 590 | this.countries[key].setFill(this.color);
|
---|
| 591 | }
|
---|
| 592 | }
|
---|
| 593 | };
|
---|
| 594 |
|
---|
| 595 | JQVMap.prototype.getCountryId = function (cc) {
|
---|
| 596 | return 'jqvmap' + this.index + '_' + cc;
|
---|
| 597 | };
|
---|
| 598 |
|
---|
| 599 | JQVMap.prototype.getPin = function(cc){
|
---|
| 600 | var pinObj = jQuery('#' + this.getPinId(cc));
|
---|
| 601 | return pinObj.html();
|
---|
| 602 | };
|
---|
| 603 |
|
---|
| 604 | JQVMap.prototype.getPinId = function (cc) {
|
---|
| 605 | return this.getCountryId(cc) + '_pin';
|
---|
| 606 | };
|
---|
| 607 |
|
---|
| 608 | JQVMap.prototype.getPins = function(){
|
---|
| 609 | var pins = this.container.find('.jqvmap-pin');
|
---|
| 610 | var ret = {};
|
---|
| 611 | jQuery.each(pins, function(index, pinObj){
|
---|
| 612 | pinObj = jQuery(pinObj);
|
---|
| 613 | var cc = pinObj.attr('for').toLowerCase();
|
---|
| 614 | var pinContent = pinObj.html();
|
---|
| 615 | ret[cc] = pinContent;
|
---|
| 616 | });
|
---|
| 617 | return JSON.stringify(ret);
|
---|
| 618 | };
|
---|
| 619 |
|
---|
| 620 | JQVMap.prototype.highlight = function (cc, path) {
|
---|
| 621 | path = path || jQuery('#' + this.getCountryId(cc))[0];
|
---|
| 622 | if (this.hoverOpacity) {
|
---|
| 623 | path.setOpacity(this.hoverOpacity);
|
---|
| 624 | } else if (this.hoverColors && (cc in this.hoverColors)) {
|
---|
| 625 | path.currentFillColor = path.getFill() + '';
|
---|
| 626 | path.setFill(this.hoverColors[cc]);
|
---|
| 627 | } else if (this.hoverColor) {
|
---|
| 628 | path.currentFillColor = path.getFill() + '';
|
---|
| 629 | path.setFill(this.hoverColor);
|
---|
| 630 | }
|
---|
| 631 | };
|
---|
| 632 |
|
---|
| 633 | JQVMap.prototype.isSelected = function(cc) {
|
---|
| 634 | return this.selectIndex(cc) >= 0;
|
---|
| 635 | };
|
---|
| 636 |
|
---|
| 637 | JQVMap.prototype.makeDraggable = function () {
|
---|
| 638 | var mouseDown = false;
|
---|
| 639 | var oldPageX, oldPageY;
|
---|
| 640 | var self = this;
|
---|
| 641 |
|
---|
| 642 | self.isMoving = false;
|
---|
| 643 | self.isMovingTimeout = false;
|
---|
| 644 |
|
---|
| 645 | var lastTouchCount;
|
---|
| 646 | var touchCenterX;
|
---|
| 647 | var touchCenterY;
|
---|
| 648 | var touchStartDistance;
|
---|
| 649 | var touchStartScale;
|
---|
| 650 | var touchX;
|
---|
| 651 | var touchY;
|
---|
| 652 |
|
---|
| 653 | this.container.mousemove(function (e) {
|
---|
| 654 |
|
---|
| 655 | if (mouseDown) {
|
---|
| 656 | self.transX -= (oldPageX - e.pageX) / self.scale;
|
---|
| 657 | self.transY -= (oldPageY - e.pageY) / self.scale;
|
---|
| 658 |
|
---|
| 659 | self.applyTransform();
|
---|
| 660 |
|
---|
| 661 | oldPageX = e.pageX;
|
---|
| 662 | oldPageY = e.pageY;
|
---|
| 663 |
|
---|
| 664 | self.isMoving = true;
|
---|
| 665 | if (self.isMovingTimeout) {
|
---|
| 666 | clearTimeout(self.isMovingTimeout);
|
---|
| 667 | }
|
---|
| 668 |
|
---|
| 669 | self.container.trigger('drag');
|
---|
| 670 | }
|
---|
| 671 |
|
---|
| 672 | return false;
|
---|
| 673 |
|
---|
| 674 | }).mousedown(function (e) {
|
---|
| 675 |
|
---|
| 676 | mouseDown = true;
|
---|
| 677 | oldPageX = e.pageX;
|
---|
| 678 | oldPageY = e.pageY;
|
---|
| 679 |
|
---|
| 680 | return false;
|
---|
| 681 |
|
---|
| 682 | }).mouseup(function () {
|
---|
| 683 |
|
---|
| 684 | mouseDown = false;
|
---|
| 685 |
|
---|
| 686 | clearTimeout(self.isMovingTimeout);
|
---|
| 687 | self.isMovingTimeout = setTimeout(function () {
|
---|
| 688 | self.isMoving = false;
|
---|
| 689 | }, 100);
|
---|
| 690 |
|
---|
| 691 | return false;
|
---|
| 692 |
|
---|
| 693 | }).mouseout(function () {
|
---|
| 694 |
|
---|
| 695 | if(mouseDown && self.isMoving){
|
---|
| 696 |
|
---|
| 697 | clearTimeout(self.isMovingTimeout);
|
---|
| 698 | self.isMovingTimeout = setTimeout(function () {
|
---|
| 699 | mouseDown = false;
|
---|
| 700 | self.isMoving = false;
|
---|
| 701 | }, 100);
|
---|
| 702 |
|
---|
| 703 | return false;
|
---|
| 704 | }
|
---|
| 705 | });
|
---|
| 706 |
|
---|
| 707 | jQuery(this.container).bind('touchmove', function (e) {
|
---|
| 708 |
|
---|
| 709 | var offset;
|
---|
| 710 | var scale;
|
---|
| 711 | var touches = e.originalEvent.touches;
|
---|
| 712 | var transformXOld;
|
---|
| 713 | var transformYOld;
|
---|
| 714 |
|
---|
| 715 | if (touches.length === 1) {
|
---|
| 716 | if (lastTouchCount === 1) {
|
---|
| 717 |
|
---|
| 718 | if(touchX === touches[0].pageX && touchY === touches[0].pageY){
|
---|
| 719 | return;
|
---|
| 720 | }
|
---|
| 721 |
|
---|
| 722 | transformXOld = self.transX;
|
---|
| 723 | transformYOld = self.transY;
|
---|
| 724 |
|
---|
| 725 | self.transX -= (touchX - touches[0].pageX) / self.scale;
|
---|
| 726 | self.transY -= (touchY - touches[0].pageY) / self.scale;
|
---|
| 727 |
|
---|
| 728 | self.applyTransform();
|
---|
| 729 |
|
---|
| 730 | if (transformXOld !== self.transX || transformYOld !== self.transY) {
|
---|
| 731 | e.preventDefault();
|
---|
| 732 | }
|
---|
| 733 |
|
---|
| 734 | self.isMoving = true;
|
---|
| 735 | if (self.isMovingTimeout) {
|
---|
| 736 | clearTimeout(self.isMovingTimeout);
|
---|
| 737 | }
|
---|
| 738 | }
|
---|
| 739 |
|
---|
| 740 | touchX = touches[0].pageX;
|
---|
| 741 | touchY = touches[0].pageY;
|
---|
| 742 |
|
---|
| 743 | } else if (touches.length === 2) {
|
---|
| 744 |
|
---|
| 745 | if (lastTouchCount === 2) {
|
---|
| 746 | scale = Math.sqrt(
|
---|
| 747 | Math.pow(touches[0].pageX - touches[1].pageX, 2) +
|
---|
| 748 | Math.pow(touches[0].pageY - touches[1].pageY, 2)
|
---|
| 749 | ) / touchStartDistance;
|
---|
| 750 |
|
---|
| 751 | self.setScale(
|
---|
| 752 | touchStartScale * scale,
|
---|
| 753 | touchCenterX,
|
---|
| 754 | touchCenterY
|
---|
| 755 | );
|
---|
| 756 |
|
---|
| 757 | e.preventDefault();
|
---|
| 758 |
|
---|
| 759 | } else {
|
---|
| 760 |
|
---|
| 761 | offset = jQuery(self.container).offset();
|
---|
| 762 | if (touches[0].pageX > touches[1].pageX) {
|
---|
| 763 | touchCenterX = touches[1].pageX + (touches[0].pageX - touches[1].pageX) / 2;
|
---|
| 764 | } else {
|
---|
| 765 | touchCenterX = touches[0].pageX + (touches[1].pageX - touches[0].pageX) / 2;
|
---|
| 766 | }
|
---|
| 767 |
|
---|
| 768 | if (touches[0].pageY > touches[1].pageY) {
|
---|
| 769 | touchCenterY = touches[1].pageY + (touches[0].pageY - touches[1].pageY) / 2;
|
---|
| 770 | } else {
|
---|
| 771 | touchCenterY = touches[0].pageY + (touches[1].pageY - touches[0].pageY) / 2;
|
---|
| 772 | }
|
---|
| 773 |
|
---|
| 774 | touchCenterX -= offset.left;
|
---|
| 775 | touchCenterY -= offset.top;
|
---|
| 776 | touchStartScale = self.scale;
|
---|
| 777 |
|
---|
| 778 | touchStartDistance = Math.sqrt(
|
---|
| 779 | Math.pow(touches[0].pageX - touches[1].pageX, 2) +
|
---|
| 780 | Math.pow(touches[0].pageY - touches[1].pageY, 2)
|
---|
| 781 | );
|
---|
| 782 | }
|
---|
| 783 | }
|
---|
| 784 |
|
---|
| 785 | lastTouchCount = touches.length;
|
---|
| 786 | });
|
---|
| 787 |
|
---|
| 788 | jQuery(this.container).bind('touchstart', function () {
|
---|
| 789 | lastTouchCount = 0;
|
---|
| 790 | });
|
---|
| 791 |
|
---|
| 792 | jQuery(this.container).bind('touchend', function () {
|
---|
| 793 | lastTouchCount = 0;
|
---|
| 794 | });
|
---|
| 795 | };
|
---|
| 796 |
|
---|
| 797 | JQVMap.prototype.placePins = function(pins, pinMode){
|
---|
| 798 | var map = this;
|
---|
| 799 |
|
---|
| 800 | if(!pinMode || (pinMode !== 'content' && pinMode !== 'id')) {
|
---|
| 801 | pinMode = 'content';
|
---|
| 802 | }
|
---|
| 803 |
|
---|
| 804 | if(pinMode === 'content') {//treat pin as content
|
---|
| 805 | jQuery.each(pins, function(index, pin){
|
---|
| 806 | if(jQuery('#' + map.getCountryId(index)).length === 0){
|
---|
| 807 | return;
|
---|
| 808 | }
|
---|
| 809 |
|
---|
| 810 | var pinIndex = map.getPinId(index);
|
---|
| 811 | var $pin = jQuery('#' + pinIndex);
|
---|
| 812 | if($pin.length > 0){
|
---|
| 813 | $pin.remove();
|
---|
| 814 | }
|
---|
| 815 | map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap-pin" style="position:absolute">' + pin + '</div>');
|
---|
| 816 | });
|
---|
| 817 | } else { //treat pin as id of an html content
|
---|
| 818 | jQuery.each(pins, function(index, pin){
|
---|
| 819 | if(jQuery('#' + map.getCountryId(index)).length === 0){
|
---|
| 820 | return;
|
---|
| 821 | }
|
---|
| 822 | var pinIndex = map.getPinId(index);
|
---|
| 823 | var $pin = jQuery('#' + pinIndex);
|
---|
| 824 | if($pin.length > 0){
|
---|
| 825 | $pin.remove();
|
---|
| 826 | }
|
---|
| 827 | map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap-pin" style="position:absolute"></div>');
|
---|
| 828 | $pin.append(jQuery('#' + pin));
|
---|
| 829 | });
|
---|
| 830 | }
|
---|
| 831 |
|
---|
| 832 | this.positionPins();
|
---|
| 833 | if(!this.pinHandlers){
|
---|
| 834 | this.pinHandlers = true;
|
---|
| 835 | var positionFix = function(){
|
---|
| 836 | map.positionPins();
|
---|
| 837 | };
|
---|
| 838 | this.container.bind('zoomIn', positionFix)
|
---|
| 839 | .bind('zoomOut', positionFix)
|
---|
| 840 | .bind('drag', positionFix);
|
---|
| 841 | }
|
---|
| 842 | };
|
---|
| 843 |
|
---|
| 844 | JQVMap.prototype.positionPins = function(){
|
---|
| 845 | var map = this;
|
---|
| 846 | var pins = this.container.find('.jqvmap-pin');
|
---|
| 847 | jQuery.each(pins, function(index, pinObj){
|
---|
| 848 | pinObj = jQuery(pinObj);
|
---|
| 849 | var countryId = map.getCountryId(pinObj.attr('for').toLowerCase());
|
---|
| 850 | var countryObj = jQuery('#' + countryId);
|
---|
| 851 | var bbox = countryObj[0].getBBox();
|
---|
| 852 |
|
---|
| 853 | var scale = map.scale;
|
---|
| 854 | var rootCoords = map.canvas.rootGroup.getBoundingClientRect();
|
---|
| 855 | var mapCoords = map.container[0].getBoundingClientRect();
|
---|
| 856 | var coords = {
|
---|
| 857 | left: rootCoords.left - mapCoords.left,
|
---|
| 858 | top: rootCoords.top - mapCoords.top
|
---|
| 859 | };
|
---|
| 860 |
|
---|
| 861 | var middleX = (bbox.x * scale) + ((bbox.width * scale) / 2);
|
---|
| 862 | var middleY = (bbox.y * scale) + ((bbox.height * scale) / 2);
|
---|
| 863 |
|
---|
| 864 | pinObj.css({
|
---|
| 865 | left: coords.left + middleX - (pinObj.width() / 2),
|
---|
| 866 | top: coords.top + middleY - (pinObj.height() / 2)
|
---|
| 867 | });
|
---|
| 868 | });
|
---|
| 869 | };
|
---|
| 870 |
|
---|
| 871 | JQVMap.prototype.removePin = function(cc) {
|
---|
| 872 | cc = cc.toLowerCase();
|
---|
| 873 | jQuery('#' + this.getPinId(cc)).remove();
|
---|
| 874 | };
|
---|
| 875 |
|
---|
| 876 | JQVMap.prototype.removePins = function(){
|
---|
| 877 | this.container.find('.jqvmap-pin').remove();
|
---|
| 878 | };
|
---|
| 879 |
|
---|
| 880 | JQVMap.prototype.reset = function () {
|
---|
| 881 | for (var key in this.countries) {
|
---|
| 882 | this.countries[key].setFill(this.color);
|
---|
| 883 | }
|
---|
| 884 | this.scale = this.baseScale;
|
---|
| 885 | this.transX = this.baseTransX;
|
---|
| 886 | this.transY = this.baseTransY;
|
---|
| 887 | this.applyTransform();
|
---|
| 888 | this.zoomCurStep = 1;
|
---|
| 889 | };
|
---|
| 890 |
|
---|
| 891 | JQVMap.prototype.resize = function () {
|
---|
| 892 | var curBaseScale = this.baseScale;
|
---|
| 893 | if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
|
---|
| 894 | this.baseScale = this.height / this.defaultHeight;
|
---|
| 895 | this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
|
---|
| 896 | } else {
|
---|
| 897 | this.baseScale = this.width / this.defaultWidth;
|
---|
| 898 | this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
|
---|
| 899 | }
|
---|
| 900 | this.scale *= this.baseScale / curBaseScale;
|
---|
| 901 | this.transX *= this.baseScale / curBaseScale;
|
---|
| 902 | this.transY *= this.baseScale / curBaseScale;
|
---|
| 903 | };
|
---|
| 904 |
|
---|
| 905 | JQVMap.prototype.select = function (cc, path) {
|
---|
| 906 | cc = cc.toLowerCase();
|
---|
| 907 | path = path || jQuery('#' + this.getCountryId(cc))[0];
|
---|
| 908 |
|
---|
| 909 | if (!this.isSelected(cc)) {
|
---|
| 910 | if (this.multiSelectRegion) {
|
---|
| 911 | this.selectedRegions.push(cc);
|
---|
| 912 | } else {
|
---|
| 913 | this.selectedRegions = [cc];
|
---|
| 914 | }
|
---|
| 915 |
|
---|
| 916 | jQuery(this.container).trigger('regionSelect.jqvmap', [cc]);
|
---|
| 917 | if (this.selectedColor && path) {
|
---|
| 918 | path.currentFillColor = this.selectedColor;
|
---|
| 919 | path.setFill(this.selectedColor);
|
---|
| 920 | }
|
---|
| 921 | }
|
---|
| 922 | };
|
---|
| 923 |
|
---|
| 924 | JQVMap.prototype.selectIndex = function (cc) {
|
---|
| 925 | cc = cc.toLowerCase();
|
---|
| 926 | for (var i = 0; i < this.selectedRegions.length; i++) {
|
---|
| 927 | if (cc === this.selectedRegions[i]) {
|
---|
| 928 | return i;
|
---|
| 929 | }
|
---|
| 930 | }
|
---|
| 931 | return -1;
|
---|
| 932 | };
|
---|
| 933 |
|
---|
| 934 | JQVMap.prototype.setBackgroundColor = function (backgroundColor) {
|
---|
| 935 | this.container.css('background-color', backgroundColor);
|
---|
| 936 | };
|
---|
| 937 |
|
---|
| 938 | JQVMap.prototype.setColors = function (key, color) {
|
---|
| 939 | if (typeof key === 'string') {
|
---|
| 940 | this.countries[key].setFill(color);
|
---|
| 941 | this.countries[key].setAttribute('original', color);
|
---|
| 942 | } else {
|
---|
| 943 | var colors = key;
|
---|
| 944 |
|
---|
| 945 | for (var code in colors) {
|
---|
| 946 | if (this.countries[code]) {
|
---|
| 947 | this.countries[code].setFill(colors[code]);
|
---|
| 948 | this.countries[code].setAttribute('original', colors[code]);
|
---|
| 949 | }
|
---|
| 950 | }
|
---|
| 951 | }
|
---|
| 952 | };
|
---|
| 953 |
|
---|
| 954 | JQVMap.prototype.setNormalizeFunction = function (f) {
|
---|
| 955 | this.colorScale.setNormalizeFunction(f);
|
---|
| 956 |
|
---|
| 957 | if (this.values) {
|
---|
| 958 | this.setValues(this.values);
|
---|
| 959 | }
|
---|
| 960 | };
|
---|
| 961 |
|
---|
| 962 | JQVMap.prototype.setScale = function (scale) {
|
---|
| 963 | this.scale = scale;
|
---|
| 964 | this.applyTransform();
|
---|
| 965 | };
|
---|
| 966 |
|
---|
| 967 | JQVMap.prototype.setScaleColors = function (colors) {
|
---|
| 968 | this.colorScale.setColors(colors);
|
---|
| 969 |
|
---|
| 970 | if (this.values) {
|
---|
| 971 | this.setValues(this.values);
|
---|
| 972 | }
|
---|
| 973 | };
|
---|
| 974 |
|
---|
| 975 | JQVMap.prototype.setValues = function (values) {
|
---|
| 976 | var max = 0,
|
---|
| 977 | min = Number.MAX_VALUE,
|
---|
| 978 | val;
|
---|
| 979 |
|
---|
| 980 | for (var cc in values) {
|
---|
| 981 | cc = cc.toLowerCase();
|
---|
| 982 | val = parseFloat(values[cc]);
|
---|
| 983 |
|
---|
| 984 | if (isNaN(val)) {
|
---|
| 985 | continue;
|
---|
| 986 | }
|
---|
| 987 | if (val > max) {
|
---|
| 988 | max = values[cc];
|
---|
| 989 | }
|
---|
| 990 | if (val < min) {
|
---|
| 991 | min = val;
|
---|
| 992 | }
|
---|
| 993 | }
|
---|
| 994 |
|
---|
| 995 | if (min === max) {
|
---|
| 996 | max++;
|
---|
| 997 | }
|
---|
| 998 |
|
---|
| 999 | this.colorScale.setMin(min);
|
---|
| 1000 | this.colorScale.setMax(max);
|
---|
| 1001 |
|
---|
| 1002 | var colors = {};
|
---|
| 1003 | for (cc in values) {
|
---|
| 1004 | cc = cc.toLowerCase();
|
---|
| 1005 | val = parseFloat(values[cc]);
|
---|
| 1006 | colors[cc] = isNaN(val) ? this.color : this.colorScale.getColor(val);
|
---|
| 1007 | }
|
---|
| 1008 | this.setColors(colors);
|
---|
| 1009 | this.values = values;
|
---|
| 1010 | };
|
---|
| 1011 |
|
---|
| 1012 | JQVMap.prototype.unhighlight = function (cc, path) {
|
---|
| 1013 | cc = cc.toLowerCase();
|
---|
| 1014 | path = path || jQuery('#' + this.getCountryId(cc))[0];
|
---|
| 1015 | path.setOpacity(1);
|
---|
| 1016 | if (path.currentFillColor) {
|
---|
| 1017 | path.setFill(path.currentFillColor);
|
---|
| 1018 | }
|
---|
| 1019 | };
|
---|
| 1020 |
|
---|
| 1021 | JQVMap.prototype.zoomIn = function () {
|
---|
| 1022 | var map = this;
|
---|
| 1023 | var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
|
---|
| 1024 |
|
---|
| 1025 | if (map.zoomCurStep < map.zoomMaxStep) {
|
---|
| 1026 | map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
|
---|
| 1027 | map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
|
---|
| 1028 | map.setScale(map.scale * map.zoomStep);
|
---|
| 1029 | map.zoomCurStep++;
|
---|
| 1030 |
|
---|
| 1031 | var $slider = jQuery('#zoomSlider');
|
---|
| 1032 |
|
---|
| 1033 | $slider.css('top', parseInt($slider.css('top'), 10) - sliderDelta);
|
---|
| 1034 |
|
---|
| 1035 | map.container.trigger('zoomIn');
|
---|
| 1036 | }
|
---|
| 1037 | };
|
---|
| 1038 |
|
---|
| 1039 | JQVMap.prototype.zoomOut = function () {
|
---|
| 1040 | var map = this;
|
---|
| 1041 | var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
|
---|
| 1042 |
|
---|
| 1043 | if (map.zoomCurStep > 1) {
|
---|
| 1044 | map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
|
---|
| 1045 | map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
|
---|
| 1046 | map.setScale(map.scale / map.zoomStep);
|
---|
| 1047 | map.zoomCurStep--;
|
---|
| 1048 |
|
---|
| 1049 | var $slider = jQuery('#zoomSlider');
|
---|
| 1050 |
|
---|
| 1051 | $slider.css('top', parseInt($slider.css('top'), 10) + sliderDelta);
|
---|
| 1052 |
|
---|
| 1053 | map.container.trigger('zoomOut');
|
---|
| 1054 | }
|
---|
| 1055 | };
|
---|
| 1056 |
|
---|
| 1057 | VectorCanvas.prototype.applyTransformParams = function (scale, transX, transY) {
|
---|
| 1058 | if (this.mode === 'svg') {
|
---|
| 1059 | this.rootGroup.setAttribute('transform', 'scale(' + scale + ') translate(' + transX + ', ' + transY + ')');
|
---|
| 1060 | } else {
|
---|
| 1061 | this.rootGroup.coordorigin = (this.width - transX) + ',' + (this.height - transY);
|
---|
| 1062 | this.rootGroup.coordsize = this.width / scale + ',' + this.height / scale;
|
---|
| 1063 | }
|
---|
| 1064 | };
|
---|
| 1065 |
|
---|
| 1066 | VectorCanvas.prototype.createGroup = function (isRoot) {
|
---|
| 1067 | var node;
|
---|
| 1068 | if (this.mode === 'svg') {
|
---|
| 1069 | node = this.createSvgNode('g');
|
---|
| 1070 | } else {
|
---|
| 1071 | node = this.createVmlNode('group');
|
---|
| 1072 | node.style.width = this.width + 'px';
|
---|
| 1073 | node.style.height = this.height + 'px';
|
---|
| 1074 | node.style.left = '0px';
|
---|
| 1075 | node.style.top = '0px';
|
---|
| 1076 | node.coordorigin = '0 0';
|
---|
| 1077 | node.coordsize = this.width + ' ' + this.height;
|
---|
| 1078 | }
|
---|
| 1079 |
|
---|
| 1080 | if (isRoot) {
|
---|
| 1081 | this.rootGroup = node;
|
---|
| 1082 | }
|
---|
| 1083 | return node;
|
---|
| 1084 | };
|
---|
| 1085 |
|
---|
| 1086 | VectorCanvas.prototype.createPath = function (config) {
|
---|
| 1087 | var node;
|
---|
| 1088 | if (this.mode === 'svg') {
|
---|
| 1089 | node = this.createSvgNode('path');
|
---|
| 1090 | node.setAttribute('d', config.path);
|
---|
| 1091 |
|
---|
| 1092 | if (this.params.borderColor !== null) {
|
---|
| 1093 | node.setAttribute('stroke', this.params.borderColor);
|
---|
| 1094 | }
|
---|
| 1095 | if (this.params.borderWidth > 0) {
|
---|
| 1096 | node.setAttribute('stroke-width', this.params.borderWidth);
|
---|
| 1097 | node.setAttribute('stroke-linecap', 'round');
|
---|
| 1098 | node.setAttribute('stroke-linejoin', 'round');
|
---|
| 1099 | }
|
---|
| 1100 | if (this.params.borderOpacity > 0) {
|
---|
| 1101 | node.setAttribute('stroke-opacity', this.params.borderOpacity);
|
---|
| 1102 | }
|
---|
| 1103 |
|
---|
| 1104 | node.setFill = function (color) {
|
---|
| 1105 | this.setAttribute('fill', color);
|
---|
| 1106 | if (this.getAttribute('original') === null) {
|
---|
| 1107 | this.setAttribute('original', color);
|
---|
| 1108 | }
|
---|
| 1109 | };
|
---|
| 1110 |
|
---|
| 1111 | node.getFill = function () {
|
---|
| 1112 | return this.getAttribute('fill');
|
---|
| 1113 | };
|
---|
| 1114 |
|
---|
| 1115 | node.getOriginalFill = function () {
|
---|
| 1116 | return this.getAttribute('original');
|
---|
| 1117 | };
|
---|
| 1118 |
|
---|
| 1119 | node.setOpacity = function (opacity) {
|
---|
| 1120 | this.setAttribute('fill-opacity', opacity);
|
---|
| 1121 | };
|
---|
| 1122 | } else {
|
---|
| 1123 | node = this.createVmlNode('shape');
|
---|
| 1124 | node.coordorigin = '0 0';
|
---|
| 1125 | node.coordsize = this.width + ' ' + this.height;
|
---|
| 1126 | node.style.width = this.width + 'px';
|
---|
| 1127 | node.style.height = this.height + 'px';
|
---|
| 1128 | node.fillcolor = JQVMap.defaultFillColor;
|
---|
| 1129 | node.stroked = false;
|
---|
| 1130 | node.path = VectorCanvas.pathSvgToVml(config.path);
|
---|
| 1131 |
|
---|
| 1132 | var scale = this.createVmlNode('skew');
|
---|
| 1133 | scale.on = true;
|
---|
| 1134 | scale.matrix = '0.01,0,0,0.01,0,0';
|
---|
| 1135 | scale.offset = '0,0';
|
---|
| 1136 |
|
---|
| 1137 | node.appendChild(scale);
|
---|
| 1138 |
|
---|
| 1139 | var fill = this.createVmlNode('fill');
|
---|
| 1140 | node.appendChild(fill);
|
---|
| 1141 |
|
---|
| 1142 | node.setFill = function (color) {
|
---|
| 1143 | this.getElementsByTagName('fill')[0].color = color;
|
---|
| 1144 | if (this.getAttribute('original') === null) {
|
---|
| 1145 | this.setAttribute('original', color);
|
---|
| 1146 | }
|
---|
| 1147 | };
|
---|
| 1148 |
|
---|
| 1149 | node.getFill = function () {
|
---|
| 1150 | return this.getElementsByTagName('fill')[0].color;
|
---|
| 1151 | };
|
---|
| 1152 | node.getOriginalFill = function () {
|
---|
| 1153 | return this.getAttribute('original');
|
---|
| 1154 | };
|
---|
| 1155 | node.setOpacity = function (opacity) {
|
---|
| 1156 | this.getElementsByTagName('fill')[0].opacity = parseInt(opacity * 100, 10) + '%';
|
---|
| 1157 | };
|
---|
| 1158 | }
|
---|
| 1159 | return node;
|
---|
| 1160 | };
|
---|
| 1161 |
|
---|
| 1162 | VectorCanvas.prototype.pathSvgToVml = function (path) {
|
---|
| 1163 | var result = '';
|
---|
| 1164 | var cx = 0, cy = 0, ctrlx, ctrly;
|
---|
| 1165 |
|
---|
| 1166 | return path.replace(/([MmLlHhVvCcSs])((?:-?(?:\d+)?(?:\.\d+)?,?\s?)+)/g, function (segment, letter, coords) {
|
---|
| 1167 | coords = coords.replace(/(\d)-/g, '$1,-').replace(/\s+/g, ',').split(',');
|
---|
| 1168 | if (!coords[0]) {
|
---|
| 1169 | coords.shift();
|
---|
| 1170 | }
|
---|
| 1171 |
|
---|
| 1172 | for (var i = 0, l = coords.length; i < l; i++) {
|
---|
| 1173 | coords[i] = Math.round(100 * coords[i]);
|
---|
| 1174 | }
|
---|
| 1175 |
|
---|
| 1176 | switch (letter) {
|
---|
| 1177 | case 'm':
|
---|
| 1178 | cx += coords[0];
|
---|
| 1179 | cy += coords[1];
|
---|
| 1180 | result = 't' + coords.join(',');
|
---|
| 1181 | break;
|
---|
| 1182 |
|
---|
| 1183 | case 'M':
|
---|
| 1184 | cx = coords[0];
|
---|
| 1185 | cy = coords[1];
|
---|
| 1186 | result = 'm' + coords.join(',');
|
---|
| 1187 | break;
|
---|
| 1188 |
|
---|
| 1189 | case 'l':
|
---|
| 1190 | cx += coords[0];
|
---|
| 1191 | cy += coords[1];
|
---|
| 1192 | result = 'r' + coords.join(',');
|
---|
| 1193 | break;
|
---|
| 1194 |
|
---|
| 1195 | case 'L':
|
---|
| 1196 | cx = coords[0];
|
---|
| 1197 | cy = coords[1];
|
---|
| 1198 | result = 'l' + coords.join(',');
|
---|
| 1199 | break;
|
---|
| 1200 |
|
---|
| 1201 | case 'h':
|
---|
| 1202 | cx += coords[0];
|
---|
| 1203 | result = 'r' + coords[0] + ',0';
|
---|
| 1204 | break;
|
---|
| 1205 |
|
---|
| 1206 | case 'H':
|
---|
| 1207 | cx = coords[0];
|
---|
| 1208 | result = 'l' + cx + ',' + cy;
|
---|
| 1209 | break;
|
---|
| 1210 |
|
---|
| 1211 | case 'v':
|
---|
| 1212 | cy += coords[0];
|
---|
| 1213 | result = 'r0,' + coords[0];
|
---|
| 1214 | break;
|
---|
| 1215 |
|
---|
| 1216 | case 'V':
|
---|
| 1217 | cy = coords[0];
|
---|
| 1218 | result = 'l' + cx + ',' + cy;
|
---|
| 1219 | break;
|
---|
| 1220 |
|
---|
| 1221 | case 'c':
|
---|
| 1222 | ctrlx = cx + coords[coords.length - 4];
|
---|
| 1223 | ctrly = cy + coords[coords.length - 3];
|
---|
| 1224 | cx += coords[coords.length - 2];
|
---|
| 1225 | cy += coords[coords.length - 1];
|
---|
| 1226 | result = 'v' + coords.join(',');
|
---|
| 1227 | break;
|
---|
| 1228 |
|
---|
| 1229 | case 'C':
|
---|
| 1230 | ctrlx = coords[coords.length - 4];
|
---|
| 1231 | ctrly = coords[coords.length - 3];
|
---|
| 1232 | cx = coords[coords.length - 2];
|
---|
| 1233 | cy = coords[coords.length - 1];
|
---|
| 1234 | result = 'c' + coords.join(',');
|
---|
| 1235 | break;
|
---|
| 1236 |
|
---|
| 1237 | case 's':
|
---|
| 1238 | coords.unshift(cy - ctrly);
|
---|
| 1239 | coords.unshift(cx - ctrlx);
|
---|
| 1240 | ctrlx = cx + coords[coords.length - 4];
|
---|
| 1241 | ctrly = cy + coords[coords.length - 3];
|
---|
| 1242 | cx += coords[coords.length - 2];
|
---|
| 1243 | cy += coords[coords.length - 1];
|
---|
| 1244 | result = 'v' + coords.join(',');
|
---|
| 1245 | break;
|
---|
| 1246 |
|
---|
| 1247 | case 'S':
|
---|
| 1248 | coords.unshift(cy + cy - ctrly);
|
---|
| 1249 | coords.unshift(cx + cx - ctrlx);
|
---|
| 1250 | ctrlx = coords[coords.length - 4];
|
---|
| 1251 | ctrly = coords[coords.length - 3];
|
---|
| 1252 | cx = coords[coords.length - 2];
|
---|
| 1253 | cy = coords[coords.length - 1];
|
---|
| 1254 | result = 'c' + coords.join(',');
|
---|
| 1255 | break;
|
---|
| 1256 |
|
---|
| 1257 | default:
|
---|
| 1258 | break;
|
---|
| 1259 | }
|
---|
| 1260 |
|
---|
| 1261 | return result;
|
---|
| 1262 |
|
---|
| 1263 | }).replace(/z/g, '');
|
---|
| 1264 | };
|
---|
| 1265 |
|
---|
| 1266 | VectorCanvas.prototype.setSize = function (width, height) {
|
---|
| 1267 | if (this.mode === 'svg') {
|
---|
| 1268 | this.canvas.setAttribute('width', width);
|
---|
| 1269 | this.canvas.setAttribute('height', height);
|
---|
| 1270 | } else {
|
---|
| 1271 | this.canvas.style.width = width + 'px';
|
---|
| 1272 | this.canvas.style.height = height + 'px';
|
---|
| 1273 | this.canvas.coordsize = width + ' ' + height;
|
---|
| 1274 | this.canvas.coordorigin = '0 0';
|
---|
| 1275 | if (this.rootGroup) {
|
---|
| 1276 | var paths = this.rootGroup.getElementsByTagName('shape');
|
---|
| 1277 | for (var i = 0, l = paths.length; i < l; i++) {
|
---|
| 1278 | paths[i].coordsize = width + ' ' + height;
|
---|
| 1279 | paths[i].style.width = width + 'px';
|
---|
| 1280 | paths[i].style.height = height + 'px';
|
---|
| 1281 | }
|
---|
| 1282 | this.rootGroup.coordsize = width + ' ' + height;
|
---|
| 1283 | this.rootGroup.style.width = width + 'px';
|
---|
| 1284 | this.rootGroup.style.height = height + 'px';
|
---|
| 1285 | }
|
---|
| 1286 | }
|
---|
| 1287 | this.width = width;
|
---|
| 1288 | this.height = height;
|
---|
| 1289 | };
|
---|