dnet45/modules/uoa-repository-dashboard-gui/branches/new-ui/src/assets/js/pages/plugins_vector_maps.js @ 57088
1 |
$(function() { |
---|---|
2 |
// vector maps
|
3 |
altair_vector_maps.world_connected(); |
4 |
altair_vector_maps.usa_legends(); |
5 |
});
|
6 |
|
7 |
altair_vector_maps = { |
8 |
world_connected: function() { |
9 |
$("#vmaps_world_connected").mapael({ |
10 |
map: { |
11 |
name: "world_countries", |
12 |
defaultArea: { |
13 |
attrs: { |
14 |
fill: "#eee", |
15 |
stroke: "#888", |
16 |
'stroke-width': 0.1 |
17 |
},
|
18 |
attrsHover: { |
19 |
fill: "#B0BEC5" |
20 |
}
|
21 |
},
|
22 |
// Default attributes can be set for all links
|
23 |
defaultLink: { |
24 |
factor: 0.4, |
25 |
attrsHover: { |
26 |
stroke: "#B71C1C" |
27 |
}
|
28 |
},
|
29 |
defaultPlot: { |
30 |
text: { |
31 |
attrs: { |
32 |
'font-size': 12, |
33 |
fill: "#222" |
34 |
},
|
35 |
attrsHover: { |
36 |
fill: "#222" |
37 |
}
|
38 |
},
|
39 |
attrsHover: { |
40 |
stroke: "#222", |
41 |
'stroke-width': 2 |
42 |
},
|
43 |
size: 10 |
44 |
}
|
45 |
},
|
46 |
plots: { |
47 |
'paris': { |
48 |
latitude: 48.86, |
49 |
longitude: 2.3444, |
50 |
tooltip: { |
51 |
content: "Paris<br /><span class='uk-text-small'>Population: 2,211,297</span>" |
52 |
}
|
53 |
},
|
54 |
'newyork': { |
55 |
latitude: 40.667, |
56 |
longitude: -73.833, |
57 |
tooltip: { |
58 |
content: "New york<br /><span class='uk-text-small'>Population: 8,491,079</span>" |
59 |
}
|
60 |
},
|
61 |
'sanfrancisco': { |
62 |
latitude: 37.792032, |
63 |
longitude: -122.394613, |
64 |
tooltip: { |
65 |
content: "San Francisco" |
66 |
}
|
67 |
},
|
68 |
'brasilia': { |
69 |
latitude: -15.781682, |
70 |
longitude: -47.924195, |
71 |
tooltip: { |
72 |
content: "Brasilia<br /><span class='uk-text-small'>Population: 204,465,000</span>" |
73 |
}
|
74 |
},
|
75 |
'roma': { |
76 |
latitude: 41.827637, |
77 |
longitude: 12.462732, |
78 |
tooltip: { |
79 |
content: "Roma" |
80 |
}
|
81 |
},
|
82 |
'miami': { |
83 |
latitude: 25.789125, |
84 |
longitude: -80.205674, |
85 |
tooltip: { |
86 |
content: "Miami" |
87 |
}
|
88 |
},
|
89 |
'tokyo': { |
90 |
latitude: 35.687418, |
91 |
longitude: 139.692306, |
92 |
text: { |
93 |
content: 'Tokyo' |
94 |
},
|
95 |
attrs: { |
96 |
fill: "#FF6F00" |
97 |
}
|
98 |
},
|
99 |
'sydney': { |
100 |
latitude: -33.917, |
101 |
longitude: 151.167, |
102 |
text: { |
103 |
content: 'Sydney' |
104 |
},
|
105 |
attrs: { |
106 |
fill: "#FF6F00" |
107 |
}
|
108 |
},
|
109 |
'plot1': { |
110 |
latitude: 22.906561, |
111 |
longitude: 86.840170, |
112 |
text: { |
113 |
content: 'Plot1', |
114 |
position: 'left', |
115 |
margin: 5 |
116 |
},
|
117 |
attrs: { |
118 |
fill: "#FF6F00" |
119 |
}
|
120 |
},
|
121 |
'plot2': { |
122 |
latitude: -0.390553, |
123 |
longitude: 115.586762, |
124 |
text: { |
125 |
content: 'Plot2', |
126 |
position: 'top' |
127 |
},
|
128 |
attrs: { |
129 |
fill: "#FF6F00" |
130 |
}
|
131 |
},
|
132 |
'plot3': { |
133 |
latitude: 44.065626, |
134 |
longitude: 94.576079, |
135 |
text: { |
136 |
content: 'Plot3' |
137 |
},
|
138 |
attrs: { |
139 |
fill: "#FF6F00" |
140 |
}
|
141 |
}
|
142 |
},
|
143 |
// Links allow you to connect plots between them
|
144 |
links: { |
145 |
'link1': { |
146 |
factor: -0.3, |
147 |
// The source and the destination of the link can be set with a latitude and a longitude or a x and a y ...
|
148 |
between: [ |
149 |
{
|
150 |
latitude: 24.708785, |
151 |
longitude: -5.402427 |
152 |
}, { |
153 |
x: 560, |
154 |
y: 280 |
155 |
}
|
156 |
],
|
157 |
attrs: { |
158 |
"stroke-width": 2 |
159 |
},
|
160 |
tooltip: { |
161 |
content: "Link" |
162 |
}
|
163 |
},
|
164 |
'parisnewyork': { |
165 |
// ... Or with IDs of plotted points
|
166 |
factor: -0.3, |
167 |
between: ['paris', 'newyork'], |
168 |
attrs: { |
169 |
"stroke-width": 2 |
170 |
},
|
171 |
tooltip: { |
172 |
content: "Paris - New-York" |
173 |
}
|
174 |
},
|
175 |
'parissanfrancisco': { |
176 |
// The curve can be inverted by setting a negative factor
|
177 |
factor: -0.5, |
178 |
between: ['paris', 'sanfrancisco'], |
179 |
attrs: { |
180 |
"stroke-width": 4 |
181 |
},
|
182 |
tooltip: { |
183 |
content: "Paris - San-Francisco" |
184 |
}
|
185 |
},
|
186 |
'parisbrasilia': { |
187 |
factor: -0.8, |
188 |
between: ['paris', 'brasilia'], |
189 |
attrs: { |
190 |
"stroke-width": 1 |
191 |
},
|
192 |
tooltip: { |
193 |
content: "Paris - Brasilia" |
194 |
}
|
195 |
},
|
196 |
'romamiami': { |
197 |
factor: 0.2, |
198 |
between: ['roma', 'miami'], |
199 |
attrs: { |
200 |
"stroke-width": 4 |
201 |
},
|
202 |
tooltip: { |
203 |
content: "Roma - Miami" |
204 |
}
|
205 |
},
|
206 |
'sydneyplot1': { |
207 |
factor: -0.2, |
208 |
between: ['sydney', 'plot1'], |
209 |
attrs: { |
210 |
stroke: "#FFA000", |
211 |
"stroke-width": 3, |
212 |
"stroke-linecap": "round" |
213 |
},
|
214 |
tooltip: { |
215 |
content: "Sydney - Plot1" |
216 |
}
|
217 |
},
|
218 |
'sydneyplot2': { |
219 |
factor: -0.1, |
220 |
between: ['sydney', 'plot2'], |
221 |
attrs: { |
222 |
stroke: "#FFA000", |
223 |
"stroke-width": 6, |
224 |
"stroke-linecap": "round" |
225 |
},
|
226 |
tooltip: { |
227 |
content: "Sydney - Plot2" |
228 |
}
|
229 |
},
|
230 |
'sydneyplot3': { |
231 |
factor: 0.2, |
232 |
between: ['sydney', 'plot3'], |
233 |
attrs: { |
234 |
stroke: "#FFA000", |
235 |
"stroke-width": 4, |
236 |
"stroke-linecap": "round" |
237 |
},
|
238 |
tooltip: { |
239 |
content: "Sydney - Plot3" |
240 |
}
|
241 |
},
|
242 |
'sydneytokyo': { |
243 |
factor: 0.2, |
244 |
between: ['sydney', 'tokyo'], |
245 |
attrs: { |
246 |
stroke: "#FFA000", |
247 |
"stroke-width": 6, |
248 |
"stroke-linecap": "round" |
249 |
},
|
250 |
tooltip: { |
251 |
content: "Sydney - Plot2" |
252 |
}
|
253 |
}
|
254 |
}
|
255 |
});
|
256 |
},
|
257 |
usa_legends: function() { |
258 |
var marker_url = isHighDensity() ? 'assets/img/md-images/ic_place_black_48dp.png' : 'assets/img/md-images/ic_place_black_24dp.png', |
259 |
marker_url_beenhere = isHighDensity() ? 'assets/img/md-images/ic_beenhere_black_48dp.png' : 'assets/img/md-images/ic_beenhere_black_24dp.png'; |
260 |
|
261 |
$('#vmaps_usa_legend').mapael({ |
262 |
map: { |
263 |
name: "usa_states", |
264 |
defaultArea: { |
265 |
attrs: { |
266 |
fill: "#eee", |
267 |
stroke: "#888", |
268 |
'stroke-width': 0.1 |
269 |
},
|
270 |
attrsHover: { |
271 |
fill: "#8BC34A" |
272 |
}
|
273 |
}
|
274 |
},
|
275 |
legend: { |
276 |
plot: { |
277 |
mode : "horizontal", |
278 |
title: "American cities", |
279 |
slices: [{ |
280 |
label: "Value 1", |
281 |
sliceValue: "Value 1", |
282 |
type: "image", |
283 |
url: marker_url, |
284 |
width: isHighDensity() ? 48 : 24, |
285 |
height: isHighDensity() ? 48 : 24, |
286 |
attrsHover: { |
287 |
transform: "s1.4" |
288 |
}
|
289 |
}, { |
290 |
label: "Value 2", |
291 |
sliceValue: "Value 2", |
292 |
type: "image", |
293 |
url: marker_url_beenhere, |
294 |
width: isHighDensity() ? 48 : 24, |
295 |
height: isHighDensity() ? 48 : 24, |
296 |
attrsHover: { |
297 |
transform: "s1.4" |
298 |
}
|
299 |
}]
|
300 |
}
|
301 |
},
|
302 |
plots: { |
303 |
'ny': { |
304 |
latitude: 40.717079, |
305 |
longitude: -74.00116, |
306 |
tooltip: {content: "New York"}, |
307 |
value: "Value 1" |
308 |
},
|
309 |
'an': { |
310 |
latitude: 61.2108398, |
311 |
longitude: -149.9019557, |
312 |
tooltip: {content: "Anchorage"}, |
313 |
value: "Value 2" |
314 |
},
|
315 |
'sf': { |
316 |
latitude: 37.792032, |
317 |
longitude: -122.394613, |
318 |
tooltip: {content: "San Francisco"}, |
319 |
value: "Value 1" |
320 |
},
|
321 |
'pa': { |
322 |
latitude: 19.493204, |
323 |
longitude: -154.8199569, |
324 |
tooltip: {content: "Pahoa"}, |
325 |
value: "Value 2" |
326 |
},
|
327 |
'la': { |
328 |
latitude: 34.025052, |
329 |
longitude: -118.192006, |
330 |
tooltip: {content: "Los Angeles"}, |
331 |
value: "Value 1" |
332 |
},
|
333 |
'dallas': { |
334 |
latitude: 32.784881, |
335 |
longitude: -96.808244, |
336 |
tooltip: {content: "Dallas"}, |
337 |
value: "Value 2" |
338 |
},
|
339 |
'miami': { |
340 |
latitude: 25.789125, |
341 |
longitude: -80.205674, |
342 |
tooltip: {content: "Miami"}, |
343 |
value: "Value 2" |
344 |
},
|
345 |
'washington': { |
346 |
latitude: 38.905761, |
347 |
longitude: -77.020746, |
348 |
tooltip: {content: "Washington"}, |
349 |
value: "Value 2" |
350 |
},
|
351 |
'seattle': { |
352 |
latitude: 47.599571, |
353 |
longitude: -122.319426, |
354 |
tooltip: {content: "Seattle"}, |
355 |
value: "Value 1" |
356 |
}
|
357 |
}
|
358 |
});
|
359 |
}
|
360 |
};
|