Orthographic vs perspective

zoom — pitch — projection — ortho —

Cameras are synced. Orthographic is fully applied at 0° and blends linearly to full perspective by 15°, so lower pitch = more orthographic. The difference reads best on relief around 4–8°.

Perspective default, no setCamera call

Orthographic setCamera({ 'camera-projection': 'orthographic' })

Globe to orthographic, automatically

Mapbox handles both switches on its own. You do not need a zoom threshold or a pitch listener — setting two properties once is enough.

The whole thing

const map = new mapboxgl.Map({
  style: 'mapbox://styles/mapbox/standard',
  projection: 'globe',   // world projection
  pitch: 0,
})

map.on('style.load', () => {
  // camera projection — the only extra call
  map.setCamera({ 'camera-projection': 'orthographic' })
})

The two knobs

World projection — the shape of the earth. globe draws it as a ball; mercator is the flat rectangular map most web maps use.
Camera projection — how depth is drawn. perspective is like a photo, where distant things look smaller. orthographic is like an architect's blueprint: nothing shrinks with distance, and parallel lines stay parallel.

What Mapbox does on its own

ZOOM 5 → 6 The globe blends into Mercator. Past zoom 6 the projection genuinely becomes Mercator internally, not just visually — the readout above shows mercator even though this style declares globe.
PITCH 0° → 15° The camera blends linearly from orthographic to perspective. Fully orthographic at 0°, fully perspective at 15° and above, so lower pitch means more orthographic.

Why it composes — GL JS 3.26 internals

// The gate. Note it is blocked while the name is still 'globe'.
get isOrthographic() {
  return this.projection.name !== 'globe'
    && this._orthographicProjectionAtLowPitch
    && this.pitch < 15
}

// Zoom 5→6: the transform's projection genuinely becomes mercator.
globeToMercatorTransition = (zoom) => smoothstep(5, 6, zoom)

// Pitch blend. 0 = full orthographic, 1 = full perspective.
mixValue = pitch >= 15 ? 1 : pitch / 15

The two interact: orthographic stays suppressed while the projection is globe. Zoomed out you get globe and perspective; zoom past 6 and level off and you get Mercator and orthographic, with no code in between.

Do you need a zoom rule?

Only if you want a threshold other than 6 — the built-in one is not configurable. For a flat top-down view starting at, say, zoom 10, drop the globe setting and drive it yourself.

let flat = null  // only act on an actual crossing

map.on('zoom', () => {
  const next = map.getZoom() >= 10
  if (next === flat) return
  flat = next
  map.setProjection(next ? 'mercator' : 'globe')
})

Worth knowing

Those numbers are internal. Zoom 5/6 and the 15° pitch cutoff are constants inside GL JS, not public API. They are stable in practice, but do not hard-code them into UI copy or tests.

Docs: setProjection · setCamera · camera style spec