cobe

To use Cobe, create a <canvas> element and pass it to the createGlobe function along with a configuration object. The onRender callback allows you to update parameters (like phi or theta) on every animation frame to create rotation or other animations.

import createGlobe from '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: [0.3, 0.3, 0.3],
  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, color: [1, 0, 0] },
  ],
  arcs: [
    {
      from: [37.7595, -122.4367],
      to: [40.7128, -74.006],
      color: [1, 0.5, 0.5],
    },
  ],
  arcColor: [1, 0.5, 1],
  arcWidth: 0.5,
  arcHeight: 0.3,
  markerElevation: 0.02,
  onRender: (state) => {
    state.phi = phi
    phi += 0.01
  },
})

// To destroy the instance and bindings:
// globe.destroy()

You can assign an id to markers and arcs to enable CSS Anchor Positioning. Cobe exposes specific CSS custom properties to help you position and animate elements relative to these markers/arcs.

CSS Variables Exposed:

• --cobe-{id}: CSS anchor name for positioning markers.
• --cobe-arc-{id}: CSS anchor name for positioning arcs.
• --cobe-visible-{id}: Visibility variable (0 when behind the globe, 1 when visible).
• --cobe-visible-arc-{id}: Visibility variable for arcs (0 when behind the globe, 1 when visible).

Use these variables to drive CSS properties like opacity, filter (blur), or scale for smooth transitions as markers move behind the globe.

// Adding IDs to markers and arcs
markers: [
  { location: [37.7595, -122.4367], size: 0.03, id: 'sf' },
],
arcs: [
  { from: [37.7595, -122.4367], to: [35.6762, 139.6503], id: 'sf-tokyo' },
]

/* Example usage in CSS */
.marker-label {
  position: absolute;
  position-anchor: --cobe-sf;
  bottom: anchor(top);
  left: anchor(center);
  opacity: var(--cobe-visible-sf, 0);
  filter: blur(calc((1 - var(--cobe-visible-sf, 0)) * 8px));
  transition: opacity 0.3s, filter 0.3s;
}

.arc-label {
  position: absolute;
  position-anchor: --cobe-arc-sf-tokyo;
  bottom: anchor(top);
  left: anchor(center);
  opacity: var(--cobe-visible-arc-sf-tokyo, 0);
}

To create a COBE globe, call the default export function with an HTMLCanvasElement and an options object. The function returns an object containing update and destroy methods to manage the globe's state and lifecycle.

Options (opts)