Methods

Every method that returns this chains.

globe.setMarkers(next).setTheme("midnight").flyTo(139.69, 35.68);

Content

setMarkers

setMarkers(markers: Marker[]): this

Replaces the whole set, recomputes the weight ceiling and clears the keyboard focus. Does not touch the viewer pin.

setArcs

setArcs(arcs: Arc[]): this

setOptions

setOptions(patch: Partial<GeoGlobeOptions>): this

Patches any option at runtime. Cheaper than rebuilding the instance.

Passing preset or scene expands it into every key it owns, exactly as setPreset and setScene do: keys you pass alongside it still win.

globe.setOptions({ preset: "neon" });                       // same as setPreset("neon")
globe.setOptions({ preset: "neon", landStyle: "outline" }); // …but with your override kept

setCountryMedia

setCountryMedia(country: string, source: MediaSource | MediaSpec | null): this

null releases that country's media.

setTexture

setTexture(source: string | CanvasImageSource | null): this

setTileLayer

setTileLayer(source: string | TileProvider | TileLayerOptions | TileLayer | null): this

Adds or replaces an opt-in cached XYZ overview layer. Passing null removes the layer and releases its tile cache. See the tile-layer guide for provider, attribution, CORS, request-limit, and failure behavior.

Appearance

Method	Notes
setMode("globe" | "map")
setProjection(name)	Flat-map projection
setTheme(theme)	Name, "auto", "css" or a partial object
setPreset(name)	Keys the preset omits return to defaults; same as setOptions({ preset: name })
setLandStyle(style)
setScene(name, overrides?)	Whole composition; same as setOptions({ scene: name, ...overrides })
setTime(date | null)	Terminator clock

View

flyTo

flyTo(lon: number, lat: number, opts?: { instant?: boolean; zoom?: number }): this

Eases with a damped spring, or jumps with instant. Jumps automatically under reduced motion.

fitTo

fitTo(bounds: [west, south, east, north], opts?): this

fitToMarkers

fitToMarkers(opts?: { padding?: number }): this

Picks the shortest longitude arc covering every marker, so a set straddling the dateline frames tightly instead of zooming out to the whole world.

Zoom

Method	Returns
setZoom(z)	this
zoomBy(factor)	this
zoom (getter)	number
getCenter()	{ lon, lat }

Countries

focusOn

focusOn(country: string | FocusSpec, opts?): this

Frames a country. Raises maxZoom if the frame needs it; clearFocus() restores it.

clearFocus

clearFocus(): this

countryAspect

countryAspect(country: string): number | null

Height ÷ width ratio that frames the country without letterboxing.

countryAt

countryAt(x: number, y: number): CountryShape | null

Coordinates

project

project(lon: number, lat: number): { x, y, visible } | null

Screen position in CSS pixels. null when the point is behind the globe.

unproject

unproject(x: number, y: number): [lon, lat] | null

Live effects

Method	Returns	Notes
ping(spec)	this	One-shot expanding ring
pingFeed(items, opts?)	{ stop() }	Replays a list on a timer
clearPings()	this
tour(points, opts?)	{ stop() }	Cinematic fly-through
stopTour()	this
story(element, steps, opts?)	this	Scroll-linked view
stopStory()	this
setTimelineAt(date | null)	this
playTimeline(opts?)	{ stop() }
stopTimeline()	this

Viewer

locateViewer

locateViewer(): ViewerLocation | null
locateViewer({ precise: true }): Promise<ViewerLocation | null>

Synchronous from the time zone, or a Promise that upgrades to GPS. Never rejects.

setViewerLocation

setViewerLocation(location: ViewerLocation, spec?: ShowViewerOptions): this

Output

exportImage

exportImage(opts?: ExportOptions): string | null

Renders one frame off-screen at any size. null without a document.

globe.exportImage({ preset: "story" });
globe.exportImage({ width: 2400, height: 1260, transparent: true });

exportBlob

exportBlob(opts?: ExportOptions): Promise<Blob | null> | null

snapshot / toBlob

snapshot(type?: string, quality?: number): string
toBlob(type?: string, quality?: number): Promise<Blob | null>

The live canvas at its current size.

record

record(opts?): { promise: Promise<Blob>; stop(): Promise<Blob>; mimeType?: string }

WebM from the canvas stream, encoded in the tab. Check the exported canRecord() helper first.

Lifecycle

Method	Notes
render()	Draws one frame synchronously
invalidate()	Marks the next frame dirty
resize()	Usually automatic via ResizeObserver
destroy()	Releases everything: always call it on unmount

Properties

Property	Type	Notes
canvas	HTMLCanvasElement
ctx	CanvasRenderingContext2D
theme	Theme	The resolved palette
zoom	number	Read-only
lon, lat	number	Current centre; writable
markers	Marker[]	Current set
world	CountryShape[]	Resolved geometry
hits	array	Hit targets from the last frame

Capability helper

import { canRecord } from "canvas-globe";

canRecord(); // boolean: MediaRecorder support