| 提交 | 用户 | 时间 | ||
| 58d006 | 1 |  |
| A | 2 | |
| 3 | This project is a heavily modified version of [jVectorMap](https://github.com/bjornd/jvectormap). I chose to start fresh rather than fork their project as my intentions were to take it in such a different direction that it would become incompatibale with the original source, rendering it near impossible to merge our projects together without extreme complications. | |
| 4 | ||
| 5 | jQuery Vector Map | |
| 6 | ====== | |
| 7 | ||
| 8 | To get started, all you need to do is include the JavaScript and CSS files for the map you want to load. Here is a sample HTML page for loading the World Map with default settings: | |
| 9 | ||
| 10 | <?xml version="1.0" encoding="UTF-8"?> | |
| 11 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> | |
| 12 | <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> | |
| 13 | <head> | |
| 14 | <title>JQVMap - World Map</title> | |
| 15 | ||
| 16 | <link href="../jqvmap/jqvmap.css" media="screen" rel="stylesheet" type="text/css" /> | |
| 17 | ||
| 18 | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> | |
| 19 | <script src="../jqvmap/jquery.vmap.js" type="text/javascript"></script> | |
| 20 | <script src="../jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script> | |
| 21 | ||
| 22 | <script type="text/javascript"> | |
| 23 | jQuery(document).ready(function() { | |
| 24 | jQuery('#vmap').vectorMap({ map: 'world_en' }); | |
| 25 | }); | |
| 26 | </script> | |
| 27 | </head> | |
| 28 | <body> | |
| 29 | <div id="vmap" style="width: 600px; height: 400px;"></div> | |
| 30 | </body> | |
| 31 | </html> | |
| 32 | ||
| 33 | Making it Pretty | |
| 34 | ====== | |
| 35 | ||
| 36 | While initializing a map you can provide parameters to change its look and feel. | |
| 37 | ||
| 38 | jQuery('#vmap').vectorMap( | |
| 39 | { | |
| 40 | map: 'world_en', | |
| 41 | backgroundColor: '#a5bfdd', | |
| 42 | borderColor: '#818181', | |
| 43 | borderOpacity: 0.25, | |
| 44 | borderWidth: 1, | |
| 45 | color: '#f4f3f0', | |
| 46 | enableZoom: true, | |
| 47 | hoverColor: '#c9dfaf', | |
| 48 | hoverOpacity: null, | |
| 49 | normalizeFunction: 'linear', | |
| 50 | scaleColors: ['#b6d6ff', '#005ace'], | |
| 51 | selectedColor: '#c9dfaf', | |
| 52 | selectedRegion: null, | |
| 53 | showTooltip: true, | |
| 54 | onRegionClick: function(element, code, region) | |
| 55 | { | |
| 56 | var message = 'You clicked "' | |
| 57 | + region | |
| 58 | + '" which has the code: ' | |
| 59 | + code.toUpperCase(); | |
| 60 | ||
| 61 | alert(message); | |
| 62 | } | |
| 63 | }); | |
| 64 | ||
| 65 | Configuration Settings | |
| 66 | ------ | |
| 67 | ||
| 68 | **map** *'world_en'* | |
| 69 | ||
| 70 | Map you want to load. Must include the javascript file with the name of the map you want. Available maps with this library are world_en, usa_en, europe_en and germany_en | |
| 71 | ||
| 72 | **backgroundColor** *'#a5bfdd'* | |
| 73 | ||
| 74 | Background color of map container in any CSS compatible format. | |
| 75 | ||
| 76 | **borderColor** *'#818181'* | |
| 77 | ||
| 78 | Border Color to use to outline map objects | |
| 79 | ||
| 80 | **borderOpacity** *0.5* | |
| 81 | ||
| 82 | Border Opacity to use to outline map objects ( use anything from 0-1, e.g. 0.5, defaults to 0.25 ) | |
| 83 | ||
| 84 | **borderWidth** *3* | |
| 85 | ||
| 86 | Border Width to use to outline map objects ( defaults to 1 ) | |
| 87 | ||
| 88 | **color** *'#f4f3f0'* | |
| 89 | ||
| 90 | Color of map regions. | |
| 91 | ||
| 92 | **colors** | |
| 93 | ||
| 94 | Colors of individual map regions. Keys of the colors objects are country codes according to ISO 3166-1 alpha-2 standard. Keys of colors must be in lower case. | |
| 95 | ||
| 96 | **enableZoom** *boolean* | |
| 97 | ||
| 98 | Whether to Enable Map Zoom ( true or false, defaults to true) | |
| 99 | ||
| 100 | **hoverColor** *'#c9dfaf'* | |
| 101 | ||
| 102 | Color of the region when mouse pointer is over it. | |
| 103 | ||
| 104 | **hoverOpacity** *0.5* | |
| 105 | ||
| 106 | Opacity of the region when mouse pointer is over it. | |
| 107 | ||
| 108 | **normalizeFunction** *'linear'* | |
| 109 | ||
| 110 | This function can be used to improve results of visualizations for data with non-linear nature. Function gets raw value as the first parameter and should return value which will be used in calculations of color, with which particular region will be painted. | |
| 111 | ||
| 112 | **scaleColors** *['#b6d6ff', '#005ace']* | |
| 113 | ||
| 114 | This option defines colors, with which regions will be painted when you set option values. Array scaleColors can have more then two elements. Elements should be strings representing colors in RGB hex format. | |
| 115 | ||
| 116 | **selectedRegion** *'mo'* | |
| 117 | ||
| 118 | This is the Region that you are looking to have preselected (two letter ISO code, defaults to null ) | |
| 119 | ||
| 120 | WORLD | |
| 121 | ------------------------------ | |
| 122 | AE = United Arab Emirates | |
| 123 | AF = Afghanistan | |
| 124 | AG = Antigua and Barbuda | |
| 125 | AL = Albania | |
| 126 | AM = Armenia | |
| 127 | AO = Angola | |
| 128 | AR = Argentina | |
| 129 | AT = Austria | |
| 130 | AU = Australia | |
| 131 | AZ = Azerbaijan | |
| 132 | BA = Bosnia and Herzegovina | |
| 133 | BB = Barbados | |
| 134 | BD = Bangladesh | |
| 135 | BE = Belgium | |
| 136 | BF = Burkina Faso | |
| 137 | BG = Bulgaria | |
| 138 | BI = Burundi | |
| 139 | BJ = Benin | |
| 140 | BN = Brunei Darussalam | |
| 141 | BO = Bolivia | |
| 142 | BR = Brazil | |
| 143 | BS = Bahamas | |
| 144 | BT = Bhutan | |
| 145 | BW = Botswana | |
| 146 | BY = Belarus | |
| 147 | BZ = Belize | |
| 148 | CA = Canada | |
| 149 | CD = Congo | |
| 150 | CF = Central African Republic | |
| 151 | CG = Congo | |
| 152 | CH = Switzerland | |
| 153 | CI = Cote d'Ivoire | |
| 154 | CL = Chile | |
| 155 | CM = Cameroon | |
| 156 | CN = China | |
| 157 | CO = Colombia | |
| 158 | CR = Costa Rica | |
| 159 | CU = Cuba | |
| 160 | CV = Cape Verde | |
| 161 | CY = Cyprus | |
| 162 | CZ = Czech Republic | |
| 163 | DE = Germany | |
| 164 | DJ = Djibouti | |
| 165 | DK = Denmark | |
| 166 | DM = Dominica | |
| 167 | DO = Dominican Republic | |
| 168 | DZ = Algeria | |
| 169 | EC = Ecuador | |
| 170 | EE = Estonia | |
| 171 | EG = Egypt | |
| 172 | ER = Eritrea | |
| 173 | ES = Spain | |
| 174 | ET = Ethiopia | |
| 175 | FI = Finland | |
| 176 | FJ = Fiji | |
| 177 | FK = Falkland Islands | |
| 178 | FR = France | |
| 179 | GA = Gabon | |
| 180 | GB = United Kingdom | |
| 181 | GD = Grenada | |
| 182 | GE = Georgia | |
| 183 | GF = French Guiana | |
| 184 | GH = Ghana | |
| 185 | GL = Greenland | |
| 186 | GM = Gambia | |
| 187 | GN = Guinea | |
| 188 | GQ = Equatorial Guinea | |
| 189 | GR = Greece | |
| 190 | GT = Guatemala | |
| 191 | GW = Guinea-Bissau | |
| 192 | GY = Guyana | |
| 193 | HN = Honduras | |
| 194 | HR = Croatia | |
| 195 | HT = Haiti | |
| 196 | HU = Hungary | |
| 197 | ID = Indonesia | |
| 198 | IE = Ireland | |
| 199 | IL = Israel | |
| 200 | IN = India | |
| 201 | IQ = Iraq | |
| 202 | IR = Iran | |
| 203 | IS = Iceland | |
| 204 | IT = Italy | |
| 205 | JM = Jamaica | |
| 206 | JO = Jordan | |
| 207 | JP = Japan | |
| 208 | KE = Kenya | |
| 209 | KG = Kyrgyz Republic | |
| 210 | KH = Cambodia | |
| 211 | KM = Comoros | |
| 212 | KN = Saint Kitts and Nevis | |
| 213 | KP = North Korea | |
| 214 | KR = South Korea | |
| 215 | KW = Kuwait | |
| 216 | KZ = Kazakhstan | |
| 217 | LA = Lao People's Democratic Republic | |
| 218 | LB = Lebanon | |
| 219 | LC = Saint Lucia | |
| 220 | LK = Sri Lanka | |
| 221 | LR = Liberia | |
| 222 | LS = Lesotho | |
| 223 | LT = Lithuania | |
| 224 | LV = Latvia | |
| 225 | LY = Libya | |
| 226 | MA = Morocco | |
| 227 | MD = Moldova | |
| 228 | MG = Madagascar | |
| 229 | MK = Macedonia | |
| 230 | ML = Mali | |
| 231 | MM = Myanmar | |
| 232 | MN = Mongolia | |
| 233 | MR = Mauritania | |
| 234 | MT = Malta | |
| 235 | MU = Mauritius | |
| 236 | MV = Maldives | |
| 237 | MW = Malawi | |
| 238 | MX = Mexico | |
| 239 | MY = Malaysia | |
| 240 | MZ = Mozambique | |
| 241 | NA = Namibia | |
| 242 | NC = New Caledonia | |
| 243 | NE = Niger | |
| 244 | NG = Nigeria | |
| 245 | NI = Nicaragua | |
| 246 | NL = Netherlands | |
| 247 | NO = Norway | |
| 248 | NP = Nepal | |
| 249 | NZ = New Zealand | |
| 250 | OM = Oman | |
| 251 | PA = Panama | |
| 252 | PE = Peru | |
| 253 | PF = French Polynesia | |
| 254 | PG = Papua New Guinea | |
| 255 | PH = Philippines | |
| 256 | PK = Pakistan | |
| 257 | PL = Poland | |
| 258 | PT = Portugal | |
| 259 | PY = Paraguay | |
| 260 | QA = Qatar | |
| 261 | RE = Reunion | |
| 262 | RO = Romania | |
| 263 | RS = Serbia | |
| 264 | RU = Russian Federationß | |
| 265 | RW = Rwanda | |
| 266 | SA = Saudi Arabia | |
| 267 | SB = Solomon Islands | |
| 268 | SC = Seychelles | |
| 269 | SD = Sudan | |
| 270 | SE = Sweden | |
| 271 | SI = Slovenia | |
| 272 | SK = Slovakia | |
| 273 | SL = Sierra Leone | |
| 274 | SN = Senegal | |
| 275 | SO = Somalia | |
| 276 | SR = Suriname | |
| 277 | ST = Sao Tome and Principe | |
| 278 | SV = El Salvador | |
| 279 | SY = Syrian Arab Republic | |
| 280 | SZ = Swaziland | |
| 281 | TD = Chad | |
| 282 | TG = Togo | |
| 283 | TH = Thailand | |
| 284 | TJ = Tajikistan | |
| 285 | TL = Timor-Leste | |
| 286 | TM = Turkmenistan | |
| 287 | TN = Tunisia | |
| 288 | TR = Turkey | |
| 289 | TT = Trinidad and Tobago | |
| 290 | TW = Taiwan | |
| 291 | TZ = Tanzania | |
| 292 | UA = Ukraine | |
| 293 | UG = Uganda | |
| 294 | US = United States of America | |
| 295 | UY = Uruguay | |
| 296 | UZ = Uzbekistan | |
| 297 | VE = Venezuela | |
| 298 | VN = Vietnam | |
| 299 | VU = Vanuatu | |
| 300 | YE = Yemen | |
| 301 | ZA = South Africa | |
| 302 | ZM = Zambia | |
| 303 | ZW = Zimbabwe | |
| 304 | ||
| 305 | USA | |
| 306 | ------------------------------ | |
| 307 | AK = Alaska | |
| 308 | AL = Alabama | |
| 309 | AR = Arkansas | |
| 310 | AZ = Arizona | |
| 311 | CA = California | |
| 312 | CO = Colorado | |
| 313 | CT = Connecticut | |
| 314 | DC = District of Columbia | |
| 315 | DE = Delaware | |
| 316 | FL = Florida | |
| 317 | GA = Georgia | |
| 318 | HI = Hawaii | |
| 319 | IA = Iowa | |
| 320 | ID = Idaho | |
| 321 | IL = Illinois | |
| 322 | IN = Indiana | |
| 323 | KS = Kansas | |
| 324 | KY = Kentucky | |
| 325 | LA = Louisiana | |
| 326 | MA = Massachusetts | |
| 327 | MD = Maryland | |
| 328 | ME = Maine | |
| 329 | MI = Michigan | |
| 330 | MN = Minnesota | |
| 331 | MO = Missouri | |
| 332 | MS = Mississippi | |
| 333 | MT = Montana | |
| 334 | NC = North Carolina | |
| 335 | ND = North Dakota | |
| 336 | NE = Nebraska | |
| 337 | NH = New Hampshire | |
| 338 | NJ = New Jersey | |
| 339 | NM = New Mexico | |
| 340 | NV = Nevada | |
| 341 | NY = New York | |
| 342 | OH = Ohio | |
| 343 | OK = Oklahoma | |
| 344 | OR = Oregon | |
| 345 | PA = Pennsylvania | |
| 346 | RI = Rhode Island | |
| 347 | SC = South Carolina | |
| 348 | SD = South Dakota | |
| 349 | TN = Tennessee | |
| 350 | TX = Texas | |
| 351 | UT = Utah | |
| 352 | VA = Virginia | |
| 353 | VT = Vermont | |
| 354 | WA = Washington | |
| 355 | WI = Wisconsin | |
| 356 | WV = West Virginia | |
| 357 | WY = Wyoming | |
| 358 | ||
| 359 | EUROPE | |
| 360 | ------------------------------ | |
| 361 | AD = Andorra | |
| 362 | AL = Albania | |
| 363 | AM = Armenia | |
| 364 | AT = Austria | |
| 365 | AZ = Azerbaijan | |
| 366 | BA = Bosnia and Herzegovina | |
| 367 | BE = Belgium | |
| 368 | BG = Bulgaria | |
| 369 | BY = Belarus | |
| 370 | CH = Switzerland | |
| 371 | CY = Cyprus | |
| 372 | CZ = Czech Republic | |
| 373 | DE = Germany | |
| 374 | DK = Denmark | |
| 375 | DZ = Algeria | |
| 376 | EE = Estonia | |
| 377 | ES = Spain | |
| 378 | FI = Finland | |
| 379 | FR = France | |
| 380 | GB = United Kingdom | |
| 381 | GE = Georgia | |
| 382 | GL = Greenland | |
| 383 | GR = Greece | |
| 384 | HR = Croatia | |
| 385 | HU = Hungary | |
| 386 | IE = Ireland | |
| 387 | IL = Israel | |
| 388 | IQ = Iraq | |
| 389 | IR = Iran | |
| 390 | IS = Iceland | |
| 391 | IT = Italy | |
| 392 | JO = Jordan | |
| 393 | KZ = Kazakhstan | |
| 394 | LB = Lebanon | |
| 395 | LI = Liechtenstein | |
| 396 | LT = Lithuania | |
| 397 | LU = Luxembourg | |
| 398 | LV = Latvia | |
| 399 | MA = Morocco | |
| 400 | MC = Monaco | |
| 401 | MD = Moldova | |
| 402 | ME = Montenegro | |
| 403 | MK = Macedonia | |
| 404 | MT = Malta | |
| 405 | NL = Netherlands | |
| 406 | NO = Norway | |
| 407 | PL = Poland | |
| 408 | PT = Portugal | |
| 409 | RO = Romania | |
| 410 | RU = Russian Federation | |
| 411 | SA = Saudi Arabia | |
| 412 | SE = Sweden | |
| 413 | SI = Slovenia | |
| 414 | SK = Slovakia | |
| 415 | SM = San Marino | |
| 416 | SR = Suriname | |
| 417 | SY = Syrian Arab Republic | |
| 418 | TM = Turkmenistan | |
| 419 | TN = Tunisia | |
| 420 | TR = Turkey | |
| 421 | UA = Ukraine | |
| 422 | ||
| 423 | GERMANY | |
| 424 | ------------------------------ | |
| 425 | BB = Brandenburg | |
| 426 | BE = Berlin | |
| 427 | BW = Baden-WÃrttemberg | |
| 428 | BY = Bayern | |
| 429 | HB = Bremen | |
| 430 | HE = Hessen | |
| 431 | HH = Hamburg | |
| 432 | MV = Mecklenburg-Vorpommern | |
| 433 | NI = Niedersachsen | |
| 434 | NW = Nordrhein-Westfalen | |
| 435 | RP = Rheinland-Pfalz | |
| 436 | SH = Schleswig-Holstein | |
| 437 | SL = Saarland | |
| 438 | SN = Sachsen | |
| 439 | ST = Sachsen-Anhalt | |
| 440 | TH = ThÃri | |
| 441 | ||
| 442 | RUSSIA | |
| 443 | ------------------------------ | |
| 444 | CH = Chukotka Autonomous Okrug | |
| 445 | KA = Kamchatka Krai | |
| 446 | MA = Magadan Oblast | |
| 447 | SA = Sakha Republic | |
| 448 | AM = Amur Oblast | |
| 449 | PR = Primorsky Krai | |
| 450 | EU = Jewish Autonomous Oblast | |
| 451 | HA = Khabarovsk Krai | |
| 452 | SH = Sakhalin Oblast | |
| 453 | OM = Omsk Oblast | |
| 454 | NV = Novosibirsk Oblast | |
| 455 | AL = Altai Krai | |
| 456 | LT = Altai Republic | |
| 457 | TV = Tuva Republic | |
| 458 | HK = Republic of Khakassia | |
| 459 | KM = Kemerovo Oblast | |
| 460 | TM = Tomsk Oblast | |
| 461 | ZB = Zabaykalsky Krai | |
| 462 | BR = Buryat Republic | |
| 463 | IR = Irkutsk Oblast | |
| 464 | KR = Krasnoyarsk Krai | |
| 465 | YA = Yamalo-Nenets Autonomous Okrug | |
| 466 | HT = Khanty–Mansi Autonomous Okrug | |
| 467 | TU = Tyumen Oblast | |
| 468 | KU = Kurgan Oblast | |
| 469 | CL = Chelyabinsk Oblast | |
| 470 | SV = Sverdlovsk Oblast | |
| 471 | AR = Arkhangelsk Oblast | |
| 472 | NE = Nenets Autonomous Okrug | |
| 473 | KO = Komi Republic | |
| 474 | MU = Murmansk Oblast | |
| 475 | VO = Vologda Oblast | |
| 476 | NO = Novgorod Oblast | |
| 477 | PS = Pskov Oblast | |
| 478 | LE = Leningrad Oblast | |
| 479 | KL = Republic of Karelia | |
| 480 | KN = Kaliningrad Oblast | |
| 481 | DA = Republic of Dagestan | |
| 482 | ST = Stavropol Krai | |
| 483 | SO = Republic of North Ossetia–Alania | |
| 484 | KB = Kabardino-Balkar Republic | |
| 485 | KH = Karachay–Cherkess Republic | |
| 486 | CC = Chechen Republic | |
| 487 | IN = Republic of Ingushetia | |
| 488 | AD = Republic of Adygea | |
| 489 | KS = Krasnodar Krai | |
| 490 | RO = Rostov Oblast | |
| 491 | KK = Republic of Kalmykia | |
| 492 | AS = Astrakhan Oblast | |
| 493 | VL = Volgograd Oblast | |
| 494 | TR = Tver Oblast | |
| 495 | SM = Smolensk Oblast | |
| 496 | BN = Bryansk Oblast | |
| 497 | KY = Kursk Oblast | |
| 498 | BL = Belgorod Oblast | |
| 499 | OR = Oryol Oblast | |
| 500 | KJ = Kaluga Oblast | |
| 501 | TL = Tula Oblast | |
| 502 | LP = Lipetsk Oblast | |
| 503 | MC = Moscow Oblast | |
| 504 | RZ = Ryazan Oblast | |
| 505 | TB = Tambov Oblast | |
| 506 | VM = Vladimir Oblast | |
| 507 | IV = Ivanovo Oblast | |
| 508 | YR = Yaroslavl Oblast | |
| 509 | KT = Kostroma Oblast | |
| 510 | NN = Nizhny Novgorod Oblast | |
| 511 | MR = Republic of Mordovia | |
| 512 | PZ = Penza Oblast | |
| 513 | SR = Saratov Oblast | |
| 514 | SS = Samara Oblast | |
| 515 | OB = Orenburg Oblast | |
| 516 | BS = Republic of Bashkortostan | |
| 517 | UL = Ulyanovsk Oblast | |
| 518 | CU = Chuvash Republic | |
| 519 | TA = Republic of Tatarstan | |
| 520 | ML = Mari El Republic | |
| 521 | UD = Udmurt Republic | |
| 522 | KI = Kirov Oblast | |
| 523 | PE = Perm Krai | |
| 524 | VN = Voronezh Oblast | |
| 525 | ||
| 526 | **showTooltip** *boolean* | |
| 527 | ||
| 528 | Whether to show Tooltips on Mouseover ( true or false, defaults to true) | |
| 529 | ||
| 530 | **onLabelShow** *function(event, label, code)* | |
| 531 | ||
| 532 | Callback function which will be called before label is shown. Label DOM object and country code will be passed to the callback as arguments. | |
| 533 | ||
| 534 | **onRegionOver** *function(event, code, region)* | |
| 535 | ||
| 536 | Callback function which will be called when the mouse cursor enters the region path. Country code will be passed to the callback as argument. | |
| 537 | ||
| 538 | **onRegionOut** *function(event, code, region)* | |
| 539 | ||
| 540 | Callback function which will be called when the mouse cursor leaves the region path. Country code will be passed to the callback as argument. | |
| 541 | ||
| 542 | **onRegionClick** *function(event, code, region)* | |
| 543 | ||
| 544 | Callback function which will be called when the user clicks the region path. Country code will be passed to the callback as argument. This callback may be called while the user is moving the map. If you need to distinguish between a "real" click and a click resulting from moving the map, you can inspect **$(event.currentTarget).data('mapObject').isMoving**. | |
| 545 | ||
| 546 | Dynamic Updating | |
| 547 | ====== | |
| 548 | ||
| 549 | Most of the options can be changed after initialization using the following code: | |
| 550 | ||
| 551 | jQuery('#vmap').vectorMap('set', 'colors', {us: '#0000ff'}); | |
| 552 | ||
| 553 | Instead of colors can be used any parameter except callbacks. Callbacks can be added and deleted using standard jQuery patterns of working with events. | |
| 554 | You can define callback function when you initialize JQVMap: | |
| 555 | ||
| 556 | jQuery('#vmap').vectorMap( | |
| 557 | { | |
| 558 | onLabelShow: function(event, label, code) | |
| 559 | { | |
| 560 | ||
| 561 | }, | |
| 562 | onRegionOver: function(event, code, region) | |
| 563 | { | |
| 564 | ||
| 565 | }, | |
| 566 | onRegionOut: function(event, code, region) | |
| 567 | { | |
| 568 | ||
| 569 | }, | |
| 570 | onRegionClick: function(event, code, region) | |
| 571 | { | |
| 572 | ||
| 573 | } | |
| 574 | }); | |
| 575 | ||
| 576 | Or later using standard jQuery mechanism: | |
| 577 | ||
| 578 | jQuery('#vmap').bind('labelShow.jqvmap', | |
| 579 | function(event, label, code) | |
| 580 | { | |
| 581 | ||
| 582 | } | |
| 583 | ); | |
| 584 | jQuery('#vmap').bind('regionMouseOver.jqvmap', | |
| 585 | function(event, code, region) | |
| 586 | { | |
| 587 | ||
| 588 | } | |
| 589 | ); | |
| 590 | jQuery('#vmap').bind('regionMouseOut.jqvmap', | |
| 591 | function(event, code, region) | |
| 592 | { | |
| 593 | ||
| 594 | } | |
| 595 | ); | |
| 596 | jQuery('#vmap').bind('regionClick.jqvmap', | |
| 597 | function(event, code, region) | |
| 598 | { | |
| 599 | ||
| 600 | } | |
| 601 | ); | |
| 602 | ||
| 603 | Consider that fact that you can use standard features of jQuery events like event.preventDefault() or returning false from the callback to prevent default behavior of JQVMap (showing label or changing country color on hover). In the following example, when user moves mouse cursor over Canada label won't be shown and color of country won't be changed. At the same label for Russia will have custom text. | |
| 604 | ||
| 605 | jQuery('#vmap').vectorMap( | |
| 606 | { | |
| 607 | onLabelShow: function(event, label, code) | |
| 608 | { | |
| 609 | if (code == 'ca') | |
| 610 | { | |
| 611 | event.preventDefault(); | |
| 612 | } | |
| 613 | else if (code == 'ru') | |
| 614 | { | |
| 615 | label.text('Bears, vodka, balalaika'); | |
| 616 | } | |
| 617 | }, | |
| 618 | onRegionOver: function(event, code) | |
| 619 | { | |
| 620 | if (code == 'ca') | |
| 621 | { | |
| 622 | event.preventDefault(); | |
| 623 | } | |
| 624 | }, | |
| 625 | }); | |
| 626 | ||
| 627 | Data Visualization | |
| 628 | ====== | |
| 629 | ||
| 630 | Here I want to demonstrate how visualization of some geographical-related data can be done using JQVMap. Let's visualize information about GDP in 2010 for every country. At first we need some data. Let it be site of International Monetary Fond. There we can get information in xsl format, which can be converted first to csv and then to json with any scripting language. Now we have file gdp-data.js with such content (globals are evil, I know, but just for the sake of simplification): | |
| 631 | ||
| 632 | var sample_data = {"af":16.63,"al":11.58,"dz":158.97,...}; | |
| 633 | ||
| 634 | Then connect it to the page and add some code to make visualization: | |
| 635 | ||
| 636 | var max = 0, | |
| 637 | min = Number.MAX_VALUE, | |
| 638 | cc, | |
| 639 | startColor = [200, 238, 255], | |
| 640 | endColor = [0, 100, 145], | |
| 641 | colors = {}, | |
| 642 | hex; | |
| 643 | ||
| 644 | //find maximum and minimum values | |
| 645 | for (cc in gdpData) | |
| 646 | { | |
| 647 | if (parseFloat(gdpData[cc]) > max) | |
| 648 | { | |
| 649 | max = parseFloat(gdpData[cc]); | |
| 650 | } | |
| 651 | if (parseFloat(gdpData[cc]) < min) | |
| 652 | { | |
| 653 | min = parseFloat(gdpData[cc]); | |
| 654 | } | |
| 655 | } | |
| 656 | ||
| 657 | //set colors according to values of GDP | |
| 658 | for (cc in gdpData) | |
| 659 | { | |
| 660 | if (gdpData[cc] > 0) | |
| 661 | { | |
| 662 | colors[cc] = '#'; | |
| 663 | for (var i = 0; i<3; i++) | |
| 664 | { | |
| 665 | hex = Math.round(startColor[i] | |
| 666 | + (endColor[i] | |
| 667 | - startColor[i]) | |
| 668 | * (gdpData[cc] / (max - min))).toString(16); | |
| 669 | ||
| 670 | if (hex.length == 1) | |
| 671 | { | |
| 672 | hex = '0'+hex; | |
| 673 | } | |
| 674 | ||
| 675 | colors[cc] += (hex.length == 1 ? '0' : '') + hex; | |
| 676 | } | |
| 677 | } | |
| 678 | } | |
| 679 | ||
| 680 | //initialize JQVMap | |
| 681 | jQuery('#vmap').vectorMap( | |
| 682 | { | |
| 683 | colors: colors, | |
| 684 | hoverOpacity: 0.7, | |
| 685 | hoverColor: false | |
| 686 | }); | |
| 687 | ||
| 688 | Custom Maps | |
| 689 | ====== | |
| 690 | ||
| 691 | The following is the converter instructions directly from [jVectorMap](https://github.com/bjornd/jvectormap) that could be used to create your own maps for JQVMap from the data in various GIS formats like Shapefile. The following command could be used to convert USA map from the data available at [www.naturalearthdata.com](www.naturalearthdata.com): | |
| 692 | ||
| 693 | python \ | |
| 694 | path/to/converter.py \ | |
| 695 | path/to/geo-data.shp \ | |
| 696 | path/to/resulting-map.js \ | |
| 697 | --width 900 \ | |
| 698 | --country_name_index 4 \ | |
| 699 | --where "ISO = 'USA'" \ | |
| 700 | --codes_file path/to/codes-en.tsv \ | |
| 701 | --insets '[{"codes": ["US-AK"], "width": 200, "left": 10, "top": 370}, {"codes": ["US-HI"], "width": 100, "left": 220, "top": 400}]' \ | |
| 702 | --minimal_area 4000000 \ | |
| 703 | --buffer_distance -3000 \ | |
| 704 | --simplify_tolerance 1000 \ | |
| 705 | --longtitude0 10w \ | |
| 706 | --name us | |
