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 | };
|
---|