Add Cobe library for Globe component
This commit is contained in:
parent
4732d261f4
commit
0bd4ab766c
2 changed files with 118 additions and 0 deletions
67
src/components/cobe.vue
Normal file
67
src/components/cobe.vue
Normal file
|
@ -0,0 +1,67 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted } from 'vue'
|
||||||
|
import createGlobe, { Marker } from 'cobe'
|
||||||
|
|
||||||
|
const el = ref()
|
||||||
|
const phi = ref(0)
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
markers: {
|
||||||
|
type: Array as () => Marker[],
|
||||||
|
default: () => [
|
||||||
|
{ location: [51.163818, 10.447831], size: 0.1 },
|
||||||
|
{ location: [63.246778, 25.920916], size: 0.1 },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
marker: {
|
||||||
|
type: Object as () => Marker,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
function locationToAngles(lat, long) {
|
||||||
|
return [
|
||||||
|
Math.PI - ((long * Math.PI) / 180 - Math.PI / 2),
|
||||||
|
(lat * Math.PI) / 180,
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
const globe = createGlobe(el.value, {
|
||||||
|
devicePixelRatio: 2,
|
||||||
|
width: 1000,
|
||||||
|
height: 1000,
|
||||||
|
phi: 4.24,
|
||||||
|
theta: 0.25,
|
||||||
|
dark: 1,
|
||||||
|
diffuse: 2,
|
||||||
|
scale: 2,
|
||||||
|
mapSamples: 16000,
|
||||||
|
mapBrightness: 6,
|
||||||
|
opacity: 0.9,
|
||||||
|
baseColor: [1, 1, 1],
|
||||||
|
markerColor: [1, 0.5, 1],
|
||||||
|
glowColor: [0.04, 0.04, 0.04],
|
||||||
|
offset: [300, 600],
|
||||||
|
markers: [
|
||||||
|
{ location: [52.520008, 13.404954], size: 0.1 },
|
||||||
|
{ location: [62.520008, 16.404954], size: 0.1 },
|
||||||
|
],
|
||||||
|
onRender: (state) => {
|
||||||
|
phi.value += 0;
|
||||||
|
},
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<canvas :style="{
|
||||||
|
maxWidth: '800px',
|
||||||
|
width: '100%',
|
||||||
|
height: '400px',
|
||||||
|
display: 'block',
|
||||||
|
margin: 'auto'
|
||||||
|
}" ref="el"></canvas>
|
||||||
|
</template>
|
51
src/components/globe.astro
Normal file
51
src/components/globe.astro
Normal file
|
@ -0,0 +1,51 @@
|
||||||
|
---
|
||||||
|
import Globe from '@components/cobe.vue'
|
||||||
|
---
|
||||||
|
|
||||||
|
<h2 style="text-align: center; font-size: 42px; padding: 0px 0px 24px 0px">Locations</h2>
|
||||||
|
|
||||||
|
<div class="server-locations">
|
||||||
|
<div class="server-location">
|
||||||
|
<img src="/images/icons/fi.svg"/>
|
||||||
|
<p>Finland</p>
|
||||||
|
</div>
|
||||||
|
<div class="server-location">
|
||||||
|
<img src="/images/icons/de.svg"/>
|
||||||
|
<p>Germany</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<Globe client:visible/>
|
||||||
|
<!-- If the browser has JavaScript disabled, show a static image instead -->
|
||||||
|
<noscript>
|
||||||
|
<style>
|
||||||
|
canvas {display: none !important}
|
||||||
|
#globe-nojs {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 80px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<img id="globe-nojs" src="/images/globe-nojs.png"/>
|
||||||
|
</noscript>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.server-locations {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 24px;
|
||||||
|
.server-location {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: #0e0e0e;
|
||||||
|
border: 1px #2c2c2c solid;
|
||||||
|
border-radius: 3rem;
|
||||||
|
padding: 0px 24px 0px 12px;
|
||||||
|
img {
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
object-fit: cover;
|
||||||
|
border-radius: 1rem;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Reference in a new issue