jqvmap.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228
  1. /*=========================================================================================
  2. File Name: jqvmap.js
  3. Description: jQuery vector maps examples.
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Robust - Responsive Admin Theme
  6. Version: 1.2
  7. Author: PIXINVENT
  8. Author URL: http://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. // jQuery vector maps
  11. // -----------------------------------
  12. $(window).on("load", function(){
  13. // Continents Vector Maps
  14. // -----------------------------------
  15. $('.continent-tab').each(function () {
  16. $(this).on('click', function () {
  17. $('.tab-selected').removeClass('tab-selected');
  18. $(this).addClass('tab-selected');
  19. $('.continent-map').css('z-index', '0');
  20. $('#continent-' + this.id).parent().css('z-index', '1');
  21. });
  22. });
  23. $('.continent-tab:first').addClass('tab-selected');
  24. $('.continent-map:first').css('z-index', '1');
  25. // Asia
  26. jQuery('#continent-asia').vectorMap({
  27. map: 'asia_en',
  28. backgroundColor: '#FFFFFF',
  29. borderColor: '#FFF',
  30. color: '#2A363B',
  31. hoverOpacity: 0.7,
  32. selectedColor: '#99B898',
  33. enableZoom: true,
  34. showTooltip: true,
  35. values: sample_data,
  36. scaleColors: ['#FECEA8', '#E84A5F'],
  37. normalizeFunction: 'polynomial'
  38. });
  39. // Europe
  40. jQuery('#continent-europe').vectorMap({
  41. map: 'europe_en',
  42. backgroundColor: '#FFFFFF',
  43. borderColor: '#FFF',
  44. color: '#2A363B',
  45. hoverOpacity: 0.7,
  46. selectedColor: '#99B898',
  47. enableZoom: true,
  48. showTooltip: true,
  49. values: sample_data,
  50. scaleColors: ['#FECEA8', '#E84A5F'],
  51. normalizeFunction: 'polynomial'
  52. });
  53. // Australia
  54. jQuery('#continent-australia').vectorMap({
  55. map: 'australia_en',
  56. backgroundColor: '#FFFFFF',
  57. borderColor: '#FFF',
  58. color: '#2A363B',
  59. hoverOpacity: 0.7,
  60. selectedColor: '#99B898',
  61. enableZoom: true,
  62. showTooltip: true,
  63. values: sample_data,
  64. scaleColors: ['#FECEA8', '#E84A5F'],
  65. normalizeFunction: 'polynomial'
  66. });
  67. // Africa
  68. jQuery('#continent-africa').vectorMap({
  69. map: 'africa_en',
  70. backgroundColor: '#FFFFFF',
  71. borderColor: '#FFF',
  72. color: '#2A363B',
  73. hoverOpacity: 0.7,
  74. selectedColor: '#99B898',
  75. enableZoom: true,
  76. showTooltip: true,
  77. values: sample_data,
  78. scaleColors: ['#FECEA8', '#E84A5F'],
  79. normalizeFunction: 'polynomial'
  80. });
  81. // North America
  82. jQuery('#continent-northamerica').vectorMap({
  83. map: 'north-america_en',
  84. backgroundColor: '#FFFFFF',
  85. borderColor: '#FFF',
  86. color: '#2A363B',
  87. hoverOpacity: 0.7,
  88. selectedColor: '#99B898',
  89. enableZoom: true,
  90. showTooltip: true,
  91. values: sample_data,
  92. scaleColors: ['#FECEA8', '#E84A5F'],
  93. normalizeFunction: 'polynomial'
  94. });
  95. // South America
  96. jQuery('#continent-southamerica').vectorMap({
  97. map: 'south-america_en',
  98. backgroundColor: '#FFFFFF',
  99. borderColor: '#FFF',
  100. color: '#2A363B',
  101. hoverOpacity: 0.7,
  102. selectedColor: '#99B898',
  103. enableZoom: true,
  104. showTooltip: true,
  105. values: sample_data,
  106. scaleColors: ['#FECEA8', '#E84A5F'],
  107. normalizeFunction: 'polynomial'
  108. });
  109. // Multi Select Region
  110. // -----------------------------------
  111. jQuery('#multi-select-region').vectorMap({
  112. map: 'usa_en',
  113. backgroundColor: '#FFFFFF',
  114. borderColor: '#FFF',
  115. color: '#E84A5F',
  116. selectedColor: '#FECEA8',
  117. enableZoom: true,
  118. showTooltip: true,
  119. multiSelectRegion: true,
  120. selectedRegions: ['TX']
  121. });
  122. // Custom Pins
  123. // -----------------------------------
  124. function escapeXml(string) {
  125. return string.replace(/[<>]/g, function (c) {
  126. switch (c) {
  127. case '<': return '\u003c';
  128. case '>': return '\u003e';
  129. }
  130. });
  131. }
  132. var pins = {
  133. mo: escapeXml('<div class="map-pin red"><span>MO</span></div>'),
  134. fl: escapeXml('<div class="map-pin blue"><span>FL</span></div>'),
  135. or: escapeXml('<div class="map-pin purple"><span>OR</span></div>')
  136. };
  137. jQuery('#custom-pins').vectorMap({
  138. backgroundColor: '#FFF',
  139. borderColor: '#FFF',
  140. map: 'usa_en',
  141. pins: pins,
  142. color: '#99B898',
  143. pinMode: 'content',
  144. hoverColor: null,
  145. selectedColor: '#FECEA8',
  146. showTooltip: false,
  147. selectedRegions: ['MO', 'FL', 'OR'],
  148. onRegionClick: function(event){
  149. event.preventDefault();
  150. }
  151. });
  152. // Inactive Regions
  153. // -----------------------------------
  154. var inactive_region_map;
  155. jQuery(document).ready(function () {
  156. // Store currentRegion
  157. var currentRegion = 'fl';
  158. // List of Regions we'll let clicks through for
  159. var enabledRegions = ['mo', 'fl', 'or'];
  160. inactive_region_map = jQuery('#inactive-regions').vectorMap({
  161. map: 'usa_en',
  162. backgroundColor: '#FFF',
  163. borderColor: '#FFF',
  164. enableZoom: true,
  165. showTooltip: true,
  166. color: '#99B898',
  167. selectedColor: '#FECEA8',
  168. selectedRegions: ['fl'],
  169. hoverColor: null,
  170. colors: {
  171. mo: '#2A363B',
  172. fl: '#2A363B',
  173. or: '#2A363B'
  174. },
  175. onRegionClick: function(event, code, region){
  176. // Check if this is an Enabled Region, and not the current selected on
  177. if(enabledRegions.indexOf(code) === -1 || currentRegion === code){
  178. // Not an Enabled Region
  179. event.preventDefault();
  180. } else {
  181. // Enabled Region. Update Newly Selected Region.
  182. currentRegion = code;
  183. }
  184. },
  185. onRegionSelect: function(event, code, region){
  186. console.log(inactive_region_map.selectedRegions);
  187. },
  188. onLabelShow: function(event, label, code){
  189. if(enabledRegions.indexOf(code) === -1){
  190. event.preventDefault();
  191. }
  192. }
  193. });
  194. });
  195. // World Map
  196. // -----------------------------------
  197. jQuery('#world-map').vectorMap({
  198. map: 'world_en',
  199. backgroundColor: '#FFFFFF',
  200. borderColor: '#FFF',
  201. color: '#2A363B',
  202. hoverOpacity: 0.7,
  203. selectedColor: '#99B898',
  204. enableZoom: true,
  205. showTooltip: true,
  206. scaleColors: ['#FECEA8', '#E84A5F'],
  207. values: sample_data,
  208. normalizeFunction: 'polynomial'
  209. });
  210. });