globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
56 lines (47 loc) • 2.08 kB
HTML
<head>
<style> body { margin: 0; } </style>
<script src="//cdn.jsdelivr.net/npm/globe.gl"></script>
<!-- <script src="../../dist/globe.gl.js"></script>-->
</head>
<body>
<div id="globeViz"></div>
<script>
const ARC_REL_LEN = 0.4; // relative to whole arc
const FLIGHT_TIME = 1000;
const NUM_RINGS = 3;
const RINGS_MAX_R = 5; // deg
const RING_PROPAGATION_SPEED = 5; // deg/sec
const globe = new Globe(document.getElementById('globeViz'))
.globeImageUrl('//cdn.jsdelivr.net/npm/three-globe/example/img/earth-night.jpg')
.arcColor(() => 'darkOrange')
.onGlobeClick(emitArc)
.arcDashLength(ARC_REL_LEN)
.arcDashGap(2)
.arcDashInitialGap(1)
.arcDashAnimateTime(FLIGHT_TIME)
.arcsTransitionDuration(0)
.ringColor(() => t => `rgba(255,100,50,${1-t})`)
.ringMaxRadius(RINGS_MAX_R)
.ringPropagationSpeed(RING_PROPAGATION_SPEED)
.ringRepeatPeriod(FLIGHT_TIME * ARC_REL_LEN / NUM_RINGS);
let prevCoords = { lat: 0, lng: 0 };
function emitArc({ lat: endLat, lng: endLng }) {
const { lat: startLat, lng: startLng } = prevCoords;
setTimeout(() => { prevCoords = { lat: endLat, lng: endLng }}, FLIGHT_TIME);
// add and remove arc after 1 cycle
const arc = { startLat, startLng, endLat, endLng };
globe.arcsData([...globe.arcsData(), arc]);
setTimeout(() => globe.arcsData(globe.arcsData().filter(d => d !== arc)), FLIGHT_TIME * 2);
// add and remove start rings
const srcRing = { lat: startLat, lng: startLng };
globe.ringsData([...globe.ringsData(), srcRing]);
setTimeout(() => globe.ringsData(globe.ringsData().filter(r => r !== srcRing)), FLIGHT_TIME * ARC_REL_LEN);
// add and remove target rings
setTimeout(() => {
const targetRing = { lat: endLat, lng: endLng };
globe.ringsData([...globe.ringsData(), targetRing]);
setTimeout(() => globe.ringsData(globe.ringsData().filter(r => r !== targetRing)), FLIGHT_TIME * ARC_REL_LEN);
}, FLIGHT_TIME);
}
</script>
</body>