globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
40 lines (35 loc) • 1.36 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//unpkg.com/globe.gl"></script>
<!--<script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
const globe = Globe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-dark.jpg')
.bumpImageUrl('//unpkg.com/three-globe/example/img/earth-topology.png')
.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
(document.getElementById('globeViz'));
// from https://github.com/telegeography/www.submarinecablemap.com
fetch('//raw.githubusercontent.com/telegeography/www.submarinecablemap.com/master/public/api/v2/cable/cable-geo.json')
.then(r =>r.json())
.then(cablesGeo => {
let cablePaths = [];
cablesGeo.features.forEach(({ geometry, properties }) => {
geometry.coordinates.forEach(coords => cablePaths.push({ coords, properties }));
});
globe
.pathsData(cablePaths)
.pathPoints('coords')
.pathPointLat(p => p[1])
.pathPointLng(p => p[0])
.pathColor(path => path.properties.color)
.pathLabel(path => path.properties.slug)
// .pathStroke(2)
.pathDashLength(0.1)
.pathDashGap(0.008)
.pathDashAnimateTime(12000);
});
</script>
</body>