<GlobeView
className="h-96 w-full"
spin={3}
markers={[
{ lngLat: [2.3522, 48.8566], pulse: true },
{ lngLat: [-122.4194, 37.7749], pulse: true },
]}
/>GlobeView is MapView on MapLibre's native globe projection: the same free,
key-less OpenFreeMap basemaps, the same live restyle when the .dark class
toggles, the same lazy-loaded runtime. The atmosphere halo is tinted from your
--primary token, so a rebrand retints the globe with everything else, and the
space behind it stays transparent so your section background shows through.
Rotation pauses while the pointer is down and is skipped entirely under
prefers-reduced-motion. Without WebGL the component renders
unavailableFallback, or a static globe outline if you pass none.
Recipes
A fixed hero frame, no rotation
Leave spin at 0 and pick a center when the globe frames a region rather
than decorates a hero. For sources and layers of your own, use onReady
exactly as with MapView — it replays after a theme-driven basemap swap, so
write it as "make the globe look like this", not "do this once".
API
| Prop | Type | Default | |
|---|---|---|---|
center | readonly [number, number] | — | Initial center [longitude, latitude]. Read once, on mount; defaults to
[2.3522, 30], which puts the prime meridian mid-frame. |
markers | readonly GlobeMarker[] | — | Markers to place, coloured from the token palette. Read once, on mount; defaults to none. |
onReady | ((map: Map$1) => void) | — | Called once the basemap, globe projection and atmosphere are ready, with the live MapLibre instance. A theme switch swaps the basemap style (which drops custom sources/layers) and calls this again, so the setup must tolerate re-runs. The instance is removed on unmount. |
options | Omit<MapOptions, "center" | "container" | "style" | "zoom"> | — | Extra MapLibre constructor options (cooperativeGestures,
attributionControl…). Read once, on mount. |
spin | number | — | Auto-rotation speed in degrees of longitude per second; 0 (the default)
disables it. Rotation pauses while the pointer is down and is skipped
entirely under prefers-reduced-motion. Read once, on mount. |
styleUrl | string | — | Vector style URL. Read once, on mount; defaults to the OpenFreeMap
"liberty" basemap — or its "dark" variant while inside a .dark subtree,
following theme switches. An explicit URL opts out of theme following. |
unavailableFallback | ReactNode | — | Rendered in place of the globe when WebGL is unavailable
(sandboxed/headless browsers, disabled GPU). Defaults to a static globe
outline drawn in --muted. |
zoom | number | — | Initial zoom. Read once, on mount; defaults to 1.4, the whole globe. |
Plus every <div> prop. Source: globe-view/components/globe-view.tsx.
Every prop marked "read once, on mount" is exactly that: changing center,
zoom or spin after the globe mounts does nothing. Drive the camera through
the instance onReady hands you instead. For a styleUrl of your own, see
Basemaps.
Own it
The MapLibre runtime sits in globe-view-implementation.tsx next to the
component. The most likely customisation is the atmosphere: edit the two
color-mix expressions in handleReady to change what the halo is tinted
from.