Repolode
Submit
shuding

shuding/cobe

A ~5KB zero-dependency WebGL globe library that lets any DOM element be bound to the globe as a marker.

View on GitHubWebsite
Stars
5,987
Forks
354
Open issues
44
Last commit
28 days ago

What is it?

COBE is a small TypeScript library for rendering an interactive WebGL globe on a canvas. You pass a canvas element and a configuration object to createGlobe, and it draws the globe with markers and arcs connecting two locations. Rotation, colors, lighting, and marker size are all controlled through options and an onRender callback that runs every animation frame.

The distinguishing feature is that markers and arcs can have an id, which exposes CSS anchor names and visibility variables. This lets ordinary HTML elements be positioned over specific points on the globe, with CSS transitions, filters, and opacity responding to whether a point is facing the viewer. The library has no dependencies and is described as about 5KB.

The globe can be destroyed with globe.destroy(), which removes its bindings. The project is written in TypeScript and distributed under the MIT license.

Key features

  • 01Renders a WebGL globe on a canvas element with no dependencies.
  • 02Places markers and arcs between geographic coordinates.
  • 03Lets any DOM element be anchored to a marker via CSS anchor positioning.
  • 04Exposes a visibility variable so CSS can fade or blur labels behind the globe.
  • 05Supports per-frame updates through an onRender callback.

Use cases

  • Showing server or customer locations on a landing page.
  • Building an interactive map of events or offices with HTML labels.
  • Visualizing flight or data routes as arcs between cities.

Quick start

  1. 1

    Add a canvas element to your HTML page

  2. 2

    Import createGlobe from cobe and call it on the canvas with your options

    import createGlobe from 'cobe'

Things to know

  • Requires WebGL support in the browser.
  • Globe rendering is configured through a single options object, so custom visuals beyond its parameters need extra code.

Topics

#webgl#globe#data-visualization#canvas#typescript#css-anchor-positioning

FAQ

What is cobe?
A ~5KB zero-dependency WebGL globe library that lets any DOM element be bound to the globe as a marker. COBE is a small TypeScript library for rendering an interactive WebGL globe on a canvas. You pass a canvas element and a configuration object to createGlobe, and it draws the globe with markers and arcs connecting two locations. Rotation, colors, lighting, and marker size are all controlled through options and an onRender callback that runs every animation frame.
Is cobe free to use? What license does it have?
cobe is open source under the MIT license. Check the license terms before using it in commercial products.
Is cobe still maintained?
Actively maintained. The last commit to cobe was on Sep 22, 2026.
What can I use cobe for?
Showing server or customer locations on a landing page. Building an interactive map of events or offices with HTML labels. Visualizing flight or data routes as arcs between cities.
How do I install cobe?
Add a canvas element to your HTML page Import createGlobe from cobe and call it on the canvas with your options: import createGlobe from 'cobe'
Where can I get cobe?
The source code and installation instructions are on GitHub: https://github.com/shuding/cobe

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects