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: '&copy; <a href="http://www.thunderforest.com/">Thunderforest</a>, &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
	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];

// title, popup, location
var nodes = [
    ["Warsaw, Poland", "pl1 at equinix wa3", pl1],
    ["Nuremberg, Germany", "de1 at hetzner nbg<br>Tunneled to Frankfurt. If you have a node here at hetzner nuremberg, it will go nbg -> fra -> nbg.", de1a],
    ["Amsterdam, Netherlands", "nl1 at scaleway<br>I don't know where exactly", nl1],
    ["Rome, Italy", "it1 at c1vhosting<br>I also don't know where exactly, but there's no evidence of the existence of the data center", it1]
]

function line(from, to, popup) {
    L.polyline([from, to], {opacity: 0.5}).addTo(map).bindPopup(popup);
}

const nodesElement = document.getElementById("nodes");
for (let node of nodes) {
    let marker = L.marker(node[2]).addTo(map).bindPopup(node[1]);

    let ele = document.createElement("div");
    ele.innerText = node[0];
    ele.onclick = () => {
        marker.openPopup();
        map.panTo(node[2], {
            padding: [1000, 1000]
        });
    };
    nodesElement.appendChild(ele);
}

line(de1, de1a, "4ms");
line(de1, pl1, "24ms");
line(de1, nl1, "10ms");
line(nl1, it1, "25ms");