Get Started
COBE does’t rely on any external libraries or UI framework. It is a vanilla JavaScript library that can be used in any web applications.
If you already have Next.js installed in your project, you only need to
install nextra
and nextra-theme-docs
as the add-ons.
The easiest way to use this library is to create a canvas element and use a CDN to import the library:
<canvas
id="cobe"
style="width: 500px; height: 500px"
width="1000"
height="1000"
></canvas>
<script type="module">
import createGlobe from "https://cdn.skypack.dev/cobe";
let phi = 0;
let canvas = document.getElementById("cobe");
const globe = createGlobe(canvas, {
devicePixelRatio: 2,
width: 1000,
height: 1000,
phi: 0,
theta: 0,
dark: 0,
diffuse: 1.2,
scale: 1,
mapSamples: 16000,
mapBrightness: 6,
baseColor: [1, 1, 1],
markerColor: [1, 0.5, 1],
glowColor: [1, 1, 1],
offset: [0, 0],
markers: [
{ location: [37.7595, -122.4367], size: 0.03 },
{ location: [40.7128, -74.006], size: 0.1 },
],
onRender: (state) => {
// Called on every animation frame.
// `state` will be an empty object, return updated params.
state.phi = phi;
phi += 0.01;
},
});
</script>
Here’s a live demo of above: https://codesandbox.io/s/cobe-basic-gb2ywq (opens in a new tab).
If you are looking into using it in a UI framework, check out the next section.
With Frameworks
Installation
This library is published to npm as cobe
, you can install it to your project via:
bash npm i cobe
Then, you can render the canvas and create a globe following the examples:
React
Example: https://codesandbox.io/s/eager-sky-r2q0g (opens in a new tab).
Vue 3
Example: https://stackblitz.com/edit/vitejs-vite-l5a8xk (opens in a new tab).
Svelte
Example: https://codesandbox.io/s/great-visvesvaraya-78yf6 (opens in a new tab).