github.com/insionng/yougam@v0.0.0-20170714101924-2bc18d833463/public/js/jvectormap/demo.js (about) 1 !function ($) { 2 3 $(function(){ 4 5 $('#world_map').vectorMap({ 6 map: 'world_mill_en', 7 normalizeFunction: 'polynomial', 8 backgroundColor: '#fff', 9 regionStyle: { 10 initial: { 11 fill: '#36424f' 12 }, 13 hover: { 14 fill: '#1ccc88' 15 }, 16 }, 17 markerStyle: { 18 initial: { 19 fill: '#1ccc88', 20 stroke: '#fff' 21 } 22 }, 23 markers: [ 24 {latLng: [41.90, 12.45], name: 'Vatican City'}, 25 {latLng: [43.73, 7.41], name: 'Monaco'}, 26 {latLng: [-0.52, 166.93], name: 'Nauru'}, 27 {latLng: [-8.51, 179.21], name: 'Tuvalu'}, 28 {latLng: [43.93, 12.46], name: 'San Marino'}, 29 {latLng: [47.14, 9.52], name: 'Liechtenstein'}, 30 {latLng: [7.11, 171.06], name: 'Marshall Islands'}, 31 {latLng: [17.3, -62.73], name: 'Saint Kitts and Nevis'}, 32 {latLng: [3.2, 73.22], name: 'Maldives'}, 33 {latLng: [35.88, 14.5], name: 'Malta'}, 34 {latLng: [12.05, -61.75], name: 'Grenada'}, 35 {latLng: [13.16, -61.23], name: 'Saint Vincent and the Grenadines'}, 36 {latLng: [13.16, -59.55], name: 'Barbados'}, 37 {latLng: [17.11, -61.85], name: 'Antigua and Barbuda'}, 38 {latLng: [-4.61, 55.45], name: 'Seychelles'}, 39 {latLng: [7.35, 134.46], name: 'Palau'}, 40 {latLng: [42.5, 1.51], name: 'Andorra'}, 41 {latLng: [14.01, -60.98], name: 'Saint Lucia'}, 42 {latLng: [6.91, 158.18], name: 'Federated States of Micronesia'}, 43 {latLng: [1.3, 103.8], name: 'Singapore'}, 44 {latLng: [1.46, 173.03], name: 'Kiribati'}, 45 {latLng: [-21.13, -175.2], name: 'Tonga'}, 46 {latLng: [15.3, -61.38], name: 'Dominica'}, 47 {latLng: [-20.2, 57.5], name: 'Mauritius'}, 48 {latLng: [26.02, 50.55], name: 'Bahrain'}, 49 {latLng: [0.33, 6.73], name: 'São Tomé and Príncipe'} 50 ] 51 }); 52 var map, 53 markers = [ 54 {latLng: [40.71, -74.00], name: 'New York'}, 55 {latLng: [34.05, -118.24], name: 'Los Angeles'}, 56 {latLng: [41.87, -87.62], name: 'Chicago'}, 57 {latLng: [29.76, -95.36], name: 'Houston'}, 58 {latLng: [39.95, -75.16], name: 'Philadelphia'}, 59 {latLng: [38.90, -77.03], name: 'Washington'}, 60 {latLng: [37.36, -122.03], name: 'Silicon Valley'} 61 ], 62 cityAreaData = [ 63 187.70, 64 255.16, 65 310.69, 66 605.17, 67 248.31, 68 107.35, 69 217.22 70 ]; 71 72 map = new jvm.WorldMap({ 73 container: $('#usa_map'), 74 map: 'us_aea_en', 75 backgroundColor: '#fff', 76 regionsSelectable: true, 77 markersSelectable: true, 78 markers: markers, 79 markerStyle: { 80 initial: { 81 fill: '#fcc633' 82 }, 83 selected: { 84 fill: '#ffffff' 85 } 86 }, 87 regionStyle: { 88 initial: { 89 fill: '#177bbb' 90 }, 91 selected: { 92 fill: '#1ccacc' 93 } 94 }, 95 series: { 96 markers: [{ 97 attribute: 'r', 98 scale: [5, 15], 99 values: cityAreaData 100 }] 101 }, 102 onRegionSelected: function(){ 103 if (window.localStorage) { 104 window.localStorage.setItem( 105 'jvectormap-selected-regions', 106 JSON.stringify(map.getSelectedRegions()) 107 ); 108 } 109 }, 110 onMarkerSelected: function(){ 111 if (window.localStorage) { 112 window.localStorage.setItem( 113 'jvectormap-selected-markers', 114 JSON.stringify(map.getSelectedMarkers()) 115 ); 116 } 117 } 118 }); 119 120 121 }); 122 }(window.jQuery);