ghoti143/bp_map.html

## bp_map.html
<html>
<head>
<script src='https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'></script>
<script src="https://unpkg.com/ramda@0.25.0/dist/ramda.min.js"></script>
<script src="https://unpkg.com/socket.io-client@2.1.1/dist/socket.io.slim.js"></script>

<script src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'></script>
<link rel='stylesheet' href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css' />

<script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
<link rel='stylesheet' href='https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css' />
<link rel='stylesheet' href='https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css' />

<script>
var socket = io("http://eosnetworkmonitor.io:3000");
var bpList = [];
var BPLocations = {};
var myMap = null;
var myMarkers = null;
var apiMarkers = [];
var p2pMarkers = [];
var totalGets = 0;
var currentLayers = "";
var currentProds = [];
var top21 = [];

var comp = function(a, b) { return parseFloat(b.total_votes) - parseFloat(a.total_votes); }

$.post("http://api.eosnewyork.io/v1/chain/get_table_rows", '{"scope":"eosio", "code":"eosio", "table":"producers", "json": true, "limit": 5000}', function(data) {
	currentProds = R.sort(comp, data.rows);
	for(var i = 0; i < 21; i++) {
		top21.push(currentProds[i].owner);
	}

	if(top21.length && bpList.length) getNodeLocations();
});

socket.on('initNodes', function(msg) {
  console.log(msg);
  bpList = msg;

  if(top21.length && bpList.length) getNodeLocations();
});

function parseLocData(data) {
	var bp_name = data.id.split('_')[0];
	var server_type = data.id.split('_')[1];

	if(!BPLocations[bp_name]) {
		BPLocations[bp_name] = {api:{}, p2p: {}};
	}

	BPLocations[bp_name][server_type] = { lat: data.lat, lng: data.lon };
}

function initMap() {
	myMap = L.map('map');
	myMap.fitWorld().zoomIn();

	var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
		maxZoom: 18,
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	});

	var CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
		subdomains: 'abcd',
		maxZoom: 19
	});

	var CartoDB_DarkMatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png', {
		attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
		subdomains: 'abcd',
		maxZoom: 19
	});

	CartoDB_Positron.addTo(myMap);

	myMap.attributionControl.setPrefix(false);
	myMarkers = L.markerClusterGroup({
		maxClusterRadius: 10
	});
	myMap.addLayer(myMarkers);
}

function getNodeLocations(){
	BPLocations = {};

	for (var idx in bpList) {
		var bp = bpList[idx];
		if (bp.bp && top21.includes(bp.bp_name)) {

			var apiHost = bp.http_server_address.split(":")[0];
			var p2pHost = bp.p2p_server_address.split(":")[0];
			var bp_name = bp.bp_name;

			if (bp.https_server_address) {
				apiHost = bp.https_server_address.split(":")[0];
			}

			getLocInfo(bp_name + '_api', apiHost);
			getLocInfo(bp_name + '_p2p', p2pHost);
		}
	}
}

function getLocInfo(id, ip) {
	var blacklist = ["127.0.0.1", "", "0.0.0.0"]
	if (!blacklist.includes(ip)) {
		totalGets++;
		$.get("http://ip.kitpes.com/?id="+id+"&ip="+ip, handleLoc).always(handleCount);
	}
}

function handleLoc(data_str) {
	var data = JSON.parse(data_str);
	//parseLocData(data);
	var marker = L.marker([data.lat, data.lon]);
	marker.bindTooltip(data.id);

	if(data.id.split('_')[1] === 'p2p') {
		p2pMarkers.push(marker);
	} else {
		apiMarkers.push(marker);
	}
}

function handleCount() {
	totalGets--;
	if(totalGets === 0) {
		for(var i = 0; i < p2pMarkers.length; i++) {
			myMarkers.addLayer(p2pMarkers[i]);
		}
		currentLayers = "p2p";
	}
}

$(document).keypress(function(e) {
  if(e.which == 13) {
    // enter pressed
    myMarkers.clearLayers();

    if(currentLayers === 'p2p') {

	    for(var i = 0; i < apiMarkers.length; i++) {
			myMarkers.addLayer(apiMarkers[i]);
		}
		currentLayers = "api";
	} else {
		for(var i = 0; i < p2pMarkers.length; i++) {
			myMarkers.addLayer(p2pMarkers[i]);
		}
		currentLayers = "p2p";
	}
  }
});


</script>

<style>
body {
	padding: 0;
	margin: 0;
}
#map {
	height: 100%;
	width: 100%;
}
</style>
</head>

<body onload='initMap()'>
	<div id='map'></div>
</body>

</html>
	<html>
	<head>
	<script src='https://unpkg.com/jquery@3.3.1/dist/jquery.min.js'></script>
	<script src="https://unpkg.com/ramda@0.25.0/dist/ramda.min.js"></script>
	<script src="https://unpkg.com/socket.io-client@2.1.1/dist/socket.io.slim.js"></script>

	<script src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js'></script>
	<link rel='stylesheet' href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css' />

	<script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js'></script>
	<link rel='stylesheet' href='https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css' />
	<link rel='stylesheet' href='https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css' />

	<script>
	var socket = io("http://eosnetworkmonitor.io:3000");
	var bpList = [];
	var BPLocations = {};
	var myMap = null;
	var myMarkers = null;
	var apiMarkers = [];
	var p2pMarkers = [];
	var totalGets = 0;
	var currentLayers = "";
	var currentProds = [];
	var top21 = [];

	var comp = function(a, b) { return parseFloat(b.total_votes) - parseFloat(a.total_votes); }

	$.post("http://api.eosnewyork.io/v1/chain/get_table_rows", '{"scope":"eosio", "code":"eosio", "table":"producers", "json": true, "limit": 5000}', function(data) {
	currentProds = R.sort(comp, data.rows);
	for(var i = 0; i < 21; i++) {
	top21.push(currentProds[i].owner);
	}

	if(top21.length && bpList.length) getNodeLocations();
	});

	socket.on('initNodes', function(msg) {
	console.log(msg);
	bpList = msg;

	if(top21.length && bpList.length) getNodeLocations();
	});

	function parseLocData(data) {
	var bp_name = data.id.split('_')[0];
	var server_type = data.id.split('_')[1];

	if(!BPLocations[bp_name]) {
	BPLocations[bp_name] = {api:{}, p2p: {}};
	}

	BPLocations[bp_name][server_type] = { lat: data.lat, lng: data.lon };
	}

	function initMap() {
	myMap = L.map('map');
	myMap.fitWorld().zoomIn();

	var OpenStreetMap_BlackAndWhite = L.tileLayer('http://{s}.tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png', {
	maxZoom: 18,
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
	});

	var CartoDB_Positron = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
	});

	var CartoDB_DarkMatter = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/dark_all/{z}/{x}/{y}{r}.png', {
	attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> © <a href="http://cartodb.com/attributions">CartoDB</a>',
	subdomains: 'abcd',
	maxZoom: 19
	});

	CartoDB_Positron.addTo(myMap);

	myMap.attributionControl.setPrefix(false);
	myMarkers = L.markerClusterGroup({
	maxClusterRadius: 10
	});
	myMap.addLayer(myMarkers);
	}

	function getNodeLocations(){
	BPLocations = {};

	for (var idx in bpList) {
	var bp = bpList[idx];
	if (bp.bp && top21.includes(bp.bp_name)) {

	var apiHost = bp.http_server_address.split(":")[0];
	var p2pHost = bp.p2p_server_address.split(":")[0];
	var bp_name = bp.bp_name;

	if (bp.https_server_address) {
	apiHost = bp.https_server_address.split(":")[0];
	}

	getLocInfo(bp_name + '_api', apiHost);
	getLocInfo(bp_name + '_p2p', p2pHost);
	}
	}
	}

	function getLocInfo(id, ip) {
	var blacklist = ["127.0.0.1", "", "0.0.0.0"]
	if (!blacklist.includes(ip)) {
	totalGets++;
	$.get("http://ip.kitpes.com/?id="+id+"&ip="+ip, handleLoc).always(handleCount);
	}
	}

	function handleLoc(data_str) {
	var data = JSON.parse(data_str);
	//parseLocData(data);
	var marker = L.marker([data.lat, data.lon]);
	marker.bindTooltip(data.id);

	if(data.id.split('_')[1] === 'p2p') {
	p2pMarkers.push(marker);
	} else {
	apiMarkers.push(marker);
	}
	}

	function handleCount() {
	totalGets--;
	if(totalGets === 0) {
	for(var i = 0; i < p2pMarkers.length; i++) {
	myMarkers.addLayer(p2pMarkers[i]);
	}
	currentLayers = "p2p";
	}
	}

	$(document).keypress(function(e) {
	if(e.which == 13) {
	// enter pressed
	myMarkers.clearLayers();

	if(currentLayers === 'p2p') {

	for(var i = 0; i < apiMarkers.length; i++) {
	myMarkers.addLayer(apiMarkers[i]);
	}
	currentLayers = "api";
	} else {
	for(var i = 0; i < p2pMarkers.length; i++) {
	myMarkers.addLayer(p2pMarkers[i]);
	}
	currentLayers = "p2p";
	}
	}
	});


	</script>

	<style>
	body {
	padding: 0;
	margin: 0;
	}
	#map {
	height: 100%;
	width: 100%;
	}
	</style>
	</head>

	<body onload='initMap()'>
	<div id='map'></div>
	</body>

	</html>