MapLibre GL JS code on a 3D globe

Change one import
@ortho-earth/globe/maplibre · Map · Marker · Popup · addProtocol · style.json · the controls

@ortho-earth/globe/maplibre is the MapLibre GL JS API drawn on the Ortho Earth globe engine (WebGPU with a WebGL2 fallback). Code you wrote for MapLibre keeps working; the map it draws is a round Earth with terrain at true scale, and the same map can also show 3D Tiles, I3S, glTF models and the sky.

1. The one line

import * as maplibregl from "@ortho-earth/globe/maplibre";   // was: from "maplibre-gl"

const map = new maplibregl.Map({
  container: "map",
  style: "https://demotiles.maplibre.org/style.json",
  center: [139.77, 35.68],
  zoom: 4,
});

map.on("load", () => {
  map.addSource("cities", { type: "geojson", data: "cities.geojson" });
  map.addLayer({ id: "cities", type: "circle", source: "cities",
    paint: { "circle-radius": 6, "circle-color": "#e4572e" } });
});

Install with npm i @ortho-earth/globe and build with Vite. Zoom levels follow MapLibre's, so zoom, minzoom/maxzoom and tile levels mean the same as in your code. If you use MapLibre's controls, keep linking maplibre-gl.css. The full recipe, run by an automated test against the published package, is section A8 of Build with Ortho Earth.

2. The 139 official examples

Every official MapLibre GL JS example runs on the globe with its code unchanged — only the import is switched. The MapLibre examples page shows each one with its source, a Run button, and how closely the picture matches MapLibre's. On the grading of 12 October 2026, 66 draw the same picture, 50 give the same answers to queries, 21 run with visible differences, and none fail to run (2 have no MapLibre picture to compare with).

Example	What it shows here
3D terrain	`setTerrain` with a `raster-dem` source, on the sphere
Terrain from quantized-mesh tiles	Cesium's terrain format, read directly
Buildings in 3D	`fill-extrusion` on the globe
3D Tiles with three.js	three.js drawn in the same frame as the map

3. What works differently

Always a globe. There is no flat Mercator mode: projection is read as globe whatever it says, and renderWorldCopies has nothing to copy. The flat world map of this project is Equal Earth.
Drawing happens in a worker. A custom layer passed as an object is drawn on top of the map; a custom layer with a url runs inside the render worker and is hidden by terrain and buildings. deck.gl's MapboxOverlay works as an overlay (interleaved: true falls back to overlaid).
More than MapLibre. The same map takes 3D Tiles (map.add3DTiles), I3S, quantized-mesh terrain, glTF models, a shared clock with the night side and the stars, and analysis such as sun shadow and viewshed. Coming from CesiumJS too? See From CesiumJS.

The ledger of every difference, kept as the work goes on, is packages/globe/maplibre-compat.md in the repository.

@ortho-earth/globe · GPL-3.0 · Kenji Yoshida · 2026