### HTML Canvas Setup for COBE Globe

Source: https://github.com/shuding/cobe/blob/main/README.md

Include this HTML snippet to create a canvas element that will be used by the COBE library to render the globe. Ensure the canvas has an ID for JavaScript reference.

```html
<canvas
  id="cobe"
  style="width: 500px; height: 500px;"
  width="1000"
  height="1000"
></canvas>
```

--------------------------------

### Globe Initialization and Cleanup

Source: https://context7.com/shuding/cobe/llms.txt

Demonstrates how to initialize a Cobe globe and the essential `destroy()` method for releasing the WebGL context, crucial for preventing memory leaks in SPAs.

```APIDOC
## globe.destroy()

### Description
Releases WebGL context and stops rendering. Essential for single-page applications to prevent memory leaks when components unmount.

### Method
`globe.destroy()`

### Endpoint
N/A (Instance method)

### Parameters
None

### Request Example
```javascript
import createGlobe from 'cobe'
import { useEffect, useRef } from 'react'

function GlobeComponent() {
  const canvasRef = useRef(null)

  useEffect(() => {
    if (!canvasRef.current) return

    let phi = 0
    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: 800,
      height: 800,
      phi: 0,
      theta: 0.2,
      dark: 0,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [1, 1, 1],
      markerColor: [0.3, 0.5, 1],
      glowColor: [1, 1, 1],
      markers: [
        { location: [37.78, -122.44], size: 0.03 }
      ]
    })

    function animate() {
      phi += 0.005
      globe.update({ phi })
      requestAnimationFrame(animate)
    }
    animate()

    // Cleanup on unmount - IMPORTANT!
    return () => globe.destroy()
  }, [])

  return <canvas ref={canvasRef} width={800} height={800} />
}
```

### Response
N/A (This is a cleanup method)
```

--------------------------------

### createGlobe(canvas, options)

Source: https://context7.com/shuding/cobe/llms.txt

Initializes a new WebGL globe instance on the provided canvas element with specified configuration options.

```APIDOC
## createGlobe(canvas, options)

### Description
Initializes a WebGL globe on a canvas element. Returns an object with update() and destroy() methods for controlling the globe lifecycle.

### Parameters
#### Request Body
- **canvas** (HTMLElement) - Required - The canvas element to render the globe on.
- **options** (Object) - Required - Configuration object including:
  - **devicePixelRatio** (number) - Optional - Scaling factor for high-DPI displays.
  - **width** (number) - Optional - Canvas width.
  - **height** (number) - Optional - Canvas height.
  - **phi** (number) - Optional - Horizontal rotation (0 to 2*PI).
  - **theta** (number) - Optional - Vertical tilt (-PI/2 to PI/2).
  - **dark** (number) - Optional - 0 for light mode, 1 for dark mode.
  - **diffuse** (number) - Optional - Lighting intensity (0.5 to 3).
  - **mapSamples** (number) - Optional - Dot count for map (1000 to 100000).
  - **mapBrightness** (number) - Optional - Land brightness (1 to 20).
  - **mapBaseBrightness** (number) - Optional - Ocean brightness (0 to 1).
  - **baseColor** (Array) - Optional - Globe base color [R, G, B] (0-1).
  - **markerColor** (Array) - Optional - Default marker color.
  - **glowColor** (Array) - Optional - Atmospheric glow color.
  - **scale** (number) - Optional - Globe scale multiplier.
  - **offset** (Array) - Optional - Pixel offset from center [x, y].
  - **opacity** (number) - Optional - Globe opacity (0 to 1).
  - **markers** (Array) - Optional - List of marker objects.
  - **arcs** (Array) - Optional - List of arc objects.
  - **arcColor** (Array) - Optional - Default arc color.
  - **arcWidth** (number) - Optional - Arc line thickness (0.1 to 2).
  - **arcHeight** (number) - Optional - Arc curve height (0.1 to 0.5).
  - **markerElevation** (number) - Optional - Marker height above surface (0 to 0.2).

### Response
- **globe** (Object) - Returns an instance with update() and destroy() methods.
```

--------------------------------

### createGlobe(canvas, options)

Source: https://context7.com/shuding/cobe/llms.txt

Initializes a new globe instance on a provided HTML canvas element with the specified configuration options.

```APIDOC
## createGlobe(canvas, options)

### Description
Initializes a new globe instance on a provided HTML canvas element with the specified configuration options.

### Parameters
#### Request Body
- **canvas** (HTMLCanvasElement) - Required - The canvas element to render the globe on.
- **options** (COBEOptions) - Required - Configuration object for the globe.

### Request Example
{
  "width": 1000,
  "height": 1000,
  "phi": 0,
  "theta": 0.2,
  "mapSamples": 16000,
  "mapBrightness": 6,
  "baseColor": [1, 1, 1],
  "markerColor": [0.3, 0.5, 1],
  "glowColor": [1, 1, 1],
  "diffuse": 1.2,
  "devicePixelRatio": 2,
  "dark": 0
}

### Response
#### Success Response (200)
- **update** (Function) - Updates the globe state with partial options.
- **destroy** (Function) - Cleans up the globe instance.
```

--------------------------------

### Position Labels using CSS Anchors in HTML

Source: https://context7.com/shuding/cobe/llms.txt

Demonstrates how to use CSS anchor positioning to attach labels to globe markers and arcs. The opacity is controlled by COBE-generated visibility variables.

```html
<div class="globe-container">
  <canvas id="globe"></canvas>

  <!-- Marker labels -->
  <div class="marker-label" style="position-anchor: --cobe-sf; opacity: var(--cobe-visible-sf, 0);">
    San Francisco
  </div>
  <div class="marker-label" style="position-anchor: --cobe-tokyo; opacity: var(--cobe-visible-tokyo, 0);">
    Tokyo
  </div>

  <!-- Arc label (positioned at arc peak) -->
  <div class="arc-label" style="position-anchor: --cobe-arc-sf-tokyo; opacity: var(--cobe-visible-arc-sf-tokyo, 0);">
    SF to Tokyo
  </div>
</div>
```

--------------------------------

### Create Globe with Marker IDs using JavaScript

Source: https://context7.com/shuding/cobe/llms.txt

Initializes a COBE globe with specified markers and arcs, automatically generating CSS variables for anchor positioning. Ensure the canvas element is available in the DOM.

```javascript
import createGlobe from 'cobe'

const markers = [
  { id: 'sf', location: [37.78, -122.44], label: 'San Francisco' },
  { id: 'tokyo', location: [35.68, 139.65], label: 'Tokyo' }
]

const arcs = [
  { id: 'sf-tokyo', from: [37.78, -122.44], to: [35.68, 139.65], label: 'SF to Tokyo' }
]

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0.2,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1],
  arcHeight: 0.3,
  markers: markers.map(m => ({ location: m.location, size: 0.03, id: m.id })),
  arcs: arcs.map(a => ({ from: a.from, to: a.to, id: a.id }))
})

// COBE automatically creates these CSS variables:
// --cobe-{id}           - Anchor name for positioning
// --cobe-visible-{id}   - Visibility (undefined when hidden, 'N' when visible)
// --cobe-arc-{id}       - Anchor for arcs (at peak of curve)
// --cobe-visible-arc-{id} - Arc visibility
```

--------------------------------

### Initialize a COBE Globe

Source: https://context7.com/shuding/cobe/llms.txt

Initializes a WebGL globe on a canvas element. Configure properties like rotation, colors, and markers during creation. Requires a canvas element in the HTML.

```javascript
import createGlobe from 'cobe'

// HTML: <canvas id="globe" width="1000" height="1000" style="width: 500px; height: 500px;"></canvas>

const canvas = document.getElementById('globe')
const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,                              // Horizontal rotation (0 to 2*PI)
  theta: 0.2,                          // Vertical tilt (-PI/2 to PI/2)
  dark: 0,                             // 0 = light mode, 1 = dark mode
  diffuse: 1.2,                        // Lighting intensity (0.5 to 3)
  mapSamples: 16000,                   // Dot count for map (1000 to 100000)
  mapBrightness: 6,                    // Land brightness (1 to 20)
  mapBaseBrightness: 0,                // Ocean brightness (0 to 1)
  baseColor: [1, 1, 1],                // Globe base color [R, G, B] (0-1)
  markerColor: [0.3, 0.5, 1],          // Default marker color
  glowColor: [1, 1, 1],                // Atmospheric glow color
  scale: 1,                            // Globe scale multiplier
  offset: [0, 0],                      // Pixel offset from center [x, y]
  opacity: 1,                          // Globe opacity (0 to 1)
  markers: [
    { location: [37.78, -122.44], size: 0.03, id: 'sf' },
    { location: [40.71, -74.01], size: 0.05, color: [1, 0, 0] }
  ],
  arcs: [
    { from: [37.78, -122.44], to: [40.71, -74.01], id: 'sf-nyc' }
  ],
  arcColor: [0.3, 0.5, 1],             // Default arc color
  arcWidth: 0.5,                        // Arc line thickness (0.1 to 2)
  arcHeight: 0.3,                       // Arc curve height (0.1 to 0.5)
  markerElevation: 0.02                 // Marker height above surface (0 to 0.2)
})

// Animate the globe
let phi = 0
function animate() {
  phi += 0.005
  globe.update({ phi })
  requestAnimationFrame(animate)
}
animate()

// Cleanup when done
// globe.destroy()

```

--------------------------------

### Markers Configuration

Source: https://context7.com/shuding/cobe/llms.txt

Details on how to add and customize markers (dots) on the globe using latitude and longitude coordinates. Supports custom colors, sizes, and IDs for CSS anchor positioning.

```APIDOC
## Markers Configuration

### Description
Place dots on the globe using latitude/longitude coordinates. Markers support custom colors, sizes, and IDs for CSS anchor positioning.

### Method
`createGlobe(canvas, options)`

### Endpoint
N/A (Initialization option)

### Parameters
#### Request Body (within `createGlobe` options)
- **markers** (array) - Required - An array of marker objects.
  - **location** (array[number, number]) - Required - `[latitude, longitude]` coordinates.
  - **size** (number) - Optional - Relative size of the marker (e.g., 0.03).
  - **color** (array[number, number, number]) - Optional - Custom RGB color for the marker (values 0-1).
  - **id** (string) - Optional - An identifier for CSS anchor positioning.
- **markerColor** (array[number, number, number]) - Optional - Default RGB color for all markers if not specified individually.
- **markerElevation** (number) - Optional - Height of the marker above the globe surface.

### Request Example
```javascript
import createGlobe from 'cobe'

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.2, 0.4, 1],          // Default color for all markers
  glowColor: [1, 1, 1],
  markerElevation: 0.02,               // Height above globe surface
  markers: [
    // Basic marker - uses default markerColor
    { location: [37.78, -122.44], size: 0.03 },

    // Marker with custom color (overrides markerColor)
    { location: [51.51, -0.13], size: 0.05, color: [1, 0, 0] },

    // Marker with ID for CSS anchor positioning
    { location: [35.68, 139.65], size: 0.04, id: 'tokyo' },

    // Full marker configuration
    {
      location: [-33.87, 151.21],      // [latitude, longitude]
      size: 0.06,                       // Relative to globe (0.01-0.1)
      color: [0, 1, 0.5],              // Custom RGB color (0-1 each)
      id: 'sydney'                      // ID for CSS anchoring
    }
  ]
})
```

### Response
N/A (Configuration during initialization)
```

--------------------------------

### Initialize COBE Globe with Markers and Arcs

Source: https://github.com/shuding/cobe/blob/main/README.md

This JavaScript code initializes the COBE globe on a canvas element. It configures globe properties, adds markers with custom colors, and defines arcs between locations. The `onRender` callback updates the globe's rotation.

```javascript
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] }, // custom color
  ],
  arcs: [
    {
      from: [37.7595, -122.4367],
      to: [40.7128, -74.006],
      color: [1, 0.5, 0.5], // custom color (optional)
    },
  ],
  arcColor: [1, 0.5, 1],
  arcWidth: 0.5,
  arcHeight: 0.3,
  markerElevation: 0.02,
  onRender: (state) => {
    // Called on every animation frame.
    // `state` will be an empty object, return updated params.
    state.phi = phi
    phi += 0.01
  },
})

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

--------------------------------

### Implement Draggable Globe with Spring Physics

Source: https://context7.com/shuding/cobe/llms.txt

Integrates react-spring to handle momentum-based rotation and pointer events for a draggable globe experience.

```javascript
import createGlobe from 'cobe'
import { useSpring } from 'react-spring'
import { useRef, useEffect, useCallback } from 'react'

function DraggableGlobe() {
  const canvasRef = useRef(null)
  const pointerInteracting = useRef(null)
  const phiRef = useRef(0)

  const [spring, api] = useSpring(() => ({
    r: 0,
    config: { mass: 1, tension: 280, friction: 40 }
  }))

  const handlePointerDown = useCallback((e) => {
    pointerInteracting.current = e.clientX
    canvasRef.current.style.cursor = 'grabbing'
  }, [])

  const handlePointerMove = useCallback((e) => {
    if (pointerInteracting.current !== null) {
      const delta = e.clientX - pointerInteracting.current
      api.start({ r: delta / 200 })
    }
  }, [api])

  const handlePointerUp = useCallback(() => {
    if (pointerInteracting.current !== null) {
      phiRef.current += spring.r.get()
      api.start({ r: 0 })
    }
    pointerInteracting.current = null
    canvasRef.current.style.cursor = 'grab'
  }, [api, spring.r])

  useEffect(() => {
    window.addEventListener('pointermove', handlePointerMove)
    window.addEventListener('pointerup', handlePointerUp)
    return () => {
      window.removeEventListener('pointermove', handlePointerMove)
      window.removeEventListener('pointerup', handlePointerUp)
    }
  }, [handlePointerMove, handlePointerUp])

  useEffect(() => {
    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: 1000,
      height: 1000,
      phi: 0,
      theta: 0.2,
      dark: 0,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [1, 1, 1],
      markerColor: [0.3, 0.5, 1],
      glowColor: [1, 1, 1]
    })

    let autoRotation = 0
    function animate() {
      autoRotation += 0.003
      globe.update({ phi: autoRotation + phiRef.current + spring.r.get() })
      requestAnimationFrame(animate)
    }
    animate()

    return () => globe.destroy()
  }, [spring.r])

  return (
    <canvas
      ref={canvasRef}
      width={1000}
      height={1000}
      style={{ width: 500, height: 500, cursor: 'grab' }}
      onPointerDown={handlePointerDown}
    />
  )
}
```

--------------------------------

### CSS for Bindable Markers and Arcs

Source: https://github.com/shuding/cobe/blob/main/README.md

These CSS rules demonstrate how to use CSS Anchor Positioning with COBE. They define styles for marker and arc labels, utilizing CSS variables exposed by the globe for positioning and visibility.

```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);
}
```

--------------------------------

### globe.update(options)

Source: https://context7.com/shuding/cobe/llms.txt

Updates the state of an existing globe instance and triggers a re-render with new configuration options.

```APIDOC
## globe.update(options)

### Description
Updates globe state and triggers a re-render. Pass any configuration options to update dynamically without recreating the globe instance.

### Parameters
#### Request Body
- **options** (Object) - Required - Partial configuration object containing properties to update (e.g., phi, theta, markers, arcs, dark, etc.).
```

--------------------------------

### Arcs Configuration

Source: https://context7.com/shuding/cobe/llms.txt

Explains how to draw curved lines (arcs) between two points on the globe. Supports customization of arc color, width, height, and IDs for anchoring.

```APIDOC
## Arcs Configuration

### Description
Draw curved lines between two locations on the globe. Arcs support custom colors and IDs for labeling at the arc's peak.

### Method
`createGlobe(canvas, options)`

### Endpoint
N/A (Initialization option)

### Parameters
#### Request Body (within `createGlobe` options)
- **arcs** (array) - Required - An array of arc objects.
  - **from** (array[number, number]) - Required - Starting `[latitude, longitude]` coordinates.
  - **to** (array[number, number]) - Required - Ending `[latitude, longitude]` coordinates.
  - **color** (array[number, number, number]) - Optional - Custom RGB color for the arc (values 0-1).
  - **id** (string) - Optional - An identifier for CSS anchor positioning at the arc's midpoint.
- **arcColor** (array[number, number, number]) - Optional - Default RGB color for all arcs if not specified individually.
- **arcWidth** (number) - Optional - Thickness of the arc line (e.g., 0.5).
- **arcHeight** (number) - Optional - Curve height of the arc above the globe surface (e.g., 0.3).

### Request Example
```javascript
import createGlobe from 'cobe'

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1],
  arcColor: [0.3, 0.5, 1],             // Default arc color
  arcWidth: 0.5,                        // Line thickness (0.1 to 2)
  arcHeight: 0.3,                       // Curve height above surface
  markerElevation: 0.02,
  markers: [
    { location: [37.78, -122.44], size: 0.03, id: 'sf' },
    { location: [51.51, -0.13], size: 0.03, id: 'london' },
    { location: [35.68, 139.65], size: 0.03, id: 'tokyo' }
  ],
  arcs: [
    // Basic arc between two points
    { from: [37.78, -122.44], to: [51.51, -0.13] },

    // Arc with custom color
    { from: [40.71, -74.01], to: [48.86, 2.35], color: [1, 0.5, 0] },

    // Arc with ID for CSS anchoring (anchors at arc midpoint/peak)
    {
      from: [35.68, 139.65],           // Tokyo
      to: [-33.87, 151.21],            // Sydney
      color: [0, 1, 0.8],
      id: 'tokyo-sydney'
    }
  ]
})
```

### Response
N/A (Configuration during initialization)
```

--------------------------------

### Define COBE TypeScript Interfaces and Usage

Source: https://context7.com/shuding/cobe/llms.txt

This snippet defines the TypeScript interfaces for COBE configuration options, markers, and arcs, and demonstrates their usage with the createGlobe function. Ensure the canvas element is available in the DOM before creating the globe.

```typescript
import createGlobe, { COBEOptions, Marker, Arc, Globe } from 'cobe'

// Marker interface
interface Marker {
  location: [number, number]  // [latitude, longitude]
  size: number                // Relative size (0.01-0.1)
  color?: [number, number, number]  // Optional RGB (0-1)
  id?: string                 // Optional ID for CSS anchoring
}

// Arc interface
interface Arc {
  from: [number, number]      // Start [latitude, longitude]
  to: [number, number]        // End [latitude, longitude]
  color?: [number, number, number]  // Optional RGB (0-1)
  id?: string                 // Optional ID for CSS anchoring
}

// Full options interface
interface COBEOptions {
  width: number               // Canvas width (required)
  height: number              // Canvas height (required)
  phi: number                 // Horizontal rotation (required)
  theta: number               // Vertical tilt (required)
  mapSamples: number          // Dot count (required)
  mapBrightness: number       // Land brightness (required)
  mapBaseBrightness?: number  // Ocean brightness
  baseColor: [number, number, number]    // Globe color (required)
  markerColor: [number, number, number]  // Marker color (required)
  glowColor: [number, number, number]    // Glow color (required)
  markers?: Marker[]
  diffuse: number             // Lighting (required)
  devicePixelRatio: number    // Pixel density (required)
  dark: number                // Dark mode (required)
  opacity?: number
  offset?: [number, number]
  scale?: number
  context?: WebGLContextAttributes
  arcs?: Arc[]
  arcColor?: [number, number, number]
  arcWidth?: number
  arcHeight?: number
  markerElevation?: number
}

// Globe instance interface
interface Globe {
  update: (state: Partial<COBEOptions>) => void
  destroy: () => void
}

// Usage with types
const options: COBEOptions = {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0.2,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1],
  markers: [
    { location: [37.78, -122.44], size: 0.03, id: 'sf' }
  ],
  arcs: [
    { from: [37.78, -122.44], to: [40.71, -74.01] }
  ]
}

const globe: Globe = createGlobe(canvas, options)
```

--------------------------------

### Style Labels with CSS Anchor Positioning

Source: https://context7.com/shuding/cobe/llms.txt

Provides CSS rules for styling marker and arc labels, utilizing CSS anchor positioning properties. Includes a fallback for browsers that do not support anchor positioning.

```css
.marker-label {
  position: absolute;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  margin-bottom: 8px;
  padding: 0.25rem 0.5rem;
  background: #1a1a1a;
  color: #fff;
  font-size: 0.75rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.3s, filter 0.3s;
  filter: blur(calc((1 - var(--cobe-visible-sf, 0)) * 8px));
}

.arc-label {
  position: absolute;
  bottom: anchor(top);
  left: anchor(center);
  translate: -50% 0;
  margin-bottom: 8px;
  padding: 0.3rem 0.6rem;
  background: #fff;
  color: #1a1a1a;
  font-size: 0.7rem;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Fallback for browsers without anchor positioning */
@supports not (anchor-name: --test) {
  .marker-label, .arc-label {
    display: none;
  }
}
```

--------------------------------

### Configure Globe Markers

Source: https://context7.com/shuding/cobe/llms.txt

Place dots on the globe using latitude/longitude coordinates. Markers support custom colors, sizes, and IDs for CSS anchor positioning.

```javascript
import createGlobe from 'cobe'

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.2, 0.4, 1],          // Default color for all markers
  glowColor: [1, 1, 1],
  markerElevation: 0.02,               // Height above globe surface
  markers: [
    // Basic marker - uses default markerColor
    { location: [37.78, -122.44], size: 0.03 },

    // Marker with custom color (overrides markerColor)
    { location: [51.51, -0.13], size: 0.05, color: [1, 0, 0] },

    // Marker with ID for CSS anchor positioning
    { location: [35.68, 139.65], size: 0.04, id: 'tokyo' },

    // Full marker configuration
    {
      location: [-33.87, 151.21],      // [latitude, longitude]
      size: 0.06,                       // Relative to globe (0.01-0.1)
      color: [0, 1, 0.5],              // Custom RGB color (0-1 each)
      id: 'sydney'                      // ID for CSS anchoring
    }
  ]
})
```

--------------------------------

### Update COBE Globe Properties Dynamically

Source: https://context7.com/shuding/cobe/llms.txt

Updates the globe's state and re-renders it. Pass any configuration options to change properties like rotation, appearance, markers, or arcs without re-initializing the globe.

```javascript
import createGlobe from 'cobe'

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1],
  markers: []
})

// Update rotation
globe.update({ phi: 1.5, theta: 0.3 })

// Update appearance
globe.update({
  dark: 1,
  baseColor: [0.1, 0.1, 0.1],
  mapBrightness: 8
})

// Update markers dynamically
globe.update({
  markers: [
    { location: [51.51, -0.13], size: 0.04, id: 'london' },
    { location: [35.68, 139.65], size: 0.04, id: 'tokyo' }
  ]
})

// Update arcs
globe.update({
  arcs: [
    { from: [51.51, -0.13], to: [35.68, 139.65], id: 'london-tokyo' }
  ],
  arcColor: [1, 0.5, 0],
  arcHeight: 0.4
})

// Update multiple properties at once
globe.update({
  phi: 2.0,
  theta: 0.1,
  scale: 1.2,
  offset: [50, 0],
  markerElevation: 0.05
})
```

--------------------------------

### Optimize Globe Rendering Performance

Source: https://context7.com/shuding/cobe/llms.txt

Adjusts rendering parameters based on device capabilities and uses IntersectionObserver to pause animations when the canvas is off-screen.

```javascript
import createGlobe from 'cobe'

// Detect device capability
const isMobile = window.innerWidth < 640
const dpr = Math.min(window.devicePixelRatio || 1, isMobile ? 1.5 : 2)

const globe = createGlobe(canvas, {
  devicePixelRatio: dpr,               // Cap at 2 to avoid GPU overload
  width: 800,
  height: 800,
  phi: 0,
  theta: 0.2,
  dark: 0,
  diffuse: 1.2,
  mapSamples: isMobile ? 8000 : 16000, // Lower for mobile
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1]
})

// Pause rendering when not visible
let animationId = null
let phi = 0

function animate() {
  phi += 0.005
  globe.update({ phi })
  animationId = requestAnimationFrame(animate)
}

const observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {
    if (!animationId) animate()
  } else {
    if (animationId) {
      cancelAnimationFrame(animationId)
      animationId = null
    }
  }
}, { threshold: 0.1 })

observer.observe(canvas)

// Cleanup
// observer.disconnect()
// globe.destroy()
```

--------------------------------

### Defining Arcs Between Locations

Source: https://github.com/shuding/cobe/blob/main/README.md

This snippet shows how to define arcs connecting two geographical locations on the globe. You can optionally specify a custom color for each arc.

```javascript
arcs: [
  {
    from: [37.7595, -122.4367],
    to: [35.6762, 139.6503],
    color: [1, 0.5, 0.5], // optional, uses arcColor if not set
  },
]
```

--------------------------------

### Destroy Globe Instance

Source: https://context7.com/shuding/cobe/llms.txt

Releases WebGL context and stops rendering. Use this in component cleanup functions to prevent memory leaks.

```javascript
import createGlobe from 'cobe'
import { useEffect, useRef } from 'react'

function GlobeComponent() {
  const canvasRef = useRef(null)

  useEffect(() => {
    if (!canvasRef.current) return

    let phi = 0
    const globe = createGlobe(canvasRef.current, {
      devicePixelRatio: 2,
      width: 800,
      height: 800,
      phi: 0,
      theta: 0.2,
      dark: 0,
      diffuse: 1.2,
      mapSamples: 16000,
      mapBrightness: 6,
      baseColor: [1, 1, 1],
      markerColor: [0.3, 0.5, 1],
      glowColor: [1, 1, 1],
      markers: [
        { location: [37.78, -122.44], size: 0.03 }
      ]
    })

    function animate() {
      phi += 0.005
      globe.update({ phi })
      requestAnimationFrame(animate)
    }
    animate()

    // Cleanup on unmount - IMPORTANT!
    return () => globe.destroy()
  }, [])

  return <canvas ref={canvasRef} width={800} height={800} />
}
```

--------------------------------

### Adding IDs to Markers and Arcs for CSS Anchor Positioning

Source: https://github.com/shuding/cobe/blob/main/README.md

Assign unique IDs to markers and arcs to enable CSS Anchor Positioning. This allows DOM elements to be precisely positioned relative to these globe features.

```javascript
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' },
]
```

--------------------------------

### Convert Location to Globe Angles using JavaScript

Source: https://context7.com/shuding/cobe/llms.txt

A utility function to convert latitude and longitude into the corresponding phi and theta angles for COBE globe rotation. This is essential for focusing the globe on specific geographical points.

```javascript
import createGlobe from 'cobe'

// Convert lat/long to globe rotation angles
function locationToAngles(lat, long) {
  return [
    Math.PI - ((long * Math.PI) / 180 - Math.PI / 2),  // phi
    (lat * Math.PI) / 180                               // theta
  ]
}

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1],
  markers: [
    { location: [35.68, 139.65], size: 0.05, id: 'tokyo' }
  ]
})

// Focus on Tokyo with smooth easing
const [targetPhi, targetTheta] = locationToAngles(35.68, 139.65)
let currentPhi = 0
let currentTheta = 0

function animate() {
  // Ease toward target (0.05-0.1 for smooth transitions)
  const distPhi = targetPhi - currentPhi
  const distTheta = targetTheta - currentTheta
  currentPhi += distPhi * 0.08
  currentTheta += distTheta * 0.08

  globe.update({ phi: currentPhi, theta: currentTheta })
  requestAnimationFrame(animate)
}
animate()

// Function to focus on any location
function focusOn(lat, long) {
  const [phi, theta] = locationToAngles(lat, long)
  targetPhi = phi
  targetTheta = theta
}

// Usage: focusOn(51.51, -0.13)  // Focus on London

```

--------------------------------

### Configure Globe Arcs

Source: https://context7.com/shuding/cobe/llms.txt

Draw curved lines between two locations on the globe. Arcs support custom colors and IDs for labeling at the arc's peak.

```javascript
import createGlobe from 'cobe'

const globe = createGlobe(canvas, {
  devicePixelRatio: 2,
  width: 1000,
  height: 1000,
  phi: 0,
  theta: 0,
  dark: 0,
  diffuse: 1.2,
  mapSamples: 16000,
  mapBrightness: 6,
  baseColor: [1, 1, 1],
  markerColor: [0.3, 0.5, 1],
  glowColor: [1, 1, 1],
  arcColor: [0.3, 0.5, 1],             // Default arc color
  arcWidth: 0.5,                        // Line thickness (0.1 to 2)
  arcHeight: 0.3,                       // Curve height above surface
  markerElevation: 0.02,
  markers: [
    { location: [37.78, -122.44], size: 0.03, id: 'sf' },
    { location: [51.51, -0.13], size: 0.03, id: 'london' },
    { location: [35.68, 139.65], size: 0.03, id: 'tokyo' }
  ],
  arcs: [
    // Basic arc between two points
    { from: [37.78, -122.44], to: [51.51, -0.13] },

    // Arc with custom color
    { from: [40.71, -74.01], to: [48.86, 2.35], color: [1, 0.5, 0] },

    // Arc with ID for CSS anchoring (anchors at arc midpoint/peak)
    {
      from: [35.68, 139.65],           // Tokyo
      to: [-33.87, 151.21],            // Sydney
      color: [0, 1, 0.8],
      id: 'tokyo-sydney'
    }
  ]
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.