Synchronous redraw API

Motivation

In react-map-gl, when the viewport updates, we call Map.jumpTo() inside componentDidUpdate(), which schedules a Mapbox rerender in the next animation frame. This causes the canvas rerender to always occur one step behind the React updates.

You can see this issue in https://github.com/uber/react-map-gl/pull/720 and https://github.com/uber/deck.gl/issues/2458.

Design

Provide a synchronous API e.g. redraw() that immediately flushes the dirty state.

Implementation

Here's how we are currently forcing rerender:

// map render will throw error if style is not loaded
if (map.style) {
  // cancel the scheduled update
  if (map._frame) {
    map._frame.cancel();
    map._frame = null;
  }
  map._render();
}

Private methods and properties are manipulated here, which is not a reliable solution.

Start by tracing the Map.jumpTo() rendering path and reviewing the private _frame and _render usage shown in the issue. The work is done when a documented public API provides synchronous redraw behavior without relying on those private members, with coverage for the style-loaded condition.