globe.gl
Version:
UI component for Globe Data Visualization using ThreeJS/WebGL
27 lines (24 loc) • 909 B
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>
fetch('../datasets/ne_110m_populated_places_simple.geojson').then(res => res.json()).then(places => {
Globe()
.globeImageUrl('//unpkg.com/three-globe/example/img/earth-night.jpg')
.backgroundImageUrl('//unpkg.com/three-globe/example/img/night-sky.png')
.labelsData(places.features)
.labelLat(d => d.properties.latitude)
.labelLng(d => d.properties.longitude)
.labelText(d => d.properties.name)
.labelSize(d => Math.sqrt(d.properties.pop_max) * 4e-4)
.labelDotRadius(d => Math.sqrt(d.properties.pop_max) * 4e-4)
.labelColor(() => 'rgba(255, 165, 0, 0.75)')
.labelResolution(2)
(document.getElementById('globeViz'))
});
</script>
</body>