Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!-- jQuery -->
- <script type="text/javascript" src="/js/jquery.min.js"></script>
- <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
- <!-- JQVMap -->
- <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.min.js"></script>
- <!--<script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.js"></script>-->
- <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.world.js"></script>
- <script type="text/javascript" src="/newsite/js/jvectormap/jquery.vmap.sampledata.js"></script>
- <script type="text/javascript" src="/newsite/js/jvectormap/gdp-data.js"></script>
- <div id="vmap" style="width: 600px; height: 400px;"></div>
- var accountbalanceData = {
- "AF": -1.086,
- "AL": -13.237,
- "DZ": 9.984,
- "AO": 9.717,
- "AG": -13.686,
- "AR": -0.701,
- "AM": -11.043,
- "AU": -4.614,
- "AT": 1.374,
- "AZ": 21.789,
- ...};
- var gdpData = {
- "OM": 53.78,
- "PK": 174.79,
- "PA": 27.2,
- "PG": 8.81,
- "PY": 17.17,
- "PE": 153.55,
- "PH": 189.06,
- "PL": 438.88,
- "PT": 223.7,
- ...};
- .jqvmap-label
- {
- position: absolute;
- display: none;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- background: #292929;
- color: white;
- font-family: sans-serif, Verdana;
- font-size: smaller;
- padding: 3px;
- }
- .jqvmap-zoomin, .jqvmap-zoomout
- {
- position: absolute;
- left: 10px;
- -webkit-border-radius: 3px;
- -moz-border-radius: 3px;
- border-radius: 3px;
- background: #000000;
- padding: 3px;
- color: white;
- width: 10px;
- height: 10px;
- cursor: pointer;
- line-height: 10px;
- text-align: center;
- }
- .jqvmap-zoomin
- {
- top: 10px;
- }
- .jqvmap-zoomout
- {
- top: 30px;
- }
- .jqvmap-region
- {
- cursor: pointer;
- }
- .jqvmap-ajax_response
- {
- width: 100%;
- height: 500px;
- }
- <script>
- $(function(){
- var max = 0,
- min = Number.MAX_VALUE,
- cc,
- startColor = [200, 238, 255],
- endColor = [0, 100, 145],
- mycolors = {},
- hex;
- //find maximum and minimum values
- for (cc in sample_data)
- {
- if (parseFloat(sample_data[cc]) > max)
- {
- max = parseFloat(sample_data[cc]);
- }
- if (parseFloat(sample_data[cc]) < min)
- {
- min = parseFloat(sample_data[cc]);
- }
- };
- //set colors according to values of GDP
- for (cc in sample_data)
- {
- if (sample_data[cc] > 0)
- {
- mycolors[cc] = '#';
- for (var i = 0; i<3; i++)
- {
- hex = Math.round(startColor[i]
- + (endColor[i]
- - startColor[i])
- * (gdpData[cc] / (max - min))).toString(16);
- if (hex.length == 1)
- {
- hex = '0'+hex;
- }
- mycolors[cc] += (hex.length == 1 ? '0' : '') + hex;
- }
- }
- };
- jQuery('#vmap').vectorMap({
- map: 'world_en',
- //backgroundColor: '#a5bfdd', //Color of the background ("Ocean's")
- borderColor: '#818181', //Color of the country borders
- borderOpacity: 0.15, //Border thickness
- borderWidth: 1,
- //color: 'white', //Country color
- series: {
- regions: [{
- values: sample_data,
- scale: ['#C8EEFF', '#0071A4'],
- normalizeFunction: 'polynomial',
- }]
- },
- colors: mycolors,
- hoverOpacity: 0.7,
- hoverColor: false,
- //scaleColors: ['#b6d6ff', '#005ace'],
- onRegionClick: function(element, code, region)
- {
- var message = 'You clicked "'
- + region
- + '" which has the code: '
- + code.toUpperCase();
- alert(message);
- }
- });
- });
- </script>
- $('#vmap').vectorMap({
- map: 'world_mill_en',
- regionStyle: //your initial values (including hover)
- series: {
- regions: [{
- values: accountbalanceData,
- scale: ['#C8EEFF', '#0071A4'],
- normalizeFunction: 'polynomial',
- }]
- },
- onRegionClick: function(element, code, region)
- {
- var message = 'You clicked "'
- + region
- + '" which has the code: '
- + code.toUpperCase();
- alert(message);
- }
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement