basic.html 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>jVectorMap demo</title>
  5. <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
  6. <script src="assets/jquery-1.8.2.js"></script>
  7. <script src="../jquery-jvectormap.js"></script>
  8. <script src="../lib/jquery-mousewheel.js"></script>
  9. <script src="../src/jvectormap.js"></script>
  10. <script src="../src/abstract-element.js"></script>
  11. <script src="../src/abstract-canvas-element.js"></script>
  12. <script src="../src/abstract-shape-element.js"></script>
  13. <script src="../src/svg-element.js"></script>
  14. <script src="../src/svg-group-element.js"></script>
  15. <script src="../src/svg-canvas-element.js"></script>
  16. <script src="../src/svg-shape-element.js"></script>
  17. <script src="../src/svg-path-element.js"></script>
  18. <script src="../src/svg-circle-element.js"></script>
  19. <script src="../src/svg-image-element.js"></script>
  20. <script src="../src/svg-text-element.js"></script>
  21. <script src="../src/vml-element.js"></script>
  22. <script src="../src/vml-group-element.js"></script>
  23. <script src="../src/vml-canvas-element.js"></script>
  24. <script src="../src/vml-shape-element.js"></script>
  25. <script src="../src/vml-path-element.js"></script>
  26. <script src="../src/vml-circle-element.js"></script>
  27. <script src="../src/vml-image-element.js"></script>
  28. <script src="../src/map-object.js"></script>
  29. <script src="../src/region.js"></script>
  30. <script src="../src/marker.js"></script>
  31. <script src="../src/vector-canvas.js"></script>
  32. <script src="../src/simple-scale.js"></script>
  33. <script src="../src/ordinal-scale.js"></script>
  34. <script src="../src/numeric-scale.js"></script>
  35. <script src="../src/color-scale.js"></script>
  36. <script src="../src/legend.js"></script>
  37. <script src="../src/data-series.js"></script>
  38. <script src="../src/proj.js"></script>
  39. <script src="../src/map.js"></script>
  40. <script src="assets/jquery-jvectormap-world-mill-en.js"></script>
  41. <script>
  42. jQuery.noConflict();
  43. jQuery(function(){
  44. var $ = jQuery;
  45. $('#focus-single').click(function(){
  46. $('#map1').vectorMap('set', 'focus', {region: 'AU', animate: true});
  47. });
  48. $('#focus-multiple').click(function(){
  49. $('#map1').vectorMap('set', 'focus', {regions: ['AU', 'JP'], animate: true});
  50. });
  51. $('#focus-coords').click(function(){
  52. $('#map1').vectorMap('set', 'focus', {scale: 7, lat: 35, lng: 33, animate: true});
  53. });
  54. $('#focus-init').click(function(){
  55. $('#map1').vectorMap('set', 'focus', {scale: 1, x: 0.5, y: 0.5, animate: true});
  56. });
  57. $('#map1').vectorMap({
  58. map: 'world_mill_en',
  59. panOnDrag: true,
  60. focusOn: {
  61. x: 0.5,
  62. y: 0.5,
  63. scale: 2,
  64. animate: true
  65. },
  66. series: {
  67. regions: [{
  68. scale: ['#C8EEFF', '#0071A4'],
  69. normalizeFunction: 'polynomial',
  70. values: {
  71. "AF": 16.63,
  72. "AL": 11.58,
  73. "DZ": 158.97,
  74. "AO": 85.81,
  75. "AG": 1.1,
  76. "AR": 351.02,
  77. "AM": 8.83,
  78. "AU": 1219.72,
  79. "AT": 366.26,
  80. "AZ": 52.17,
  81. "BS": 7.54,
  82. "BH": 21.73,
  83. "BD": 105.4,
  84. "BB": 3.96,
  85. "BY": 52.89,
  86. "BE": 461.33,
  87. "BZ": 1.43,
  88. "BJ": 6.49,
  89. "BT": 1.4,
  90. "BO": 19.18,
  91. "BA": 16.2,
  92. "BW": 12.5,
  93. "BR": 2023.53,
  94. "BN": 11.96,
  95. "BG": 44.84,
  96. "BF": 8.67,
  97. "BI": 1.47,
  98. "KH": 11.36,
  99. "CM": 21.88,
  100. "CA": 1563.66,
  101. "CV": 1.57,
  102. "CF": 2.11,
  103. "TD": 7.59,
  104. "CL": 199.18,
  105. "CN": 5745.13,
  106. "CO": 283.11,
  107. "KM": 0.56,
  108. "CD": 12.6,
  109. "CG": 11.88,
  110. "CR": 35.02,
  111. "CI": 22.38,
  112. "HR": 59.92,
  113. "CY": 22.75,
  114. "CZ": 195.23,
  115. "DK": 304.56,
  116. "DJ": 1.14,
  117. "DM": 0.38,
  118. "DO": 50.87,
  119. "EC": 61.49,
  120. "EG": 216.83,
  121. "SV": 21.8,
  122. "GQ": 14.55,
  123. "ER": 2.25,
  124. "EE": 19.22,
  125. "ET": 30.94,
  126. "FJ": 3.15,
  127. "FI": 231.98,
  128. "FR": 2555.44,
  129. "GA": 12.56,
  130. "GM": 1.04,
  131. "GE": 11.23,
  132. "DE": 3305.9,
  133. "GH": 18.06,
  134. "GR": 305.01,
  135. "GD": 0.65,
  136. "GT": 40.77,
  137. "GN": 4.34,
  138. "GW": 0.83,
  139. "GY": 2.2,
  140. "HT": 6.5,
  141. "HN": 15.34,
  142. "HK": 226.49,
  143. "HU": 132.28,
  144. "IS": 12.77,
  145. "IN": 1430.02,
  146. "ID": 695.06,
  147. "IR": 337.9,
  148. "IQ": 84.14,
  149. "IE": 204.14,
  150. "IL": 201.25,
  151. "IT": 2036.69,
  152. "JM": 13.74,
  153. "JP": 5390.9,
  154. "JO": 27.13,
  155. "KZ": 129.76,
  156. "KE": 32.42,
  157. "KI": 0.15,
  158. "KR": 986.26,
  159. "KW": 117.32,
  160. "KG": 4.44,
  161. "LA": 6.34,
  162. "LV": 23.39,
  163. "LB": 39.15,
  164. "LS": 1.8,
  165. "LR": 0.98,
  166. "LY": 77.91,
  167. "LT": 35.73,
  168. "LU": 52.43,
  169. "MK": 9.58,
  170. "MG": 8.33,
  171. "MW": 5.04,
  172. "MY": 218.95,
  173. "MV": 1.43,
  174. "ML": 9.08,
  175. "MT": 7.8,
  176. "MR": 3.49,
  177. "MU": 9.43,
  178. "MX": 1004.04,
  179. "MD": 5.36,
  180. "MN": 5.81,
  181. "ME": 3.88,
  182. "MA": 91.7,
  183. "MZ": 10.21,
  184. "MM": 35.65,
  185. "NA": 11.45,
  186. "NP": 15.11,
  187. "NL": 770.31,
  188. "NZ": 138,
  189. "NI": 6.38,
  190. "NE": 5.6,
  191. "NG": 206.66,
  192. "NO": 413.51,
  193. "OM": 53.78,
  194. "PK": 174.79,
  195. "PA": 27.2,
  196. "PG": 8.81,
  197. "PY": 17.17,
  198. "PE": 153.55,
  199. "PH": 189.06,
  200. "PL": 438.88,
  201. "PT": 223.7,
  202. "QA": 126.52,
  203. "RO": 158.39,
  204. "RU": 1476.91,
  205. "RW": 5.69,
  206. "WS": 0.55,
  207. "ST": 0.19,
  208. "SA": 434.44,
  209. "SN": 12.66,
  210. "RS": 38.92,
  211. "SC": 0.92,
  212. "SL": 1.9,
  213. "SG": 217.38,
  214. "SK": 86.26,
  215. "SI": 46.44,
  216. "SB": 0.67,
  217. "ZA": 354.41,
  218. "ES": 1374.78,
  219. "LK": 48.24,
  220. "KN": 0.56,
  221. "LC": 1,
  222. "VC": 0.58,
  223. "SD": 65.93,
  224. "SR": 3.3,
  225. "SZ": 3.17,
  226. "SE": 444.59,
  227. "CH": 522.44,
  228. "SY": 59.63,
  229. "TW": 426.98,
  230. "TJ": 5.58,
  231. "TZ": 22.43,
  232. "TH": 312.61,
  233. "TL": 0.62,
  234. "TG": 3.07,
  235. "TO": 0.3,
  236. "TT": 21.2,
  237. "TN": 43.86,
  238. "TR": 729.05,
  239. "TM": 0,
  240. "UG": 17.12,
  241. "UA": 136.56,
  242. "AE": 239.65,
  243. "GB": 2258.57,
  244. "US": 14624.18,
  245. "UY": 40.71,
  246. "UZ": 37.72,
  247. "VU": 0.72,
  248. "VE": 285.21,
  249. "VN": 101.99,
  250. "YE": 30.02,
  251. "ZM": 15.69,
  252. "ZW": 5.57
  253. }
  254. }]
  255. }
  256. });
  257. })
  258. </script>
  259. </head>
  260. <body>
  261. <div style="height: 400px"></div>
  262. <div id="map1" style="width: 600px; height: 400px"></div>
  263. <button id="focus-single">Focus on Australia</button>
  264. <button id="focus-multiple">Focus on Australia and Japan</button>
  265. <button id="focus-coords">Focus on Cyprus</button>
  266. <button id="focus-init">Return to the initial state</button>
  267. </body>
  268. </html>