Skip to main content

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

Appearance

MethodNotes
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

MethodReturns
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

MethodReturnsNotes
ping(spec)thisOne-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?)thisScroll-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

MethodNotes
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

PropertyTypeNotes
canvasHTMLCanvasElement
ctxCanvasRenderingContext2D
themeThemeThe resolved palette
zoomnumberRead-only
lon, latnumberCurrent centre; writable
markersMarker[]Current set
worldCountryShape[]Resolved geometry
hitsarrayHit targets from the last frame

Capability helper

import { canRecord } from "canvas-globe";

canRecord(); // boolean: MediaRecorder support