Skip to content

Instantly share code, notes, and snippets.

@yoursunny
Last active April 16, 2024 20:53
Show Gist options
  • Save yoursunny/2712110def1eba3d985dac6e4b3b7cba to your computer and use it in GitHub Desktop.
Save yoursunny/2712110def1eba3d985dac6e4b3b7cba to your computer and use it in GitHub Desktop.
NDN global testbed topology design 20240330
<!DOCTYPE html>
<div id="map" style="width: 100%; height: 90vh;"></div>
<script src="map.js"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&callback=initMap&libraries=marker"></script>
const mapOffset = 3;
const ROUTERS = {
UCLA: [-118.4387398 - mapOffset, 34.0728225 + mapOffset],
ARIZONA: [-110.9483226, 32.2289614],
WU: [-90.3033471, 38.6490701 + mapOffset],
MEMPHIS: [-89.9370010999999, 35.1186099 - mapOffset],
SAVI: [-79.4, 43.6],
TORONTO: [-79.3832, 43.6532 + mapOffset],
NEU: [-71.0887358, 42.3398783],
UFBA: [-49.6, -3.7],
AVEIRO: [-9, 40.6],
MINHO: [-8.2, 41.8 + mapOffset],
QUB: [-5.9301 - mapOffset, 54.5973 - mapOffset],
URJC: [-3.8732, 40.3359],
TNO: [4, 52.05858 + mapOffset],
DELFT: [4.4, 52],
BERN: [8.5836, 46.8 - mapOffset],
FRANKFURT: [8.6821, 50.1109],
AFA: [14.5, 42.1],
MML1: [23.7326, 37.9942],
MML2: [23.7326, 37.9942 - mapOffset],
IIITH: [78.3497, 17.4456],
SRRU: [103.7 - mapOffset, 15.3],
SINGAPORE: [103.8198, 1.3521],
ANYANG: [127, 37.7],
OSAKA: [135.5193, 34.72],
WASEDA: [139.7193, 35.7092],
};
const LC = {
CORE: "#001f3f",
RC: "#b10dc9",
REGION: "#ff4136",
INTER: "#85144b",
};
const LINKS = [];
// core nodes: all pairs
const coreNodes = ["UCLA", "TORONTO", "FRANKFURT", "URJC", "MML1"];
for (const [i, src] of coreNodes.entries()) {
for (const dst of coreNodes.slice(i + 1)) {
LINKS.push([src, dst, LC.CORE]);
}
}
// AMER region
LINKS.push(
["UCLA", "ARIZONA", LC.RC],
["UCLA", "WU", LC.RC],
["ARIZONA", "MEMPHIS", LC.REGION],
["ARIZONA", "WU", LC.REGION],
["WU", "MEMPHIS", LC.REGION],
["WU", "NEU", LC.REGION],
["SAVI", "NEU", LC.REGION],
["SAVI", "MEMPHIS", LC.REGION],
["UFBA", "UCLA", LC.RC],
["UFBA", "WU", LC.REGION],
["TORONTO", "WU", LC.RC],
["TORONTO", "NEU", LC.RC],
);
// EMEA region
LINKS.push(
["FRANKFURT", "AVEIRO", LC.RC],
["FRANKFURT", "DELFT", LC.RC],
["FRANKFURT", "AFA", LC.RC],
["URJC", "AVEIRO", LC.RC],
["URJC", "MINHO", LC.RC],
["URJC", "BERN", LC.RC],
["TNO", "DELFT", LC.REGION],
["TNO", "MML2", LC.REGION],
["TNO", "AFA", LC.REGION],
["TNO", "QUB", LC.REGION],
["QUB", "BERN", LC.REGION],
["QUB", "MINHO", LC.REGION],
["AVEIRO", "MINHO", LC.REGION],
["MML1", "MML2", LC.RC],
["BERN", "MML2", LC.REGION],
["BERN", "AFA", LC.REGION],
);
// EMEA-AMER inter-region
LINKS.push(
["QUB", "SAVI", LC.INTER],
["AVEIRO", "NEU", LC.INTER],
["DELFT", "MEMPHIS", LC.INTER],
["MML2", "UFBA", LC.INTER],
);
// ASIA
LINKS.push(
["SINGAPORE", "TORONTO", LC.INTER],
["SINGAPORE", "FRANKFURT", LC.INTER],
["IIITH", "MML1", LC.INTER],
["WASEDA", "UCLA", LC.INTER],
["OSAKA", "DELFT", LC.INTER],
["ANYANG", "ARIZONA", LC.INTER],
["WASEDA", "ANYANG", LC.REGION],
["WASEDA", "SINGAPORE", LC.REGION],
["OSAKA", "SINGAPORE", LC.REGION],
["OSAKA", "WASEDA", LC.REGION],
["OSAKA", "ANYANG", LC.REGION],
["OSAKA", "SRRU", LC.REGION],
["IIITH", "SINGAPORE", LC.REGION],
["IIITH", "ANYANG", LC.REGION],
["SRRU", "SINGAPORE", LC.REGION],
["SRRU", "IIITH", LC.REGION],
["SRRU", "OSAKA", LC.REGION],
["SRRU", "ANYANG", LC.REGION],
);
console.log(JSON.stringify(LINKS.map(([src, dst]) => [src, dst])));
function toPoint([lng, lat]) {
return { lng, lat };
}
function initMap() {
const map = new google.maps.Map(document.querySelector("#map"), {
mapId: "DEMO_MAP_ID",
center: { lat: 40, lng: 10 },
zoom: 3,
// center: { lat: 50, lng: 10 },
// zoom: 4,
mapTypeControl: false,
streetViewControl: false,
fullscreenControl: false,
});
const parser = new DOMParser();
for (const router of Object.entries(ROUTERS)) {
const pin = parser.parseFromString(`
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-8 -8 16 16" style="transform:translate(0,8px)">
<path style="transform:scale(8)" d="M 0,1 1,0 0,-1 -1,0 Z" fill="#0074d9" fill-opacity="0.8"/>
</svg>
`, "image/svg+xml").documentElement;
new google.maps.marker.AdvancedMarkerElement({
map,
position: toPoint(router[1]),
title: router[0],
content: pin,
});
}
for (const [src, dst, strokeColor] of LINKS) {
new google.maps.Polyline({
map,
path: [toPoint(ROUTERS[src]), toPoint(ROUTERS[dst])],
geodesic: true,
strokeColor,
strokeOpacity: 0.6,
strokeWeight: 2,
});
}
}
This file has been truncated, but you can view the full file.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment