map_info.twig (1624B)
1 <div class="panel panel-default"> 2 <div class="panel-heading"> 3 <h3 class="panel-title"><i class="fa fa-globe"></i> {{ heading_title }}</h3> 4 </div> 5 <div class="panel-body"> 6 <div id="vmap" style="width: 100%; height: 260px;"></div> 7 </div> 8 </div> 9 <link type="text/css" href="view/javascript/jquery/jqvmap/jqvmap.css" rel="stylesheet" media="screen" /> 10 <script type="text/javascript" src="view/javascript/jquery/jqvmap/jquery.vmap.js"></script> 11 <script type="text/javascript" src="view/javascript/jquery/jqvmap/maps/jquery.vmap.world.js"></script> 12 <script type="text/javascript"><!-- 13 $(document).ready(function() { 14 $.ajax({ 15 url: 'index.php?route=extension/dashboard/map/map&user_token={{ user_token }}', 16 dataType: 'json', 17 success: function(json) { 18 data = []; 19 20 for (i in json) { 21 data[i] = json[i]['total']; 22 } 23 24 $('#vmap').vectorMap({ 25 map: 'world_en', 26 backgroundColor: '#FFFFFF', 27 borderColor: '#FFFFFF', 28 color: '#9FD5F1', 29 hoverOpacity: 0.7, 30 selectedColor: '#666666', 31 enableZoom: true, 32 showTooltip: true, 33 values: data, 34 normalizeFunction: 'polynomial', 35 onLabelShow: function(event, label, code) { 36 if (json[code]) { 37 label.html('<strong>' + label.text() + '</strong><br />' + '{{ text_order }} ' + json[code]['total'] + '<br />' + '{{ text_sale }} ' + json[code]['amount']); 38 } 39 } 40 }); 41 }, 42 error: function(xhr, ajaxOptions, thrownError) { 43 alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText); 44 } 45 }); 46 }); 47 //--></script>