123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290 |
- /*!
- * JQVMap: jQuery Vector Map Library
- * @author JQVMap <me@peterschmalfeldt.com>
- * @version 1.5.1
- * @link http://jqvmap.com
- * @license https://github.com/manifestinteractive/jqvmap/blob/master/LICENSE
- * @builddate 2016/06/02
- */
- 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 = countryObj[0].getBBox();
- var scale = map.scale;
- var rootCoords = map.canvas.rootGroup.getBoundingClientRect();
- var mapCoords = map.container[0].getBoundingClientRect();
- var coords = {
- left: rootCoords.left - mapCoords.left,
- top: rootCoords.top - mapCoords.top
- };
- var middleX = (bbox.x * scale) + ((bbox.width * scale) / 2);
- var middleY = (bbox.y * scale) + ((bbox.height * scale) / 2);
- pinObj.css({
- left: coords.left + middleX - (pinObj.width() / 2),
- top: coords.top + middleY - (pinObj.height() / 2)
- });
- });
- };
- 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();
- this.zoomCurStep = 1;
- };
- 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;
- };
|