139 lines
No EOL
4.7 KiB
JavaScript
139 lines
No EOL
4.7 KiB
JavaScript
var map = L.map('map', {
|
|
minZoom: 5,
|
|
maxZoom: 10
|
|
}).setView([50,18], 5);
|
|
|
|
L.tileLayer('https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apikey={apikey}', {
|
|
attribution: '© <a href="http://www.thunderforest.com/">Thunderforest</a>, © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
apikey: 'db5ae1f5778a448ca662554581f283c5',
|
|
}).addTo(map);
|
|
|
|
var de1t = [50.085448739143715, 8.461733038044116];
|
|
|
|
// title, hostname, popup, location
|
|
var nodes = {
|
|
pl1: {
|
|
country: 'pl',
|
|
location: [52.1904441909767, 20.922122237417636],
|
|
city: "Warsaw, Poland",
|
|
hostname: "pl1.420129.xyz",
|
|
datacenter: "equinix wa3",
|
|
description: ``,
|
|
publicKey: "v854+5m4Diqh8oGo6/sGVS7LELsreIjMujkWqwc6bWo=",
|
|
linkLocal: "fe80::129:3"
|
|
},
|
|
de1: {
|
|
country: 'de',
|
|
location: [49.44951340282083, 11.014075123186862],
|
|
city: "Nuremberg, Germany",
|
|
hostname: "de1.420129.xyz",
|
|
datacenter: "hetzner nbg",
|
|
description: `Tunneled to Frankfurt. If you have a node here at hetzner nuremberg, it will go nbg -> fra -> nbg.`,
|
|
publicKey: "N9rGceoiFcc/obnHrqMAmVlrb/E2Br55+doekTKwNF8=",
|
|
linkLocal: "fe80::129:2"
|
|
},
|
|
nl1: {
|
|
country: 'nl',
|
|
location: [52.36679746122722, 4.891598348592709],
|
|
city: "Amsterdam, Netherlands",
|
|
hostname: "nl1.420129.xyz",
|
|
datacenter: "scaleway AMS-1",
|
|
description: `I don't know where exactly`,
|
|
publicKey: "iZfLBtF6BiQvdKXx4Yl02u+OL6ls35gSpWCRmB9q4lU=",
|
|
linkLocal: "fe80::129:1"
|
|
},
|
|
it1: {
|
|
country: 'it',
|
|
location: [41.66806722233489, 12.503981281868477],
|
|
city: "Rome, Italy",
|
|
hostname: "it1.420129.xyz",
|
|
datacenter: "c1vhosting?",
|
|
description: `Location also approximate, there's no evidence of the existence of the data center`,
|
|
publicKey: "",
|
|
linkLocal: "fe80::129:4"
|
|
}
|
|
}
|
|
|
|
function line(from, to, popup) {
|
|
L.polyline([from, to], {opacity: 0.5}).addTo(map).bindPopup(popup);
|
|
}
|
|
|
|
|
|
var opened = null;
|
|
|
|
const sidebarContent = document.getElementById("sidebarContent");
|
|
const nodesElement = document.getElementById("nodes");
|
|
|
|
sidebarContent.onclick = (ev) => {
|
|
if (opened == null) return;
|
|
const popup = opened[0];
|
|
|
|
const rect = opened[1].getBoundingClientRect();
|
|
|
|
console.log('a')
|
|
//sidebarContent.removeChild(opened);
|
|
popup.offsetHeight;
|
|
popup.style.height = rect.height - 20 + 'px';
|
|
popup.style.transform = 'none';
|
|
nodesElement.style.opacity = 1;
|
|
sidebarContent.style.backgroundColor = null;
|
|
|
|
opened = null;
|
|
map.closePopup();
|
|
|
|
setTimeout(() => {
|
|
sidebarContent.removeChild(popup);
|
|
}, 300);
|
|
};
|
|
|
|
function onNodeClick(ev, node, elem) {
|
|
console.log('b')
|
|
if (opened != null) return;
|
|
const rect = elem.getBoundingClientRect();
|
|
|
|
nodesElement.style.opacity = 0;
|
|
|
|
ele = elem.cloneNode(true);
|
|
ele.innerHTML += `<br><br>Datacenter: <span class="code">${node.datacenter}</span><br>${node.description.split('\n').slice(1).join('<br>')}`;
|
|
ele.onclick = (ev) => {ev.stopPropagation()};
|
|
|
|
ele.classList.add('selectedNode');
|
|
sidebarContent.appendChild(ele);
|
|
|
|
ele.style.width = rect.width - 40 + 'px'; // padding or margin
|
|
ele.style.height = rect.height - 20 + 'px';
|
|
ele.style.top = rect.top - 10 + 'px';
|
|
//ele.style.left = rect.left - 10 + 'px';
|
|
|
|
ele.offsetHeight;
|
|
|
|
const destY = 72 - rect.top; // window.innerHeight / 4
|
|
ele.style.transform = `translateY(${destY}px)`;
|
|
ele.style.height = window.innerHeight / 3 + 'px';
|
|
sidebarContent.style.backgroundColor = "#111";
|
|
|
|
opened = [ele, elem, node];
|
|
ev.stopPropagation();
|
|
}
|
|
|
|
for (let node of Object.values(nodes)) {
|
|
let marker = L.marker(node.location).addTo(map).bindPopup(`<strong>${node.city}</strong><br>DC: ${node.datacenter}`);
|
|
|
|
let ele = document.createElement("div");
|
|
ele.innerHTML = `<strong>${node.city}</strong>`;
|
|
if (node.description != '') ele.innerHTML += `<br><small>${node.description.split('\n')[0]}</small>`;
|
|
ele.onclick = (ev) => {
|
|
marker.openPopup();
|
|
map.panTo(node.location, {
|
|
padding: [1000, 1000], // TODO I could use this to fix the small screen issue
|
|
duration: 0.3
|
|
});
|
|
onNodeClick(ev, node, ele);
|
|
};
|
|
nodesElement.appendChild(ele);
|
|
}
|
|
|
|
line(nodes.de1.location, de1t, "Tunnel (already included in other labels)<br><strong>4ms</strong>");
|
|
line(de1t, nodes.pl1.location, "de1 - pl1<br><strong>24ms</strong>");
|
|
line(de1t, nodes.nl1.location, "de1 - nl1<br><strong>10ms</strong>");
|
|
line(nodes.nl1.location, nodes.it1.location, "it1 - nl1<br><strong>25ms</strong>"); |