From 5f177eda5173a9c4cbd6ec30ddf9a66a2454525d Mon Sep 17 00:00:00 2001 From: Minecon724 Date: Thu, 10 Oct 2024 18:12:40 +0200 Subject: [PATCH] update map --- html/map/index.html | 1 - html/map/map.js | 126 ++++++++++++++++++++++++++++++++++++-------- html/map/style.css | 68 ++++++++++++++---------- 3 files changed, 145 insertions(+), 50 deletions(-) diff --git a/html/map/index.html b/html/map/index.html index 8a8473f..11a7567 100644 --- a/html/map/index.html +++ b/html/map/index.html @@ -16,6 +16,5 @@
-

I hate blur... but here we are

\ No newline at end of file diff --git a/html/map/map.js b/html/map/map.js index 86e6a43..44c731e 100644 --- a/html/map/map.js +++ b/html/map/map.js @@ -8,40 +8,124 @@ L.tileLayer('https://{s}.tile.thunderforest.com/spinal-map/{z}/{x}/{y}.png?apike apikey: 'db5ae1f5778a448ca662554581f283c5', }).addTo(map); -var pl1 = [52.1904441909767, 20.922122237417636]; -var de1a = [49.44951340282083, 11.014075123186862]; -var de1 = [50.085448739143715, 8.461733038044116]; -var nl1 = [52.36679746122722, 4.891598348592709]; -var it1 = [41.66806722233489, 12.503981281868477]; +var de1t = [50.085448739143715, 8.461733038044116]; -// title, popup, location -var nodes = [ - ["Warsaw, Poland", "pl1 at equinix wa3", pl1], - ["Nuremberg, Germany", "de1 at hetzner nbg
Tunneled to Frankfurt. If you have a node here at hetzner nuremberg, it will go nbg -> fra -> nbg.", de1a], - ["Amsterdam, Netherlands", "nl1 at scaleway
I don't know where exactly", nl1], - ["Rome, Italy", "it1 at c1vhosting
I also don't know where exactly, but there's no evidence of the existence of the data center", it1] -] +// title, hostname, popup, location +var nodes = { + pl1: { + 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: { + 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: { + 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: { + 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"); -for (let node of nodes) { - let marker = L.marker(node[2]).addTo(map).bindPopup(node[1]); + +sidebarContent.onclick = (ev) => { + if (opened == null) return; + const popup = opened[0]; + + const rect = opened[1].getBoundingClientRect(); + + console.log('a') + //sidebarContent.removeChild(opened); + popup.style.height = rect.height - 20 + 'px'; + popup.style.transform = 'none'; + nodesElement.style.opacity = 1; + + 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 += `

Datacenter: ${node.datacenter}
${node.description.split('\n').slice(1).join('\n')}`; + 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'; + + opened = [ele, elem]; + ev.stopPropagation(); +} + +for (let node of Object.values(nodes)) { + let marker = L.marker(node.location).addTo(map).bindPopup(`${node.city}
DC: ${node.datacenter}`); let ele = document.createElement("div"); - ele.innerText = node[0]; - ele.onclick = () => { + ele.innerHTML = `${node.city}`; + if (node.description != '') ele.innerHTML += `
${node.description.split('\n')[0]}`; + ele.onclick = (ev) => { marker.openPopup(); - map.panTo(node[2], { + map.panTo(node.location, { padding: [1000, 1000] }); + onNodeClick(ev, node, ele); }; nodesElement.appendChild(ele); } -line(de1, de1a, "4ms"); -line(de1, pl1, "24ms"); -line(de1, nl1, "10ms"); -line(nl1, it1, "25ms"); \ No newline at end of file +line(nodes.de1.location, de1t, "Tunnel (already included in other labels)
4ms"); +line(de1t, nodes.pl1.location, "de1 - pl1
24ms"); +line(de1t, nodes.nl1.location, "de1 - nl1
10ms"); +line(nodes.nl1.location, nodes.it1.location, "it1 - nl1
25ms"); \ No newline at end of file diff --git a/html/map/style.css b/html/map/style.css index 5a08d30..d55569d 100644 --- a/html/map/style.css +++ b/html/map/style.css @@ -4,6 +4,30 @@ html, body { height: 100%; } +#map { + background: black; +} + +.code { + cursor: pointer; + font-family: monospace; +} + +.selectedNode { + overflow: hidden; + position: absolute; + transition: transform .3s ease, height .3s ease; + + text-align: left; + background: #222; + padding: 10px 20px; + margin: 10px; + width: calc(100% - 60px); + height: auto; + border-radius: 8px; + z-index: 9998; +} + #sidebar { width: 320px; height: 100%; @@ -26,31 +50,23 @@ html, body { #nodes { width: 100%; - } - - #nodes > div { - text-align: left; - cursor: pointer; - background: #222; - padding: 10px 20px; - margin: 10px; - width: calc(100% - 60px); - height: auto; - border-radius: 8px; + transition: opacity .3s ease; + + div { + text-align: left; + cursor: pointer; + background: #222; + padding: 10px 20px; + margin: 10px; + width: calc(100% - 60px); + height: auto; + border-radius: 8px; + } } } } -#footnote { - position: absolute; - bottom: 0; - text-align: center; - color: transparent; - z-index: 9999; - width: 300px; -} - #blurThing { position: absolute; left: 300px; @@ -107,22 +123,18 @@ html, body { @media screen and (max-width: 600px) { #sidebar { width: 100%; - height: 220px; + height: 320px; - mask-image: linear-gradient(180deg, black 200px, transparent 220px); + mask-image: linear-gradient(180deg, black 300px, transparent 320px); #sidebarContent { width: 100%; - height: 200px; + height: 300px; } } .leaflet-left { margin-left: none; - margin-top: 220px; - } - - #footnote { - display: none; + margin-top: 320px; } } \ No newline at end of file