Skip to main content

CanvasGlobe: interactive maps you can ship today

Interactive 3D globe and world map on a plain 2D canvas. Zero dependencies, zero network calls, ~121 KB gzipped: drop it in a <script> tag or import it in React.

Get startedExplore the live demoView pricingAI setup guide

Drag the globe. Scroll to zoom. Hover a marker.

Zero dependencies

No WebGL, no D3, no tiles, no API keys. Country geometry ships inside the package.

Interaction

Drag with momentum, scroll to zoom, pinch, hover, click, and use keyboard controls.

Ten presets

Dot-matrix hologram, neon, blueprint HUD, printed atlas. Every piece composes.

Country canvas

Play an image, GIF or video inside a country's outline.

Knows the viewer

Places them from their time zone. No permission prompt, no network call.

Two lines to a globe

import { createGlobe } from "canvas-globe";

createGlobe(document.querySelector("#globe"), {
  licenseKey: "your_license_key",
  markers: [{ lat: 23.03, lon: 72.58, count: 12, emoji: "🧑‍🎨", live: true }],
});
Install it →

Evaluating alternatives? Read the JavaScript globe library comparison.

One package. Two license paths.

Open source when you can. Commercial when you need proprietary terms.

Use the full library under GPLv3 for a compatible project, or buy a commercial license for a proprietary product. Both options use the same package and API.

Compare plansUnderstand licensing

Around the web

Read the story or try CanvasGlobe somewhere else

These pages offer another way to understand the project, from the story behind its Canvas 2D renderer to a live notebook you can use without installing anything.

Read the build storyWhy CanvasGlobe uses Canvas 2D and what it took to make the globe feel three-dimensional.Use the interactive notebookDrag the globe and explore its themes, projections, markers, routes, and export tools.Browse the indexed documentationFind structured CanvasGlobe documentation prepared for coding assistants and search tools.
See every article, demo, and directory listing