gquintard/VCS_MAP.html

## VCS_MAP.html
<html>
    <head>
        <title>JQVMap - World Map</title>
        <link href="https://raw.githubusercontent.com/manifestinteractive/jqvmap/master/dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
        <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
        <script type="text/javascript" src="https://rawgit.com/manifestinteractive/jqvmap/master/dist/jquery.vmap.js"></script>
        <script type="text/javascript" src="https://rawgit.com/manifestinteractive/jqvmap/master/dist/maps/jquery.vmap.world.js" charset="utf-8"></script>

        <script type="text/javascript">
var g_reqs = {};
function parseAndShow(data) {
    var countries = [
        'af', 'ax', 'al', 'dz', 'as', 'ad', 'ao', 'ai', 'aq', 'ag', 'ar', 'am',
        'aw', 'au', 'at', 'az', 'bs', 'bh', 'bd', 'bb', 'by', 'be', 'bz', 'bj',
        'bm', 'bt', 'bo', 'ba', 'bw', 'bv', 'br', 'io', 'bn', 'bg', 'bf', 'bi',
        'kh', 'cm', 'ca', 'cv', 'ky', 'cf', 'td', 'cl', 'cn', 'cx', 'cc', 'co',
        'km', 'cg', 'cd', 'ck', 'cr', 'ci', 'hr', 'cu', 'cy', 'cz', 'dk', 'dj',
        'dm', 'do', 'ec', 'eg', 'sv', 'gq', 'er', 'ee', 'et', 'fk', 'fo', 'fj',
        'fi', 'fr', 'gf', 'pf', 'tf', 'ga', 'gm', 'ge', 'de', 'gh', 'gi', 'gr',
        'gl', 'gd', 'gp', 'gu', 'gt', 'gg', 'gn', 'gw', 'gy', 'ht', 'hm', 'va',
        'hn', 'hk', 'hu', 'is', 'in', 'id', 'ir', 'iq', 'ie', 'im', 'il', 'it',
        'jm', 'jp', 'je', 'jo', 'kz', 'ke', 'ki', 'kr', 'kw', 'kg', 'la', 'lv',
        'lb', 'ls', 'lr', 'ly', 'li', 'lt', 'lu', 'mo', 'mk', 'mg', 'mw', 'my',
        'mv', 'ml', 'mt', 'mh', 'mq', 'mr', 'mu', 'yt', 'mx', 'fm', 'md', 'mc',
        'mn', 'me', 'ms', 'ma', 'mz', 'mm', 'na', 'nr', 'np', 'nl', 'an', 'nc',
        'nz', 'ni', 'ne', 'ng', 'nu', 'nf', 'mp', 'no', 'om', 'pk', 'pw', 'ps',
        'pa', 'pg', 'py', 'pe', 'ph', 'pn', 'pl', 'pt', 'pr', 'qa', 're', 'ro',
        'ru', 'rw', 'bl', 'sh', 'kn', 'lc', 'mf', 'pm', 'vc', 'ws', 'sm', 'st',
        'sa', 'sn', 'rs', 'sc', 'sl', 'sg', 'sk', 'si', 'sb', 'so', 'za', 'gs',
        'es', 'lk', 'sd', 'sr', 'sj', 'sz', 'se', 'ch', 'sy', 'tw', 'tj', 'tz',
        'th', 'tl', 'tg', 'tk', 'to', 'tt', 'tn', 'tr', 'tm', 'tc', 'tv', 'ug',
        'ua', 'ae', 'gb', 'us', 'um', 'uy', 'uz', 'vu', 've', 'vn', 'vg', 'vi',
        'wf', 'eh', 'ye', 'zm', 'zw', 'kp'
    ];

    var reqs = {};
    $.each(countries, function(idx, key) {
        var ckey = "COUNTRY-" + key.toUpperCase();
	if (data[ckey]) {
            reqs[key] = data[ckey];
	} else {
            reqs[key] = 0;
	}
    });

    g_reqs = reqs;
    jQuery('#vmap').vectorMap('set', 'values',  reqs);
    setTimeout(mapUpdate, 20000);
}

function mapUpdate() {
    $.getJSON("http://127.0.0.1:8888/match/COUNTRY/top/300?b=20&callback=?", parseAndShow);
};

function labelShow(event, label, code) {
	label.text(g_reqs[code] +
                    " requests originated from " +
                    JQVMap.maps['world_en'].paths[code].name)
}

function regionClick(event, label, code) {
    event.preventDefault();
}

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'world_en',
        hoverColor: '#005aff',
        scaleColors: ['#d8f8ff', '#005ace'],
        onRegionClick: regionClick,
        onLabelShow: labelShow,
        normalizeFunction: 'polynomial'
    });
    mapUpdate();
});

        </script>
    </head>
    <body>
        <div id="vmap" style="width: 100%; height: 90%;"></div>
    </body>
</html>
	<html>
	<head>
	<title>JQVMap - World Map</title>
	<link href="https://raw.githubusercontent.com/manifestinteractive/jqvmap/master/dist/jqvmap.css" media="screen" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
	<script type="text/javascript" src="https://rawgit.com/manifestinteractive/jqvmap/master/dist/jquery.vmap.js"></script>
	<script type="text/javascript" src="https://rawgit.com/manifestinteractive/jqvmap/master/dist/maps/jquery.vmap.world.js" charset="utf-8"></script>

	<script type="text/javascript">
	var g_reqs = {};
	function parseAndShow(data) {
	var countries = [
	'af', 'ax', 'al', 'dz', 'as', 'ad', 'ao', 'ai', 'aq', 'ag', 'ar', 'am',
	'aw', 'au', 'at', 'az', 'bs', 'bh', 'bd', 'bb', 'by', 'be', 'bz', 'bj',
	'bm', 'bt', 'bo', 'ba', 'bw', 'bv', 'br', 'io', 'bn', 'bg', 'bf', 'bi',
	'kh', 'cm', 'ca', 'cv', 'ky', 'cf', 'td', 'cl', 'cn', 'cx', 'cc', 'co',
	'km', 'cg', 'cd', 'ck', 'cr', 'ci', 'hr', 'cu', 'cy', 'cz', 'dk', 'dj',
	'dm', 'do', 'ec', 'eg', 'sv', 'gq', 'er', 'ee', 'et', 'fk', 'fo', 'fj',
	'fi', 'fr', 'gf', 'pf', 'tf', 'ga', 'gm', 'ge', 'de', 'gh', 'gi', 'gr',
	'gl', 'gd', 'gp', 'gu', 'gt', 'gg', 'gn', 'gw', 'gy', 'ht', 'hm', 'va',
	'hn', 'hk', 'hu', 'is', 'in', 'id', 'ir', 'iq', 'ie', 'im', 'il', 'it',
	'jm', 'jp', 'je', 'jo', 'kz', 'ke', 'ki', 'kr', 'kw', 'kg', 'la', 'lv',
	'lb', 'ls', 'lr', 'ly', 'li', 'lt', 'lu', 'mo', 'mk', 'mg', 'mw', 'my',
	'mv', 'ml', 'mt', 'mh', 'mq', 'mr', 'mu', 'yt', 'mx', 'fm', 'md', 'mc',
	'mn', 'me', 'ms', 'ma', 'mz', 'mm', 'na', 'nr', 'np', 'nl', 'an', 'nc',
	'nz', 'ni', 'ne', 'ng', 'nu', 'nf', 'mp', 'no', 'om', 'pk', 'pw', 'ps',
	'pa', 'pg', 'py', 'pe', 'ph', 'pn', 'pl', 'pt', 'pr', 'qa', 're', 'ro',
	'ru', 'rw', 'bl', 'sh', 'kn', 'lc', 'mf', 'pm', 'vc', 'ws', 'sm', 'st',
	'sa', 'sn', 'rs', 'sc', 'sl', 'sg', 'sk', 'si', 'sb', 'so', 'za', 'gs',
	'es', 'lk', 'sd', 'sr', 'sj', 'sz', 'se', 'ch', 'sy', 'tw', 'tj', 'tz',
	'th', 'tl', 'tg', 'tk', 'to', 'tt', 'tn', 'tr', 'tm', 'tc', 'tv', 'ug',
	'ua', 'ae', 'gb', 'us', 'um', 'uy', 'uz', 'vu', 've', 'vn', 'vg', 'vi',
	'wf', 'eh', 'ye', 'zm', 'zw', 'kp'
	];

	var reqs = {};
	$.each(countries, function(idx, key) {
	var ckey = "COUNTRY-" + key.toUpperCase();
	if (data[ckey]) {
	reqs[key] = data[ckey];
	} else {
	reqs[key] = 0;
	}
	});

	g_reqs = reqs;
	jQuery('#vmap').vectorMap('set', 'values', reqs);
	setTimeout(mapUpdate, 20000);
	}

	function mapUpdate() {
	$.getJSON("http://127.0.0.1:8888/match/COUNTRY/top/300?b=20&callback=?", parseAndShow);
	};

	function labelShow(event, label, code) {
	label.text(g_reqs[code] +
	" requests originated from " +
	JQVMap.maps['world_en'].paths[code].name)
	}

	function regionClick(event, label, code) {
	event.preventDefault();
	}

	jQuery(document).ready(function() {
	jQuery('#vmap').vectorMap({
	map: 'world_en',
	hoverColor: '#005aff',
	scaleColors: ['#d8f8ff', '#005ace'],
	onRegionClick: regionClick,
	onLabelShow: labelShow,
	normalizeFunction: 'polynomial'
	});
	mapUpdate();
	});

	</script>
	</head>
	<body>
	<div id="vmap" style="width: 100%; height: 90%;"></div>
	</body>
	</html>