1285 lines
92 KiB
JavaScript
1285 lines
92 KiB
JavaScript
|
/*!
|
||
|
* JQVMap: jQuery Vector Map Library
|
||
|
* @author JQVMap <me@peterschmalfeldt.com>
|
||
|
* @version 1.5.0
|
||
|
* @link http://jqvmap.com
|
||
|
* @license https://github.com/manifestinteractive/jqvmap/blob/master/LICENSE
|
||
|
* @builddate 2016/03/15
|
||
|
*/
|
||
|
|
||
|
var VectorCanvas = function (width, height, params) {
|
||
|
this.mode = window.SVGAngle ? 'svg' : 'vml';
|
||
|
this.params = params;
|
||
|
|
||
|
if (this.mode === 'svg') {
|
||
|
this.createSvgNode = function (nodeName) {
|
||
|
return document.createElementNS(this.svgns, nodeName);
|
||
|
};
|
||
|
} else {
|
||
|
try {
|
||
|
if (!document.namespaces.rvml) {
|
||
|
document.namespaces.add('rvml', 'urn:schemas-microsoft-com:vml');
|
||
|
}
|
||
|
this.createVmlNode = function (tagName) {
|
||
|
return document.createElement('<rvml:' + tagName + ' class="rvml">');
|
||
|
};
|
||
|
} catch (e) {
|
||
|
this.createVmlNode = function (tagName) {
|
||
|
return document.createElement('<' + tagName + ' xmlns="urn:schemas-microsoft.com:vml" class="rvml">');
|
||
|
};
|
||
|
}
|
||
|
|
||
|
document.createStyleSheet().addRule('.rvml', 'behavior:url(#default#VML)');
|
||
|
}
|
||
|
|
||
|
if (this.mode === 'svg') {
|
||
|
this.canvas = this.createSvgNode('svg');
|
||
|
} else {
|
||
|
this.canvas = this.createVmlNode('group');
|
||
|
this.canvas.style.position = 'absolute';
|
||
|
}
|
||
|
|
||
|
this.setSize(width, height);
|
||
|
};
|
||
|
|
||
|
VectorCanvas.prototype = {
|
||
|
svgns: 'http://www.w3.org/2000/svg',
|
||
|
mode: 'svg',
|
||
|
width: 0,
|
||
|
height: 0,
|
||
|
canvas: null
|
||
|
};
|
||
|
|
||
|
var ColorScale = function (colors, normalizeFunction, minValue, maxValue) {
|
||
|
if (colors) {
|
||
|
this.setColors(colors);
|
||
|
}
|
||
|
if (normalizeFunction) {
|
||
|
this.setNormalizeFunction(normalizeFunction);
|
||
|
}
|
||
|
if (minValue) {
|
||
|
this.setMin(minValue);
|
||
|
}
|
||
|
if (minValue) {
|
||
|
this.setMax(maxValue);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype = {
|
||
|
colors: []
|
||
|
};
|
||
|
|
||
|
var JQVMap = function (params) {
|
||
|
params = params || {};
|
||
|
var map = this;
|
||
|
var mapData = JQVMap.maps[params.map];
|
||
|
var mapPins;
|
||
|
|
||
|
if( !mapData){
|
||
|
throw new Error('Invalid "' + params.map + '" map parameter. Please make sure you have loaded this map file in your HTML.');
|
||
|
}
|
||
|
|
||
|
this.selectedRegions = [];
|
||
|
this.multiSelectRegion = params.multiSelectRegion;
|
||
|
|
||
|
this.container = params.container;
|
||
|
|
||
|
this.defaultWidth = mapData.width;
|
||
|
this.defaultHeight = mapData.height;
|
||
|
|
||
|
this.color = params.color;
|
||
|
this.selectedColor = params.selectedColor;
|
||
|
this.hoverColor = params.hoverColor;
|
||
|
this.hoverColors = params.hoverColors;
|
||
|
this.hoverOpacity = params.hoverOpacity;
|
||
|
this.setBackgroundColor(params.backgroundColor);
|
||
|
|
||
|
this.width = params.container.width();
|
||
|
this.height = params.container.height();
|
||
|
|
||
|
this.resize();
|
||
|
|
||
|
jQuery(window).resize(function () {
|
||
|
var newWidth = params.container.width();
|
||
|
var newHeight = params.container.height();
|
||
|
|
||
|
if(newWidth && newHeight){
|
||
|
map.width = newWidth;
|
||
|
map.height = newHeight;
|
||
|
map.resize();
|
||
|
map.canvas.setSize(map.width, map.height);
|
||
|
map.applyTransform();
|
||
|
|
||
|
var resizeEvent = jQuery.Event('resize.jqvmap');
|
||
|
jQuery(params.container).trigger(resizeEvent, [newWidth, newHeight]);
|
||
|
|
||
|
if(mapPins){
|
||
|
jQuery('.jqvmap-pin').remove();
|
||
|
map.pinHandlers = false;
|
||
|
map.placePins(mapPins.pins, mapPins.mode);
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
this.canvas = new VectorCanvas(this.width, this.height, params);
|
||
|
params.container.append(this.canvas.canvas);
|
||
|
|
||
|
this.makeDraggable();
|
||
|
|
||
|
this.rootGroup = this.canvas.createGroup(true);
|
||
|
|
||
|
this.index = JQVMap.mapIndex;
|
||
|
this.label = jQuery('<div/>').addClass('jqvmap-label').appendTo(jQuery('body')).hide();
|
||
|
|
||
|
if (params.enableZoom) {
|
||
|
jQuery('<div/>').addClass('jqvmap-zoomin').text('+').appendTo(params.container);
|
||
|
jQuery('<div/>').addClass('jqvmap-zoomout').html('−').appendTo(params.container);
|
||
|
}
|
||
|
|
||
|
map.countries = [];
|
||
|
|
||
|
for (var key in mapData.paths) {
|
||
|
var path = this.canvas.createPath({
|
||
|
path: mapData.paths[key].path
|
||
|
});
|
||
|
|
||
|
path.setFill(this.color);
|
||
|
path.id = map.getCountryId(key);
|
||
|
map.countries[key] = path;
|
||
|
|
||
|
if (this.canvas.mode === 'svg') {
|
||
|
path.setAttribute('class', 'jqvmap-region');
|
||
|
} else {
|
||
|
jQuery(path).addClass('jqvmap-region');
|
||
|
}
|
||
|
|
||
|
jQuery(this.rootGroup).append(path);
|
||
|
}
|
||
|
|
||
|
jQuery(params.container).delegate(this.canvas.mode === 'svg' ? 'path' : 'shape', 'mouseover mouseout', function (e) {
|
||
|
var containerPath = e.target,
|
||
|
code = e.target.id.split('_').pop(),
|
||
|
labelShowEvent = jQuery.Event('labelShow.jqvmap'),
|
||
|
regionMouseOverEvent = jQuery.Event('regionMouseOver.jqvmap');
|
||
|
|
||
|
code = code.toLowerCase();
|
||
|
|
||
|
if (e.type === 'mouseover') {
|
||
|
jQuery(params.container).trigger(regionMouseOverEvent, [code, mapData.paths[code].name]);
|
||
|
if (!regionMouseOverEvent.isDefaultPrevented()) {
|
||
|
map.highlight(code, containerPath);
|
||
|
}
|
||
|
if (params.showTooltip) {
|
||
|
map.label.text(mapData.paths[code].name);
|
||
|
jQuery(params.container).trigger(labelShowEvent, [map.label, code]);
|
||
|
|
||
|
if (!labelShowEvent.isDefaultPrevented()) {
|
||
|
map.label.show();
|
||
|
map.labelWidth = map.label.width();
|
||
|
map.labelHeight = map.label.height();
|
||
|
}
|
||
|
}
|
||
|
} else {
|
||
|
map.unhighlight(code, containerPath);
|
||
|
|
||
|
map.label.hide();
|
||
|
jQuery(params.container).trigger('regionMouseOut.jqvmap', [code, mapData.paths[code].name]);
|
||
|
}
|
||
|
});
|
||
|
|
||
|
jQuery(params.container).delegate(this.canvas.mode === 'svg' ? 'path' : 'shape', 'click', function (regionClickEvent) {
|
||
|
|
||
|
var targetPath = regionClickEvent.target;
|
||
|
var code = regionClickEvent.target.id.split('_').pop();
|
||
|
var mapClickEvent = jQuery.Event('regionClick.jqvmap');
|
||
|
|
||
|
code = code.toLowerCase();
|
||
|
|
||
|
jQuery(params.container).trigger(mapClickEvent, [code, mapData.paths[code].name]);
|
||
|
|
||
|
if ( !params.multiSelectRegion && !mapClickEvent.isDefaultPrevented()) {
|
||
|
for (var keyPath in mapData.paths) {
|
||
|
map.countries[keyPath].currentFillColor = map.countries[keyPath].getOriginalFill();
|
||
|
map.countries[keyPath].setFill(map.countries[keyPath].getOriginalFill());
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if ( !mapClickEvent.isDefaultPrevented()) {
|
||
|
if (map.isSelected(code)) {
|
||
|
map.deselect(code, targetPath);
|
||
|
} else {
|
||
|
map.select(code, targetPath);
|
||
|
}
|
||
|
}
|
||
|
});
|
||
|
|
||
|
if (params.showTooltip) {
|
||
|
params.container.mousemove(function (e) {
|
||
|
if (map.label.is(':visible')) {
|
||
|
var left = e.pageX - 15 - map.labelWidth;
|
||
|
var top = e.pageY - 15 - map.labelHeight;
|
||
|
|
||
|
if(left < 0) {
|
||
|
left = e.pageX + 15;
|
||
|
}
|
||
|
if(top < 0) {
|
||
|
top = e.pageY + 15;
|
||
|
}
|
||
|
|
||
|
map.label.css({
|
||
|
left: left,
|
||
|
top: top
|
||
|
});
|
||
|
}
|
||
|
});
|
||
|
}
|
||
|
|
||
|
this.setColors(params.colors);
|
||
|
|
||
|
this.canvas.canvas.appendChild(this.rootGroup);
|
||
|
|
||
|
this.applyTransform();
|
||
|
|
||
|
this.colorScale = new ColorScale(params.scaleColors, params.normalizeFunction, params.valueMin, params.valueMax);
|
||
|
|
||
|
if (params.values) {
|
||
|
this.values = params.values;
|
||
|
this.setValues(params.values);
|
||
|
}
|
||
|
|
||
|
if (params.selectedRegions) {
|
||
|
if (params.selectedRegions instanceof Array) {
|
||
|
for(var k in params.selectedRegions) {
|
||
|
this.select(params.selectedRegions[k].toLowerCase());
|
||
|
}
|
||
|
} else {
|
||
|
this.select(params.selectedRegions.toLowerCase());
|
||
|
}
|
||
|
}
|
||
|
|
||
|
this.bindZoomButtons();
|
||
|
|
||
|
if(params.pins) {
|
||
|
mapPins = {
|
||
|
pins: params.pins,
|
||
|
mode: params.pinMode
|
||
|
};
|
||
|
|
||
|
this.pinHandlers = false;
|
||
|
this.placePins(params.pins, params.pinMode);
|
||
|
}
|
||
|
|
||
|
if(params.showLabels){
|
||
|
this.pinHandlers = false;
|
||
|
|
||
|
var pins = {};
|
||
|
for (key in map.countries){
|
||
|
if (typeof map.countries[key] !== 'function') {
|
||
|
if( !params.pins || !params.pins[key] ){
|
||
|
pins[key] = key.toUpperCase();
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
|
||
|
mapPins = {
|
||
|
pins: pins,
|
||
|
mode: 'content'
|
||
|
};
|
||
|
|
||
|
this.placePins(pins, 'content');
|
||
|
}
|
||
|
|
||
|
JQVMap.mapIndex++;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype = {
|
||
|
transX: 0,
|
||
|
transY: 0,
|
||
|
scale: 1,
|
||
|
baseTransX: 0,
|
||
|
baseTransY: 0,
|
||
|
baseScale: 1,
|
||
|
width: 0,
|
||
|
height: 0,
|
||
|
countries: {},
|
||
|
countriesColors: {},
|
||
|
countriesData: {},
|
||
|
zoomStep: 1.4,
|
||
|
zoomMaxStep: 4,
|
||
|
zoomCurStep: 1
|
||
|
};
|
||
|
|
||
|
JQVMap.xlink = 'http://www.w3.org/1999/xlink';
|
||
|
JQVMap.mapIndex = 1;
|
||
|
JQVMap.maps = {};
|
||
|
|
||
|
(function(){
|
||
|
|
||
|
var apiParams = {
|
||
|
colors: 1,
|
||
|
values: 1,
|
||
|
backgroundColor: 1,
|
||
|
scaleColors: 1,
|
||
|
normalizeFunction: 1,
|
||
|
enableZoom: 1,
|
||
|
showTooltip: 1,
|
||
|
borderColor: 1,
|
||
|
borderWidth: 1,
|
||
|
borderOpacity: 1,
|
||
|
selectedRegions: 1,
|
||
|
multiSelectRegion: 1
|
||
|
};
|
||
|
|
||
|
var apiEvents = {
|
||
|
onLabelShow: 'labelShow',
|
||
|
onLoad: 'load',
|
||
|
onRegionOver: 'regionMouseOver',
|
||
|
onRegionOut: 'regionMouseOut',
|
||
|
onRegionClick: 'regionClick',
|
||
|
onRegionSelect: 'regionSelect',
|
||
|
onRegionDeselect: 'regionDeselect',
|
||
|
onResize: 'resize'
|
||
|
};
|
||
|
|
||
|
jQuery.fn.vectorMap = function (options) {
|
||
|
|
||
|
var defaultParams = {
|
||
|
map: 'world_en',
|
||
|
backgroundColor: '#a5bfdd',
|
||
|
color: '#f4f3f0',
|
||
|
hoverColor: '#c9dfaf',
|
||
|
hoverColors: {},
|
||
|
selectedColor: '#c9dfaf',
|
||
|
scaleColors: ['#b6d6ff', '#005ace'],
|
||
|
normalizeFunction: 'linear',
|
||
|
enableZoom: true,
|
||
|
showTooltip: true,
|
||
|
borderColor: '#818181',
|
||
|
borderWidth: 1,
|
||
|
borderOpacity: 0.25,
|
||
|
selectedRegions: null,
|
||
|
multiSelectRegion: false
|
||
|
}, map = this.data('mapObject');
|
||
|
|
||
|
if (options === 'addMap') {
|
||
|
JQVMap.maps[arguments[1]] = arguments[2];
|
||
|
} else if (options === 'set' && apiParams[arguments[1]]) {
|
||
|
map['set' + arguments[1].charAt(0).toUpperCase() + arguments[1].substr(1)].apply(map, Array.prototype.slice.call(arguments, 2));
|
||
|
} else if (typeof options === 'string' &&
|
||
|
typeof map[options] === 'function') {
|
||
|
return map[options].apply(map, Array.prototype.slice.call(arguments, 1));
|
||
|
} else {
|
||
|
jQuery.extend(defaultParams, options);
|
||
|
defaultParams.container = this;
|
||
|
this.css({ position: 'relative', overflow: 'hidden' });
|
||
|
|
||
|
map = new JQVMap(defaultParams);
|
||
|
|
||
|
this.data('mapObject', map);
|
||
|
|
||
|
this.unbind('.jqvmap');
|
||
|
|
||
|
for (var e in apiEvents) {
|
||
|
if (defaultParams[e]) {
|
||
|
this.bind(apiEvents[e] + '.jqvmap', defaultParams[e]);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
var loadEvent = jQuery.Event('load.jqvmap');
|
||
|
jQuery(defaultParams.container).trigger(loadEvent, map);
|
||
|
|
||
|
return map;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
})(jQuery);
|
||
|
|
||
|
ColorScale.arrayToRgb = function (ar) {
|
||
|
var rgb = '#';
|
||
|
var d;
|
||
|
for (var i = 0; i < ar.length; i++) {
|
||
|
d = ar[i].toString(16);
|
||
|
rgb += d.length === 1 ? '0' + d : d;
|
||
|
}
|
||
|
return rgb;
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.getColor = function (value) {
|
||
|
if (typeof this.normalize === 'function') {
|
||
|
value = this.normalize(value);
|
||
|
}
|
||
|
|
||
|
var lengthes = [];
|
||
|
var fullLength = 0;
|
||
|
var l;
|
||
|
|
||
|
for (var i = 0; i < this.colors.length - 1; i++) {
|
||
|
l = this.vectorLength(this.vectorSubtract(this.colors[i + 1], this.colors[i]));
|
||
|
lengthes.push(l);
|
||
|
fullLength += l;
|
||
|
}
|
||
|
|
||
|
var c = (this.maxValue - this.minValue) / fullLength;
|
||
|
|
||
|
for (i = 0; i < lengthes.length; i++) {
|
||
|
lengthes[i] *= c;
|
||
|
}
|
||
|
|
||
|
i = 0;
|
||
|
value -= this.minValue;
|
||
|
|
||
|
while (value - lengthes[i] >= 0) {
|
||
|
value -= lengthes[i];
|
||
|
i++;
|
||
|
}
|
||
|
|
||
|
var color;
|
||
|
if (i === this.colors.length - 1) {
|
||
|
color = this.vectorToNum(this.colors[i]).toString(16);
|
||
|
} else {
|
||
|
color = (this.vectorToNum(this.vectorAdd(this.colors[i], this.vectorMult(this.vectorSubtract(this.colors[i + 1], this.colors[i]), (value) / (lengthes[i]))))).toString(16);
|
||
|
}
|
||
|
|
||
|
while (color.length < 6) {
|
||
|
color = '0' + color;
|
||
|
}
|
||
|
return '#' + color;
|
||
|
};
|
||
|
|
||
|
ColorScale.rgbToArray = function (rgb) {
|
||
|
rgb = rgb.substr(1);
|
||
|
return [parseInt(rgb.substr(0, 2), 16), parseInt(rgb.substr(2, 2), 16), parseInt(rgb.substr(4, 2), 16)];
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.setColors = function (colors) {
|
||
|
for (var i = 0; i < colors.length; i++) {
|
||
|
colors[i] = ColorScale.rgbToArray(colors[i]);
|
||
|
}
|
||
|
this.colors = colors;
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.setMax = function (max) {
|
||
|
this.clearMaxValue = max;
|
||
|
if (typeof this.normalize === 'function') {
|
||
|
this.maxValue = this.normalize(max);
|
||
|
} else {
|
||
|
this.maxValue = max;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.setMin = function (min) {
|
||
|
this.clearMinValue = min;
|
||
|
|
||
|
if (typeof this.normalize === 'function') {
|
||
|
this.minValue = this.normalize(min);
|
||
|
} else {
|
||
|
this.minValue = min;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.setNormalizeFunction = function (f) {
|
||
|
if (f === 'polynomial') {
|
||
|
this.normalize = function (value) {
|
||
|
return Math.pow(value, 0.2);
|
||
|
};
|
||
|
} else if (f === 'linear') {
|
||
|
delete this.normalize;
|
||
|
} else {
|
||
|
this.normalize = f;
|
||
|
}
|
||
|
this.setMin(this.clearMinValue);
|
||
|
this.setMax(this.clearMaxValue);
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.vectorAdd = function (vector1, vector2) {
|
||
|
var vector = [];
|
||
|
for (var i = 0; i < vector1.length; i++) {
|
||
|
vector[i] = vector1[i] + vector2[i];
|
||
|
}
|
||
|
return vector;
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.vectorLength = function (vector) {
|
||
|
var result = 0;
|
||
|
for (var i = 0; i < vector.length; i++) {
|
||
|
result += vector[i] * vector[i];
|
||
|
}
|
||
|
return Math.sqrt(result);
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.vectorMult = function (vector, num) {
|
||
|
var result = [];
|
||
|
for (var i = 0; i < vector.length; i++) {
|
||
|
result[i] = vector[i] * num;
|
||
|
}
|
||
|
return result;
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.vectorSubtract = function (vector1, vector2) {
|
||
|
var vector = [];
|
||
|
for (var i = 0; i < vector1.length; i++) {
|
||
|
vector[i] = vector1[i] - vector2[i];
|
||
|
}
|
||
|
return vector;
|
||
|
};
|
||
|
|
||
|
ColorScale.prototype.vectorToNum = function (vector) {
|
||
|
var num = 0;
|
||
|
for (var i = 0; i < vector.length; i++) {
|
||
|
num += Math.round(vector[i]) * Math.pow(256, vector.length - i - 1);
|
||
|
}
|
||
|
return num;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.applyTransform = function () {
|
||
|
var maxTransX, maxTransY, minTransX, minTransY;
|
||
|
if (this.defaultWidth * this.scale <= this.width) {
|
||
|
maxTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
|
||
|
minTransX = (this.width - this.defaultWidth * this.scale) / (2 * this.scale);
|
||
|
} else {
|
||
|
maxTransX = 0;
|
||
|
minTransX = (this.width - this.defaultWidth * this.scale) / this.scale;
|
||
|
}
|
||
|
|
||
|
if (this.defaultHeight * this.scale <= this.height) {
|
||
|
maxTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
|
||
|
minTransY = (this.height - this.defaultHeight * this.scale) / (2 * this.scale);
|
||
|
} else {
|
||
|
maxTransY = 0;
|
||
|
minTransY = (this.height - this.defaultHeight * this.scale) / this.scale;
|
||
|
}
|
||
|
|
||
|
if (this.transY > maxTransY) {
|
||
|
this.transY = maxTransY;
|
||
|
} else if (this.transY < minTransY) {
|
||
|
this.transY = minTransY;
|
||
|
}
|
||
|
if (this.transX > maxTransX) {
|
||
|
this.transX = maxTransX;
|
||
|
} else if (this.transX < minTransX) {
|
||
|
this.transX = minTransX;
|
||
|
}
|
||
|
|
||
|
this.canvas.applyTransformParams(this.scale, this.transX, this.transY);
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.bindZoomButtons = function () {
|
||
|
var map = this;
|
||
|
this.container.find('.jqvmap-zoomin').click(function(){
|
||
|
map.zoomIn();
|
||
|
});
|
||
|
this.container.find('.jqvmap-zoomout').click(function(){
|
||
|
map.zoomOut();
|
||
|
});
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.deselect = function (cc, path) {
|
||
|
cc = cc.toLowerCase();
|
||
|
path = path || jQuery('#' + this.getCountryId(cc))[0];
|
||
|
|
||
|
if (this.isSelected(cc)) {
|
||
|
this.selectedRegions.splice(this.selectIndex(cc), 1);
|
||
|
|
||
|
jQuery(this.container).trigger('regionDeselect.jqvmap', [cc]);
|
||
|
path.currentFillColor = path.getOriginalFill();
|
||
|
path.setFill(path.getOriginalFill());
|
||
|
} else {
|
||
|
for (var key in this.countries) {
|
||
|
this.selectedRegions.splice(this.selectedRegions.indexOf(key), 1);
|
||
|
this.countries[key].currentFillColor = this.color;
|
||
|
this.countries[key].setFill(this.color);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.getCountryId = function (cc) {
|
||
|
return 'jqvmap' + this.index + '_' + cc;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.getPin = function(cc){
|
||
|
var pinObj = jQuery('#' + this.getPinId(cc));
|
||
|
return pinObj.html();
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.getPinId = function (cc) {
|
||
|
return this.getCountryId(cc) + '_pin';
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.getPins = function(){
|
||
|
var pins = this.container.find('.jqvmap-pin');
|
||
|
var ret = {};
|
||
|
jQuery.each(pins, function(index, pinObj){
|
||
|
pinObj = jQuery(pinObj);
|
||
|
var cc = pinObj.attr('for').toLowerCase();
|
||
|
var pinContent = pinObj.html();
|
||
|
ret[cc] = pinContent;
|
||
|
});
|
||
|
return JSON.stringify(ret);
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.highlight = function (cc, path) {
|
||
|
path = path || jQuery('#' + this.getCountryId(cc))[0];
|
||
|
if (this.hoverOpacity) {
|
||
|
path.setOpacity(this.hoverOpacity);
|
||
|
} else if (this.hoverColors && (cc in this.hoverColors)) {
|
||
|
path.currentFillColor = path.getFill() + '';
|
||
|
path.setFill(this.hoverColors[cc]);
|
||
|
} else if (this.hoverColor) {
|
||
|
path.currentFillColor = path.getFill() + '';
|
||
|
path.setFill(this.hoverColor);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.isSelected = function(cc) {
|
||
|
return this.selectIndex(cc) >= 0;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.makeDraggable = function () {
|
||
|
var mouseDown = false;
|
||
|
var oldPageX, oldPageY;
|
||
|
var self = this;
|
||
|
|
||
|
self.isMoving = false;
|
||
|
self.isMovingTimeout = false;
|
||
|
|
||
|
var lastTouchCount;
|
||
|
var touchCenterX;
|
||
|
var touchCenterY;
|
||
|
var touchStartDistance;
|
||
|
var touchStartScale;
|
||
|
var touchX;
|
||
|
var touchY;
|
||
|
|
||
|
this.container.mousemove(function (e) {
|
||
|
|
||
|
if (mouseDown) {
|
||
|
self.transX -= (oldPageX - e.pageX) / self.scale;
|
||
|
self.transY -= (oldPageY - e.pageY) / self.scale;
|
||
|
|
||
|
self.applyTransform();
|
||
|
|
||
|
oldPageX = e.pageX;
|
||
|
oldPageY = e.pageY;
|
||
|
|
||
|
self.isMoving = true;
|
||
|
if (self.isMovingTimeout) {
|
||
|
clearTimeout(self.isMovingTimeout);
|
||
|
}
|
||
|
|
||
|
self.container.trigger('drag');
|
||
|
}
|
||
|
|
||
|
return false;
|
||
|
|
||
|
}).mousedown(function (e) {
|
||
|
|
||
|
mouseDown = true;
|
||
|
oldPageX = e.pageX;
|
||
|
oldPageY = e.pageY;
|
||
|
|
||
|
return false;
|
||
|
|
||
|
}).mouseup(function () {
|
||
|
|
||
|
mouseDown = false;
|
||
|
|
||
|
clearTimeout(self.isMovingTimeout);
|
||
|
self.isMovingTimeout = setTimeout(function () {
|
||
|
self.isMoving = false;
|
||
|
}, 100);
|
||
|
|
||
|
return false;
|
||
|
|
||
|
}).mouseout(function () {
|
||
|
|
||
|
if(mouseDown && self.isMoving){
|
||
|
|
||
|
clearTimeout(self.isMovingTimeout);
|
||
|
self.isMovingTimeout = setTimeout(function () {
|
||
|
mouseDown = false;
|
||
|
self.isMoving = false;
|
||
|
}, 100);
|
||
|
|
||
|
return false;
|
||
|
}
|
||
|
});
|
||
|
|
||
|
jQuery(this.container).bind('touchmove', function (e) {
|
||
|
|
||
|
var offset;
|
||
|
var scale;
|
||
|
var touches = e.originalEvent.touches;
|
||
|
var transformXOld;
|
||
|
var transformYOld;
|
||
|
|
||
|
if (touches.length === 1) {
|
||
|
if (lastTouchCount === 1) {
|
||
|
|
||
|
if(touchX === touches[0].pageX && touchY === touches[0].pageY){
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
transformXOld = self.transX;
|
||
|
transformYOld = self.transY;
|
||
|
|
||
|
self.transX -= (touchX - touches[0].pageX) / self.scale;
|
||
|
self.transY -= (touchY - touches[0].pageY) / self.scale;
|
||
|
|
||
|
self.applyTransform();
|
||
|
|
||
|
if (transformXOld !== self.transX || transformYOld !== self.transY) {
|
||
|
e.preventDefault();
|
||
|
}
|
||
|
|
||
|
self.isMoving = true;
|
||
|
if (self.isMovingTimeout) {
|
||
|
clearTimeout(self.isMovingTimeout);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
touchX = touches[0].pageX;
|
||
|
touchY = touches[0].pageY;
|
||
|
|
||
|
} else if (touches.length === 2) {
|
||
|
|
||
|
if (lastTouchCount === 2) {
|
||
|
scale = Math.sqrt(
|
||
|
Math.pow(touches[0].pageX - touches[1].pageX, 2) +
|
||
|
Math.pow(touches[0].pageY - touches[1].pageY, 2)
|
||
|
) / touchStartDistance;
|
||
|
|
||
|
self.setScale(
|
||
|
touchStartScale * scale,
|
||
|
touchCenterX,
|
||
|
touchCenterY
|
||
|
);
|
||
|
|
||
|
e.preventDefault();
|
||
|
|
||
|
} else {
|
||
|
|
||
|
offset = jQuery(self.container).offset();
|
||
|
if (touches[0].pageX > touches[1].pageX) {
|
||
|
touchCenterX = touches[1].pageX + (touches[0].pageX - touches[1].pageX) / 2;
|
||
|
} else {
|
||
|
touchCenterX = touches[0].pageX + (touches[1].pageX - touches[0].pageX) / 2;
|
||
|
}
|
||
|
|
||
|
if (touches[0].pageY > touches[1].pageY) {
|
||
|
touchCenterY = touches[1].pageY + (touches[0].pageY - touches[1].pageY) / 2;
|
||
|
} else {
|
||
|
touchCenterY = touches[0].pageY + (touches[1].pageY - touches[0].pageY) / 2;
|
||
|
}
|
||
|
|
||
|
touchCenterX -= offset.left;
|
||
|
touchCenterY -= offset.top;
|
||
|
touchStartScale = self.scale;
|
||
|
|
||
|
touchStartDistance = Math.sqrt(
|
||
|
Math.pow(touches[0].pageX - touches[1].pageX, 2) +
|
||
|
Math.pow(touches[0].pageY - touches[1].pageY, 2)
|
||
|
);
|
||
|
}
|
||
|
}
|
||
|
|
||
|
lastTouchCount = touches.length;
|
||
|
});
|
||
|
|
||
|
jQuery(this.container).bind('touchstart', function () {
|
||
|
lastTouchCount = 0;
|
||
|
});
|
||
|
|
||
|
jQuery(this.container).bind('touchend', function () {
|
||
|
lastTouchCount = 0;
|
||
|
});
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.placePins = function(pins, pinMode){
|
||
|
var map = this;
|
||
|
|
||
|
if(!pinMode || (pinMode !== 'content' && pinMode !== 'id')) {
|
||
|
pinMode = 'content';
|
||
|
}
|
||
|
|
||
|
if(pinMode === 'content') {//treat pin as content
|
||
|
jQuery.each(pins, function(index, pin){
|
||
|
if(jQuery('#' + map.getCountryId(index)).length === 0){
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var pinIndex = map.getPinId(index);
|
||
|
var $pin = jQuery('#' + pinIndex);
|
||
|
if($pin.length > 0){
|
||
|
$pin.remove();
|
||
|
}
|
||
|
map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap-pin" style="position:absolute">' + pin + '</div>');
|
||
|
});
|
||
|
} else { //treat pin as id of an html content
|
||
|
jQuery.each(pins, function(index, pin){
|
||
|
if(jQuery('#' + map.getCountryId(index)).length === 0){
|
||
|
return;
|
||
|
}
|
||
|
var pinIndex = map.getPinId(index);
|
||
|
var $pin = jQuery('#' + pinIndex);
|
||
|
if($pin.length > 0){
|
||
|
$pin.remove();
|
||
|
}
|
||
|
map.container.append('<div id="' + pinIndex + '" for="' + index + '" class="jqvmap-pin" style="position:absolute"></div>');
|
||
|
$pin.append(jQuery('#' + pin));
|
||
|
});
|
||
|
}
|
||
|
|
||
|
this.positionPins();
|
||
|
if(!this.pinHandlers){
|
||
|
this.pinHandlers = true;
|
||
|
var positionFix = function(){
|
||
|
map.positionPins();
|
||
|
};
|
||
|
this.container.bind('zoomIn', positionFix)
|
||
|
.bind('zoomOut', positionFix)
|
||
|
.bind('drag', positionFix);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.positionPins = function(){
|
||
|
var map = this;
|
||
|
var pins = this.container.find('.jqvmap-pin');
|
||
|
jQuery.each(pins, function(index, pinObj){
|
||
|
pinObj = jQuery(pinObj);
|
||
|
var countryId = map.getCountryId(pinObj.attr('for').toLowerCase());
|
||
|
var countryObj = jQuery('#' + countryId);
|
||
|
|
||
|
var bbox = document.getElementById(countryId).getBBox();
|
||
|
var position = countryObj.position();
|
||
|
|
||
|
var scale = map.scale;
|
||
|
|
||
|
var left = position.left + (bbox.width / 2) * scale - pinObj.width() / 2,
|
||
|
top = position.top + (bbox.height / 2) * scale - pinObj.height() / 2;
|
||
|
|
||
|
pinObj.css('left', left).css('top', top);
|
||
|
});
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.removePin = function(cc) {
|
||
|
cc = cc.toLowerCase();
|
||
|
jQuery('#' + this.getPinId(cc)).remove();
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.removePins = function(){
|
||
|
this.container.find('.jqvmap-pin').remove();
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.reset = function () {
|
||
|
for (var key in this.countries) {
|
||
|
this.countries[key].setFill(this.color);
|
||
|
}
|
||
|
this.scale = this.baseScale;
|
||
|
this.transX = this.baseTransX;
|
||
|
this.transY = this.baseTransY;
|
||
|
this.applyTransform();
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.resize = function () {
|
||
|
var curBaseScale = this.baseScale;
|
||
|
if (this.width / this.height > this.defaultWidth / this.defaultHeight) {
|
||
|
this.baseScale = this.height / this.defaultHeight;
|
||
|
this.baseTransX = Math.abs(this.width - this.defaultWidth * this.baseScale) / (2 * this.baseScale);
|
||
|
} else {
|
||
|
this.baseScale = this.width / this.defaultWidth;
|
||
|
this.baseTransY = Math.abs(this.height - this.defaultHeight * this.baseScale) / (2 * this.baseScale);
|
||
|
}
|
||
|
this.scale *= this.baseScale / curBaseScale;
|
||
|
this.transX *= this.baseScale / curBaseScale;
|
||
|
this.transY *= this.baseScale / curBaseScale;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.select = function (cc, path) {
|
||
|
cc = cc.toLowerCase();
|
||
|
path = path || jQuery('#' + this.getCountryId(cc))[0];
|
||
|
|
||
|
if (!this.isSelected(cc)) {
|
||
|
if (this.multiSelectRegion) {
|
||
|
this.selectedRegions.push(cc);
|
||
|
} else {
|
||
|
this.selectedRegions = [cc];
|
||
|
}
|
||
|
|
||
|
jQuery(this.container).trigger('regionSelect.jqvmap', [cc]);
|
||
|
if (this.selectedColor && path) {
|
||
|
path.currentFillColor = this.selectedColor;
|
||
|
path.setFill(this.selectedColor);
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.selectIndex = function (cc) {
|
||
|
cc = cc.toLowerCase();
|
||
|
for (var i = 0; i < this.selectedRegions.length; i++) {
|
||
|
if (cc === this.selectedRegions[i]) {
|
||
|
return i;
|
||
|
}
|
||
|
}
|
||
|
return -1;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.setBackgroundColor = function (backgroundColor) {
|
||
|
this.container.css('background-color', backgroundColor);
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.setColors = function (key, color) {
|
||
|
if (typeof key === 'string') {
|
||
|
this.countries[key].setFill(color);
|
||
|
this.countries[key].setAttribute('original', color);
|
||
|
} else {
|
||
|
var colors = key;
|
||
|
|
||
|
for (var code in colors) {
|
||
|
if (this.countries[code]) {
|
||
|
this.countries[code].setFill(colors[code]);
|
||
|
this.countries[code].setAttribute('original', colors[code]);
|
||
|
}
|
||
|
}
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.setNormalizeFunction = function (f) {
|
||
|
this.colorScale.setNormalizeFunction(f);
|
||
|
|
||
|
if (this.values) {
|
||
|
this.setValues(this.values);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.setScale = function (scale) {
|
||
|
this.scale = scale;
|
||
|
this.applyTransform();
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.setScaleColors = function (colors) {
|
||
|
this.colorScale.setColors(colors);
|
||
|
|
||
|
if (this.values) {
|
||
|
this.setValues(this.values);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.setValues = function (values) {
|
||
|
var max = 0,
|
||
|
min = Number.MAX_VALUE,
|
||
|
val;
|
||
|
|
||
|
for (var cc in values) {
|
||
|
cc = cc.toLowerCase();
|
||
|
val = parseFloat(values[cc]);
|
||
|
|
||
|
if (isNaN(val)) {
|
||
|
continue;
|
||
|
}
|
||
|
if (val > max) {
|
||
|
max = values[cc];
|
||
|
}
|
||
|
if (val < min) {
|
||
|
min = val;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
if (min === max) {
|
||
|
max++;
|
||
|
}
|
||
|
|
||
|
this.colorScale.setMin(min);
|
||
|
this.colorScale.setMax(max);
|
||
|
|
||
|
var colors = {};
|
||
|
for (cc in values) {
|
||
|
cc = cc.toLowerCase();
|
||
|
val = parseFloat(values[cc]);
|
||
|
colors[cc] = isNaN(val) ? this.color : this.colorScale.getColor(val);
|
||
|
}
|
||
|
this.setColors(colors);
|
||
|
this.values = values;
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.unhighlight = function (cc, path) {
|
||
|
cc = cc.toLowerCase();
|
||
|
path = path || jQuery('#' + this.getCountryId(cc))[0];
|
||
|
path.setOpacity(1);
|
||
|
if (path.currentFillColor) {
|
||
|
path.setFill(path.currentFillColor);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.zoomIn = function () {
|
||
|
var map = this;
|
||
|
var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
|
||
|
|
||
|
if (map.zoomCurStep < map.zoomMaxStep) {
|
||
|
map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
|
||
|
map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
|
||
|
map.setScale(map.scale * map.zoomStep);
|
||
|
map.zoomCurStep++;
|
||
|
|
||
|
var $slider = jQuery('#zoomSlider');
|
||
|
|
||
|
$slider.css('top', parseInt($slider.css('top'), 10) - sliderDelta);
|
||
|
|
||
|
map.container.trigger('zoomIn');
|
||
|
}
|
||
|
};
|
||
|
|
||
|
JQVMap.prototype.zoomOut = function () {
|
||
|
var map = this;
|
||
|
var sliderDelta = (jQuery('#zoom').innerHeight() - 6 * 2 - 15 * 2 - 3 * 2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
|
||
|
|
||
|
if (map.zoomCurStep > 1) {
|
||
|
map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
|
||
|
map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
|
||
|
map.setScale(map.scale / map.zoomStep);
|
||
|
map.zoomCurStep--;
|
||
|
|
||
|
var $slider = jQuery('#zoomSlider');
|
||
|
|
||
|
$slider.css('top', parseInt($slider.css('top'), 10) + sliderDelta);
|
||
|
|
||
|
map.container.trigger('zoomOut');
|
||
|
}
|
||
|
};
|
||
|
|
||
|
VectorCanvas.prototype.applyTransformParams = function (scale, transX, transY) {
|
||
|
if (this.mode === 'svg') {
|
||
|
this.rootGroup.setAttribute('transform', 'scale(' + scale + ') translate(' + transX + ', ' + transY + ')');
|
||
|
} else {
|
||
|
this.rootGroup.coordorigin = (this.width - transX) + ',' + (this.height - transY);
|
||
|
this.rootGroup.coordsize = this.width / scale + ',' + this.height / scale;
|
||
|
}
|
||
|
};
|
||
|
|
||
|
VectorCanvas.prototype.createGroup = function (isRoot) {
|
||
|
var node;
|
||
|
if (this.mode === 'svg') {
|
||
|
node = this.createSvgNode('g');
|
||
|
} else {
|
||
|
node = this.createVmlNode('group');
|
||
|
node.style.width = this.width + 'px';
|
||
|
node.style.height = this.height + 'px';
|
||
|
node.style.left = '0px';
|
||
|
node.style.top = '0px';
|
||
|
node.coordorigin = '0 0';
|
||
|
node.coordsize = this.width + ' ' + this.height;
|
||
|
}
|
||
|
|
||
|
if (isRoot) {
|
||
|
this.rootGroup = node;
|
||
|
}
|
||
|
return node;
|
||
|
};
|
||
|
|
||
|
VectorCanvas.prototype.createPath = function (config) {
|
||
|
var node;
|
||
|
if (this.mode === 'svg') {
|
||
|
node = this.createSvgNode('path');
|
||
|
node.setAttribute('d', config.path);
|
||
|
|
||
|
if (this.params.borderColor !== null) {
|
||
|
node.setAttribute('stroke', this.params.borderColor);
|
||
|
}
|
||
|
if (this.params.borderWidth > 0) {
|
||
|
node.setAttribute('stroke-width', this.params.borderWidth);
|
||
|
node.setAttribute('stroke-linecap', 'round');
|
||
|
node.setAttribute('stroke-linejoin', 'round');
|
||
|
}
|
||
|
if (this.params.borderOpacity > 0) {
|
||
|
node.setAttribute('stroke-opacity', this.params.borderOpacity);
|
||
|
}
|
||
|
|
||
|
node.setFill = function (color) {
|
||
|
this.setAttribute('fill', color);
|
||
|
if (this.getAttribute('original') === null) {
|
||
|
this.setAttribute('original', color);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
node.getFill = function () {
|
||
|
return this.getAttribute('fill');
|
||
|
};
|
||
|
|
||
|
node.getOriginalFill = function () {
|
||
|
return this.getAttribute('original');
|
||
|
};
|
||
|
|
||
|
node.setOpacity = function (opacity) {
|
||
|
this.setAttribute('fill-opacity', opacity);
|
||
|
};
|
||
|
} else {
|
||
|
node = this.createVmlNode('shape');
|
||
|
node.coordorigin = '0 0';
|
||
|
node.coordsize = this.width + ' ' + this.height;
|
||
|
node.style.width = this.width + 'px';
|
||
|
node.style.height = this.height + 'px';
|
||
|
node.fillcolor = JQVMap.defaultFillColor;
|
||
|
node.stroked = false;
|
||
|
node.path = VectorCanvas.pathSvgToVml(config.path);
|
||
|
|
||
|
var scale = this.createVmlNode('skew');
|
||
|
scale.on = true;
|
||
|
scale.matrix = '0.01,0,0,0.01,0,0';
|
||
|
scale.offset = '0,0';
|
||
|
|
||
|
node.appendChild(scale);
|
||
|
|
||
|
var fill = this.createVmlNode('fill');
|
||
|
node.appendChild(fill);
|
||
|
|
||
|
node.setFill = function (color) {
|
||
|
this.getElementsByTagName('fill')[0].color = color;
|
||
|
if (this.getAttribute('original') === null) {
|
||
|
this.setAttribute('original', color);
|
||
|
}
|
||
|
};
|
||
|
|
||
|
node.getFill = function () {
|
||
|
return this.getElementsByTagName('fill')[0].color;
|
||
|
};
|
||
|
node.getOriginalFill = function () {
|
||
|
return this.getAttribute('original');
|
||
|
};
|
||
|
node.setOpacity = function (opacity) {
|
||
|
this.getElementsByTagName('fill')[0].opacity = parseInt(opacity * 100, 10) + '%';
|
||
|
};
|
||
|
}
|
||
|
return node;
|
||
|
};
|
||
|
|
||
|
VectorCanvas.prototype.pathSvgToVml = function (path) {
|
||
|
var result = '';
|
||
|
var cx = 0, cy = 0, ctrlx, ctrly;
|
||
|
|
||
|
return path.replace(/([MmLlHhVvCcSs])((?:-?(?:\d+)?(?:\.\d+)?,?\s?)+)/g, function (segment, letter, coords) {
|
||
|
coords = coords.replace(/(\d)-/g, '$1,-').replace(/\s+/g, ',').split(',');
|
||
|
if (!coords[0]) {
|
||
|
coords.shift();
|
||
|
}
|
||
|
|
||
|
for (var i = 0, l = coords.length; i < l; i++) {
|
||
|
coords[i] = Math.round(100 * coords[i]);
|
||
|
}
|
||
|
|
||
|
switch (letter) {
|
||
|
case 'm':
|
||
|
cx += coords[0];
|
||
|
cy += coords[1];
|
||
|
result = 't' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 'M':
|
||
|
cx = coords[0];
|
||
|
cy = coords[1];
|
||
|
result = 'm' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 'l':
|
||
|
cx += coords[0];
|
||
|
cy += coords[1];
|
||
|
result = 'r' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 'L':
|
||
|
cx = coords[0];
|
||
|
cy = coords[1];
|
||
|
result = 'l' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 'h':
|
||
|
cx += coords[0];
|
||
|
result = 'r' + coords[0] + ',0';
|
||
|
break;
|
||
|
|
||
|
case 'H':
|
||
|
cx = coords[0];
|
||
|
result = 'l' + cx + ',' + cy;
|
||
|
break;
|
||
|
|
||
|
case 'v':
|
||
|
cy += coords[0];
|
||
|
result = 'r0,' + coords[0];
|
||
|
break;
|
||
|
|
||
|
case 'V':
|
||
|
cy = coords[0];
|
||
|
result = 'l' + cx + ',' + cy;
|
||
|
break;
|
||
|
|
||
|
case 'c':
|
||
|
ctrlx = cx + coords[coords.length - 4];
|
||
|
ctrly = cy + coords[coords.length - 3];
|
||
|
cx += coords[coords.length - 2];
|
||
|
cy += coords[coords.length - 1];
|
||
|
result = 'v' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 'C':
|
||
|
ctrlx = coords[coords.length - 4];
|
||
|
ctrly = coords[coords.length - 3];
|
||
|
cx = coords[coords.length - 2];
|
||
|
cy = coords[coords.length - 1];
|
||
|
result = 'c' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 's':
|
||
|
coords.unshift(cy - ctrly);
|
||
|
coords.unshift(cx - ctrlx);
|
||
|
ctrlx = cx + coords[coords.length - 4];
|
||
|
ctrly = cy + coords[coords.length - 3];
|
||
|
cx += coords[coords.length - 2];
|
||
|
cy += coords[coords.length - 1];
|
||
|
result = 'v' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
case 'S':
|
||
|
coords.unshift(cy + cy - ctrly);
|
||
|
coords.unshift(cx + cx - ctrlx);
|
||
|
ctrlx = coords[coords.length - 4];
|
||
|
ctrly = coords[coords.length - 3];
|
||
|
cx = coords[coords.length - 2];
|
||
|
cy = coords[coords.length - 1];
|
||
|
result = 'c' + coords.join(',');
|
||
|
break;
|
||
|
|
||
|
default:
|
||
|
break;
|
||
|
}
|
||
|
|
||
|
return result;
|
||
|
|
||
|
}).replace(/z/g, '');
|
||
|
};
|
||
|
|
||
|
VectorCanvas.prototype.setSize = function (width, height) {
|
||
|
if (this.mode === 'svg') {
|
||
|
this.canvas.setAttribute('width', width);
|
||
|
this.canvas.setAttribute('height', height);
|
||
|
} else {
|
||
|
this.canvas.style.width = width + 'px';
|
||
|
this.canvas.style.height = height + 'px';
|
||
|
this.canvas.coordsize = width + ' ' + height;
|
||
|
this.canvas.coordorigin = '0 0';
|
||
|
if (this.rootGroup) {
|
||
|
var paths = this.rootGroup.getElementsByTagName('shape');
|
||
|
for (var i = 0, l = paths.length; i < l; i++) {
|
||
|
paths[i].coordsize = width + ' ' + height;
|
||
|
paths[i].style.width = width + 'px';
|
||
|
paths[i].style.height = height + 'px';
|
||
|
}
|
||
|
this.rootGroup.coordsize = width + ' ' + height;
|
||
|
this.rootGroup.style.width = width + 'px';
|
||
|
this.rootGroup.style.height = height + 'px';
|
||
|
}
|
||
|
}
|
||
|
this.width = width;
|
||
|
this.height = height;
|
||
|
};
|
||
|
|
||
|
/** Add World Map Data Points */
|
||
|
jQuery.fn.vectorMap('addMap', 'world_en', {"width":950,"height":550,"paths":{"id":{"path":"M781.68,324.4l-2.31,8.68l-12.53,4.23l-3.75-4.4l-1.82,0.5l3.4,13.12l5.09,0.57l6.79,2.57v2.57l3.11-0.57l4.53-6.27v-5.13l2.55-5.13l2.83,0.57l-3.4-7.13l-0.52-4.59L781.68,324.4L781.68,324.4M722.48,317.57l-0.28,2.28l6.79,11.41h1.98l14.15,23.67l5.66,0.57l2.83-8.27l-4.53-2.85l-0.85-4.56L722.48,317.57L722.48,317.57M789.53,349.11l2.26,2.77l-1.47,4.16v0.79h3.34l1.18-10.4l1.08,0.3l1.96,9.5l1.87,0.5l1.77-4.06l-1.77-6.14l-1.47-2.67l4.62-3.37l-1.08-1.49l-4.42,2.87h-1.18l-2.16-3.17l0.69-1.39l3.64-1.78l5.5,1.68l1.67-0.1l4.13-3.86l-1.67-1.68l-3.83,2.97h-2.46l-3.73-1.78l-2.65,0.1l-2.95,4.75l-1.87,8.22L789.53,349.11L789.53,349.11M814.19,330.5l-1.87,4.55l2.95,3.86h0.98l1.28-2.57l0.69-0.89l-1.28-1.39l-1.87-0.69L814.19,330.5L814.19,330.5M819.99,345.45l-4.03,0.89l-1.18,1.29l0.98,1.68l2.65-0.99l1.67-0.99l2.46,1.98l1.08-0.89l-1.96-2.38L819.99,345.45L819.99,345.45M753.17,358.32l-2.75,1.88l0.59,1.58l8.75,1.98l4.42,0.79l1.87,1.98l5.01,0.4l2.36,1.98l2.16-0.5l1.97-1.78l-3.64-1.68l-3.14-2.67l-8.16-1.98L753.17,358.32L753.17,358.32M781.77,366.93l-2.16,1.19l1.28,1.39l3.14-1.19L781.77,366.93L781.77,366.93M785.5,366.04l0.39,1.88l2.26,0.59l0.88-1.09l-0.98-1.49L785.5,366.04L785.5,366.04M790.91,370.99l-2.75,0.4l2.46,2.08h1.96L790.91,370.99L790.91,370.99M791.69,367.72l-0.59,1.19l4.42,0.69l3.44-1.98l-1.96-0.59l-3.14,0.89l-1.18-0.99L791.69,367.72L791.69,367.72M831.93,339.34l-4.17,0.47l-2.68,1.96l1.11,2.24l4.54,0.84v0.84l-2.87,2.33l1.39,4.85l1.39,0.09l1.2-4.76h2.22l0.93,4.66l10.83,8.96l0.28,7l3.7,4.01l1.67-0.09l0.37-24.72l-6.29-4.38l-5.93,4.01l-2.13,1.31l-3.52-2.24l-0.09-7.09L831.93,339.34L831.93,339.34z","name":"Indonesia"},"pg":{"path":"M852.76,348.29l-0.37,24.44l3.52-0.19l4.63-5.41l3.89,0.19l2.5,2.24l0.83,6.9l7.96,4.2l2.04-0.75v-2.52l-6.39-5.32l-3.15-7.28l2.5-1.21l-1.85-4.01l-3.7-0.09l-0.93-4.29l-9.81-6.62L852.76,348.29L852.76,348.29M880.48,349l-0.88,1.25l4.81,4.26l0.66,2.5l1.31-0.15l0.15-2.57l-1.46-1.32L880.48,349L880.48,349M882.89,355.03l-0.95,0.22l-0.58,2.57l-1.82,1.18l-5.47,0.96l0.22,2.06l5.76-0.29l3.65-2.28l-0.22-3.97L882.89,355.03L882.89,355.03M889.38,359.51l1.24,3.45l2.19,2.13l0.66-0.59l-0.22-2.28l-2.48-3.01L889.38,359.51L889.38,359.51z","name":"Papua New Guinea"},"mx":{"path":"M137.49,225.43l4.83,15.21l-2.25,1.26l0.25,3.02l4.25,3.27v6.05l5.25,5.04l-2.25-14.86l-3-9.83l0.75-6.8l2.5,0.25l1,2.27l-1,5.79l13,25.44v9.07l10.5,12.34l11.5,5.29l4.75-2.77l6.75,5.54l4-4.03l-1.75-4.54l5.75-1.76l1.75,1.01l1.75-1.76h2.75l5-8.82l-2.5-2.27l-9.75,2.27l-2.25,6.55l-5.75,1.01l-6.75-2.77l-3-9.57l2.27-12.07l-4.64-2.89l-2.21-11.59l-1.85-0.79l-3.38,3.43l-3.88-2.07l-1.52-7.73l-15.37-1.61l-7.94-5.97L137.49,225.43L137.49,225.43z","name":"Mexico"},"ee":{"path":"M517.77,143.66l-5.6-0.2l-3.55,2.17l-0.05,1.61l2.3,2.17l7.15,1.21L517.77,143.66L517.77,143.66M506.76,147.64l-1.55-0.05l-0.9,0.91l0.65,0.96l1.55,0.1l0.8-1.16L506.76,147.64L506.76,147.64z","name":"Estonia"},"dz":{"path":"M473.88,227.49l-4.08-1.37l-16.98,3.19l-3.7,2.81l2.26,11.67l-6.75,0.27l-4.06,6.53l-9.67,2.32l0.03,4.75l31.85,24.35l5.43,0.46l18.11-14.15l-1.81-2.28l-3.4-0.46l-2.04-3.42v-14.15l-1.36-1.37l0.23-3.65l-3.62-3.65l-0.45-3.88l1.58-1.14l-0.68-4.11L473.88,227.49L473.88,227.49z","name":"Algeria"},"ma":{"path":"M448.29,232.28h-11.55l-2.26,5.02l-5.21,2.51l-4.3,11.64l-8.38,5.02l-11.77,19.39l11.55-0.23l0.45-5.7h2.94v-7.76h10.19l0.23-10.04l9.74-2.28l4.08-6.62l6.34-0.23L448.29,232.28L448.29,232.28z","name":"Morocco"},"mr":{"path":"M404.9,276.66l2.18,2.85l-0.45,12.32l3.17-2.28l2.26-0.46l3.17,1.14l3.62,5.02l3.4-2.28l16.53-0.23l-4.08-27.61l4.38-0.02l-8.16-6.25l0.01,4.06l-10.33,0.01l-0.05,7.75l-2.97-0.01l-0.38,5.72L404.9,276.66L404.9,276.66z","name":"Mauritania"},"sn":{"path":"M412.03,289.84L410.12,290.31L406.18,293.18L405.28,294.78L405,296.37L406.43,297.40L411.28,297.34L414.40,296.5L414.75,298.03L414.46,300.06L414.53,300.09L406.78,300.21L408.03,303.21L408.71,301.37L418,302.15L418.06,302.21L419.03,302.25L422,302.37L422.12,300.62L418.53,296.31L414.53,290.87L412.03,289.84z","name":"Senegal"},"gm":{"path":"M406.89,298.34l-0.13,1.11l6.92-0.1l0.35
|