63 lines
1.6 KiB
HTML
63 lines
1.6 KiB
HTML
<div class="globe-container">
|
|
<canvas
|
|
id="cobe"
|
|
style="width: 500px; height: 500px"
|
|
width="1000"
|
|
height="1000"
|
|
></canvas>
|
|
</div>
|
|
|
|
<style>
|
|
.globe-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 20px 0;
|
|
}
|
|
</style>
|
|
|
|
<script type="module">
|
|
import createGlobe from 'https://cdn.skypack.dev/cobe'
|
|
|
|
let phi = 0
|
|
let canvas = document.getElementById("cobe")
|
|
|
|
// Detect system dark mode
|
|
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
|
|
|
|
const globe = createGlobe(canvas, {
|
|
devicePixelRatio: 2,
|
|
width: 1000,
|
|
height: 1000,
|
|
phi: 0,
|
|
theta: 0.3,
|
|
dark: isDarkMode ? 1 : 0,
|
|
diffuse: 1.2,
|
|
scale: 1,
|
|
mapSamples: 16000,
|
|
mapBrightness: isDarkMode ? 15 : 4,
|
|
baseColor: isDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3],
|
|
markerColor: [0.1, 0.8, 1],
|
|
glowColor: isDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2],
|
|
offset: [0, 0],
|
|
markers: [
|
|
{ location: [37.7595, -122.4367], size: 0.03 },
|
|
{ location: [40.7128, -74.006], size: 0.1 },
|
|
],
|
|
onRender: (state) => {
|
|
state.phi = phi
|
|
phi += 0.005
|
|
},
|
|
})
|
|
|
|
// Listen for system theme changes
|
|
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
|
const newIsDarkMode = e.matches
|
|
globe.dark = newIsDarkMode ? 1 : 0
|
|
globe.baseColor = newIsDarkMode ? [0.8, 0.8, 0.8] : [0.3, 0.3, 0.3]
|
|
globe.mapBrightness = newIsDarkMode ? 15 : 4
|
|
globe.glowColor = newIsDarkMode ? [0.6, 0.6, 0.6] : [0.2, 0.2, 0.2]
|
|
})
|
|
</script>
|