1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
/**
* Creates map with drill-down functionality.
* @constructor
* @param {Object} params Parameters to initialize map with.
* @param {Number} params.maxLevel Maximum number of levels user can go through
* @param {Object} params.main Config of the main map. See <a href="./jvm-map/">jvm.Map</a> for more information.
* @param {Function} params.mapNameByCode Function go generate map name by region code. Default value is:
<pre>
function(code, multiMap) {
return code.toLowerCase()+'_'+
multiMap.defaultProjection+'_en';
}
</pre>
* @param {Function} params.mapUrlByCode Function to generate map url by region code. Default value is:
<pre>
function(code, multiMap){
return 'jquery-jvectormap-data-'+
code.toLowerCase()+'-'+
multiMap.defaultProjection+'-en.js';
}
</pre>
*/
jvm.MultiMap = function(params) {
var that = this;
this.maps = {};
this.params = jvm.$.extend(true, {}, jvm.MultiMap.defaultParams, params);
this.params.maxLevel = this.params.maxLevel || Number.MAX_VALUE;
this.params.main = this.params.main || {};
this.params.main.multiMapLevel = 0;
this.history = [ this.addMap(this.params.main.map, this.params.main) ];
this.defaultProjection = this.history[0].mapData.projection.type;
this.mapsLoaded = {};
this.params.container.css({position: 'relative'});
this.backButton = jvm.$('<div/>').addClass('jvectormap-goback').text('Back').appendTo(this.params.container);
this.backButton.hide();
this.backButton.click(function(){
that.goBack();
});
this.spinner = jvm.$('<div/>').addClass('jvectormap-spinner').appendTo(this.params.container);
this.spinner.hide();
};
jvm.MultiMap.prototype = {
addMap: function(name, config){
var cnt = jvm.$('<div/>').css({
width: '100%',
height: '100%'
});
this.params.container.append(cnt);
this.maps[name] = new jvm.Map(jvm.$.extend(config, {container: cnt}));
if (this.params.maxLevel > config.multiMapLevel) {
this.maps[name].container.on('regionClick.jvectormap', {scope: this}, function(e, code){
var multimap = e.data.scope,
mapName = multimap.params.mapNameByCode(code, multimap);
if (!multimap.drillDownPromise || multimap.drillDownPromise.state() !== 'pending') {
multimap.drillDown(mapName, code);
}
});
}
return this.maps[name];
},
downloadMap: function(code){
var that = this,
deferred = jvm.$.Deferred();
if (!this.mapsLoaded[code]) {
jvm.$.get(this.params.mapUrlByCode(code, this)).then(function(){
that.mapsLoaded[code] = true;
deferred.resolve();
}, function(){
deferred.reject();
});
} else {
deferred.resolve();
}
return deferred;
},
drillDown: function(name, code){
var currentMap = this.history[this.history.length - 1],
that = this,
focusPromise = currentMap.setFocus({region: code, animate: true}),
downloadPromise = this.downloadMap(code);
focusPromise.then(function(){
if (downloadPromise.state() === 'pending') {
that.spinner.show();
}
});
downloadPromise.always(function(){
that.spinner.hide();
});
this.drillDownPromise = jvm.$.when(downloadPromise, focusPromise);
this.drillDownPromise.then(function(){
currentMap.params.container.hide();
if (!that.maps[name]) {
that.addMap(name, {map: name, multiMapLevel: currentMap.params.multiMapLevel + 1});
} else {
that.maps[name].params.container.show();
}
that.history.push( that.maps[name] );
that.backButton.show();
});
},
goBack: function(){
var currentMap = this.history.pop(),
prevMap = this.history[this.history.length - 1],
that = this;
currentMap.setFocus({scale: 1, x: 0.5, y: 0.5, animate: true}).then(function(){
currentMap.params.container.hide();
prevMap.params.container.show();
prevMap.updateSize();
if (that.history.length === 1) {
that.backButton.hide();
}
prevMap.setFocus({scale: 1, x: 0.5, y: 0.5, animate: true});
});
}
};
jvm.MultiMap.defaultParams = {
mapNameByCode: function(code, multiMap){
return code.toLowerCase()+'_'+multiMap.defaultProjection+'_en';
},
mapUrlByCode: function(code, multiMap){
return 'jquery-jvectormap-data-'+code.toLowerCase()+'-'+multiMap.defaultProjection+'-en.js';
}
}
|
