maplibre-gl 6.3.0 → 6.4.0

package/src/ui/handler_inertia.ts

@@ -3,6 +3,7 @@ import {bezier, clamp, extend, evaluateZoomSnap} from '../util/util.ts';
 import Point from '@mapbox/point-geometry';
 
 import type {DragPanOptions} from './handler/shim/drag_pan.ts';
+import type {HandlerResult} from './handler_manager.ts';
 import type {EaseToOptions} from './camera.ts';
 import type {Map} from './map.ts';
 
@@ -43,12 +44,24 @@ export type InertiaOptions = {
     maxSpeed: number;
 };
 
+/**
+ * The maximum age of a recorded gesture update, in milliseconds.
+ */
+const BUFFER_CUTOFF = 160;
+
+/**
+ * The time window the gesture velocity is measured over, in milliseconds.
+ */
+const VELOCITY_WINDOW = 60;
+
+type InertiaBufferEntry = {
+    time: number;
+    settings: HandlerResult;
+};
+
 export class HandlerInertia {
     _map: Map;
-    _inertiaBuffer: Array<{
-        time: number;
-        settings: any;
-    }>;
+    _inertiaBuffer: InertiaBufferEntry[];
 
     constructor(map: Map) {
         this._map = map;
@@ -59,23 +72,54 @@ export class HandlerInertia {
         this._inertiaBuffer = [];
     }
 
-    record(settings: any): void {
+    record(settings: HandlerResult): void {
         this._drainInertiaBuffer();
         this._inertiaBuffer.push({time: now(), settings});
     }
 
     _drainInertiaBuffer(): void {
         const inertia = this._inertiaBuffer,
-            currentTime = now(),
-            cutoff = 160;   //msec
+            currentTime = now();
 
-        while (inertia.length > 0 && currentTime - inertia[0].time > cutoff)
+        while (inertia.length > 0 && currentTime - inertia[0].time > BUFFER_CUTOFF)
             inertia.shift();
     }
 
+    /**
+     * Returns the entries the velocity is measured from: everything recorded within
+     * {@link VELOCITY_WINDOW} before now, but never fewer than the last two, so that
+     * inertia also works below two recorded updates per window.
+     */
+    _getVelocityEntries(): InertiaBufferEntry[] {
+        const inertia = this._inertiaBuffer;
+        const windowStart = now() - VELOCITY_WINDOW;
+
+        let firstIndex = Math.max(0, inertia.length - 2);
+        while (firstIndex > 0 && inertia[firstIndex - 1].time >= windowStart) {
+            firstIndex--;
+        }
+
+        return inertia.slice(firstIndex);
+    }
+
+    /**
+     * Returns the ease which continues the gesture that has just ended.
+     *
+     * The velocity is measured over the time up to the release and not up to the last
+     * recorded movement, so that a gesture held still before being released has a lower
+     * velocity, down to no inertia at all. The delta of an entry happened before it was
+     * recorded, so the first entry only marks the start of the measured interval; anchors
+     * are the exception, as they describe the state at the moment of their entry.
+     *
+     * @param panInertiaOptions - overrides for the pan inertia defaults
+     * @returns the ease options, or `undefined` when the measured interval holds no
+     * movement, which terrain gestures produce by recording updates without any delta
+     */
     _onMoveEnd(panInertiaOptions?: DragPanOptions | boolean): EaseToOptions {
         this._drainInertiaBuffer();
-        if (this._inertiaBuffer.length < 2) {
+        const entries = this._getVelocityEntries();
+        if (entries.length < 2) {
+            this.clear();
             return;
         }
 
@@ -89,18 +133,25 @@ export class HandlerInertia {
             around: undefined
         };
 
-        for (const {settings} of this._inertiaBuffer) {
+        for (const {settings} of entries) {
+            if (settings.around) deltas.around = settings.around;
+            if (settings.pinchAround) deltas.pinchAround = settings.pinchAround;
+        }
+
+        for (const {settings} of entries.slice(1)) {
             deltas.zoom += settings.zoomDelta || 0;
             deltas.bearing += settings.bearingDelta || 0;
             deltas.pitch += settings.pitchDelta || 0;
             deltas.roll += settings.rollDelta || 0;
             if (settings.panDelta) deltas.pan._add(settings.panDelta);
-            if (settings.around) deltas.around = settings.around;
-            if (settings.pinchAround) deltas.pinchAround = settings.pinchAround;
         }
 
-        const lastEntry = this._inertiaBuffer[this._inertiaBuffer.length - 1];
-        const duration = (lastEntry.time - this._inertiaBuffer[0].time);
+        if (!deltas.pan.mag() && !deltas.zoom && !deltas.bearing && !deltas.pitch && !deltas.roll) {
+            this.clear();
+            return;
+        }
+
+        const duration = now() - entries[0].time;
 
         const easeOptions = {} as any;
 

package/src/ui/map_tests/map_images.test.ts

@@ -95,6 +95,32 @@ test('map fires `styleimagemissing` when missing style image resolver returns no
     expect(map.hasImage(id)).toBeFalsy();
 });
 
+test('map preserves resolved images when missing style image resolver rejects another image', async () => {
+    const map = createMap();
+
+    const resolvedId = 'resolved-style-image';
+    const rejectedId = 'rejected-style-image';
+    const sampleImage = {width: 2, height: 1, data: new Uint8Array(8)};
+    const missingImageEventSpy = vi.fn();
+
+    map.setMissingStyleImageResolver(async (imageId) => {
+        if (imageId === rejectedId) {
+            throw new Error('Failed to resolve image');
+        }
+        map.addImage(imageId, sampleImage);
+    });
+    map.on('styleimagemissing', missingImageEventSpy);
+
+    const generatedImages = await map.style.imageManager.getImages([resolvedId, rejectedId]);
+
+    expect(generatedImages[resolvedId].data.width).toEqual(sampleImage.width);
+    expect(generatedImages[rejectedId]).toBeUndefined();
+    expect(missingImageEventSpy).toHaveBeenCalledTimes(1);
+    expect(missingImageEventSpy.mock.calls[0][0].id).toBe(rejectedId);
+    expect(map.hasImage(resolvedId)).toBeTruthy();
+    expect(map.hasImage(rejectedId)).toBeFalsy();
+});
+
 test('map keeps missing style image resolver after replacing the style', async () => {
     const map = createMap();
 

package/src/ui/map_tests/map_webgl.test.ts

@@ -104,6 +104,7 @@ test('a WebGL style image is told to release its GPU resources on context loss,
         onRemove: vi.fn()
     };
     map.addImage('gpu-image', userImage);
+    const versionBeforeContextLoss = map.getImage('gpu-image').version;
 
     const contextLostPromise = map.once('webglcontextlost');
     canvas.dispatchEvent(new window.Event('webglcontextlost'));
@@ -117,7 +118,7 @@ test('a WebGL style image is told to release its GPU resources on context loss,
 
     expect(map.hasImage('gpu-image')).toBe(true);
     expect(map.getImage('gpu-image').userImage).toBe(userImage);
-    expect(map.style.imageManager.updatedImages['gpu-image']).toBe(true);
+    expect(map.getImage('gpu-image').version).toBe(versionBeforeContextLoss + 1);
 
     map.remove();
 });

package/src/ui/marker.test.ts

@@ -812,6 +812,157 @@ describe('marker', () => {
         map.remove();
     });
 
+    test('Marker with draggable:true is keyboard-focusable, and stops being focusable when dragging is disabled', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('0');
+        marker.setDraggable(false);
+        expect(marker.getElement().hasAttribute('tabindex')).toBe(false);
+        map.remove();
+    });
+
+    test('Marker.setDraggable preserves an application-provided tabindex', () => {
+        const marker = new Marker();
+        marker.getElement().setAttribute('tabindex', '5');
+
+        marker.setDraggable(true);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('5');
+
+        marker.setDraggable(false);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('5');
+    });
+
+    test('Marker keeps a tabindex the application overrode after the marker managed it', () => {
+        const marker = new Marker({draggable: true});
+        marker.setDraggable(true);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('0');
+
+        marker.getElement().setAttribute('tabindex', '5');
+        marker.setDraggable(false);
+        expect(marker.getElement().getAttribute('tabindex')).toBe('5');
+    });
+
+    test('Marker starts a fresh keyboard gesture after being removed mid-drag and re-added', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        const el = marker.getElement();
+        const dragstart = vi.fn();
+        marker.on('dragstart', dragstart);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(dragstart).toHaveBeenCalledTimes(1);
+
+        // removed mid-gesture (no keyup), then re-added
+        marker.remove();
+        marker.addTo(map);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(dragstart).toHaveBeenCalledTimes(2);
+        map.remove();
+    });
+
+    test('Marker keeps its tabindex while either dragging or a popup keeps it interactive', () => {
+        const marker = new Marker({draggable: true}).setPopup(new Popup());
+
+        marker.setPopup();
+        expect(marker.getElement().getAttribute('tabindex')).toBe('0');
+
+        marker.setDraggable(false);
+        expect(marker.getElement().hasAttribute('tabindex')).toBe(false);
+    });
+
+    test('Marker with a custom element leaves focusability and keyboard handling to the application', () => {
+        const map = createMap();
+        const element = window.document.createElement('div');
+        const marker = new Marker({draggable: true, element}).setLngLat([0, 0]).addTo(map);
+        const startLngLat = marker.getLngLat();
+        const event = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true});
+
+        element.dispatchEvent(event);
+
+        expect(element.hasAttribute('tabindex')).toBe(false);
+        expect(marker.getLngLat()).toEqual(startLngLat);
+        expect(event.defaultPrevented).toBe(false);
+        map.remove();
+    });
+
+    test('Marker with draggable:true moves with arrow keys and fires drag events', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        const el = marker.getElement();
+        const startPos = map.project(marker.getLngLat());
+        const events: string[] = [];
+        const positionsAtDragstart: Point[] = [];
+        marker.on('dragstart', () => {
+            events.push('dragstart');
+            positionsAtDragstart.push(map.project(marker.getLngLat()));
+        });
+        marker.on('drag', () => events.push('drag'));
+        marker.on('dragend', () => events.push('dragend'));
+
+        const ignoredEvent = new KeyboardEvent('keydown', {key: 'Enter', bubbles: true, cancelable: true});
+        el.dispatchEvent(ignoredEvent);
+        expect(map.project(marker.getLngLat())).toEqual(startPos);
+        expect(ignoredEvent.defaultPrevented).toBe(false);
+
+        const nestedElement = window.document.createElement('button');
+        el.attachShadow({mode: 'open'}).appendChild(nestedElement);
+        const nestedEvent = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, composed: true, cancelable: true});
+        nestedElement.dispatchEvent(nestedEvent);
+        expect(map.project(marker.getLngLat())).toEqual(startPos);
+        expect(nestedEvent.defaultPrevented).toBe(false);
+
+        const easeTo = vi.spyOn(map, 'easeTo');
+        const containerHandler = vi.fn();
+        map.getCanvasContainer().addEventListener('keydown', containerHandler);
+        const event = new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true});
+        el.dispatchEvent(event);
+
+        expect(map.project(marker.getLngLat()).x).toBeCloseTo(startPos.x + 1);
+        expect(map.project(marker.getLngLat()).y).toBeCloseTo(startPos.y);
+        expect(event.defaultPrevented).toBe(true);
+        expect(containerHandler).not.toHaveBeenCalled();
+        expect(easeTo).not.toHaveBeenCalled();
+        expect(events).toEqual(['dragstart', 'drag']);
+        expect(positionsAtDragstart[0].x).toBeCloseTo(startPos.x + 1);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', repeat: true, bubbles: true, cancelable: true}));
+        el.dispatchEvent(new KeyboardEvent('keyup', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(events).toEqual(['dragstart', 'drag', 'drag', 'dragend']);
+
+        el.dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        el.dispatchEvent(new FocusEvent('blur'));
+        expect(events).toEqual(['dragstart', 'drag', 'drag', 'dragend', 'dragstart', 'drag', 'dragend']);
+
+        el.dispatchEvent(new KeyboardEvent('keyup', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+        expect(events).toEqual(['dragstart', 'drag', 'drag', 'dragend', 'dragstart', 'drag', 'dragend']);
+        map.remove();
+    });
+
+    test('Marker with draggable:true moves ten pixels per Shift+arrow keydown', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map);
+        const startPos = map.project(marker.getLngLat());
+
+        marker.getElement().dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowDown', shiftKey: true, bubbles: true, cancelable: true}));
+
+        const endPos = map.project(marker.getLngLat());
+        expect(endPos.x).toBeCloseTo(startPos.x);
+        expect(endPos.y).toBeCloseTo(startPos.y + 10);
+        map.remove();
+    });
+
+    test('Marker stops responding to arrow keys after dragging is disabled', () => {
+        const map = createMap();
+        const marker = new Marker({draggable: true}).setLngLat([0, 0]).addTo(map).setDraggable(false);
+        const startLngLat = marker.getLngLat();
+
+        marker.getElement().dispatchEvent(new KeyboardEvent('keydown', {key: 'ArrowRight', bubbles: true, cancelable: true}));
+
+        expect(marker.getLngLat()).toEqual(startLngLat);
+        map.remove();
+    });
+
     test('Marker with draggable:false does not move to new position in response to a mouse-triggered drag', () => {
         const map = createMap();
         const marker = new Marker({})

package/src/ui/marker.ts

@@ -18,6 +18,19 @@ import type {PointLike} from './camera.ts';
  */
 export type Alignment = 'map' | 'viewport' | 'auto';
 
+/**
+ * Screen-pixel deltas applied when a focused draggable marker is moved with the arrow keys.
+ */
+const ARROW_KEY_DELTAS: Partial<Record<KeyboardEvent['key'], [number, number]>> = {
+    ArrowLeft: [-1, 0],
+    ArrowRight: [1, 0],
+    ArrowUp: [0, -1],
+    ArrowDown: [0, 1]
+};
+
+const KEYBOARD_DRAG_SMALL_STEP = 1;
+const KEYBOARD_DRAG_LARGE_STEP = 10;
+
 /**
  * The {@link Marker} options object
  */
@@ -52,6 +65,10 @@ export type MarkerOptions = {
     scale?: number;
     /**
      * A boolean indicating whether or not a marker is able to be dragged to a new position on the map.
+     * A draggable default marker also becomes keyboard focusable and, while focused, moves by
+     * 1 screen pixel per arrow-key press (10 with Shift), firing the same `dragstart`/`drag`/`dragend`
+     * events as pointer dragging. Markers with a custom `element` keep their focusability and
+     * keyboard behavior application-owned.
      * @defaultValue false
      */
     draggable?: boolean;
@@ -222,12 +239,13 @@ export class Marker extends Evented<MarkerEventType> {
     _rotation: number;
     _pitchAlignment: Alignment;
     _rotationAlignment: Alignment;
-    _originalTabIndex: string; // original tabindex of _element
     _opacity: string;
     _opacityWhenCovered: string;
     _opacityTimeout: ReturnType<typeof setTimeout>;
     _subpixelPositioning: boolean;
     _roleManaged: boolean;
+    _tabIndexManaged: boolean;
+    _keyboardDragActive: boolean;
 
     /**
      * @param options - the options
@@ -243,6 +261,8 @@ export class Marker extends Evented<MarkerEventType> {
         this._subpixelPositioning = options?.subpixelPositioning || false;
         this._isDragging = false;
         this._roleManaged = false;
+        this._tabIndexManaged = false;
+        this._keyboardDragActive = false;
         this._state = 'inactive';
         this._rotation = options?.rotation || 0;
         this._rotationAlignment = options?.rotationAlignment || 'auto';
@@ -447,6 +467,12 @@ export class Marker extends Evented<MarkerEventType> {
             delete this._map;
         }
         this._element.removeEventListener('click', this._onClick);
+        this._element.removeEventListener('keydown', this._onKeyDown);
+        this._element.removeEventListener('keyup', this._onKeyUp);
+        this._element.removeEventListener('blur', this._onBlur);
+        this._element.removeEventListener('keypress', this._onKeyPress);
+        // Drop any in-flight keyboard drag silently, like a pointer drag interrupted by remove().
+        this._keyboardDragActive = false;
         this._element.remove();
         if (this._popup) this._popup.remove();
         return this;
@@ -520,10 +546,6 @@ export class Marker extends Evented<MarkerEventType> {
             this._popup.remove();
             this._popup = null;
             this._element.removeEventListener('keypress', this._onKeyPress);
-
-            if (!this._originalTabIndex) {
-                this._element.removeAttribute('tabindex');
-            }
         }
 
         if (popup) {
@@ -544,13 +566,10 @@ export class Marker extends Evented<MarkerEventType> {
             }
             this._popup = popup;
 
-            this._originalTabIndex = this._element.getAttribute('tabindex');
-            if (!this._originalTabIndex) {
-                this._element.setAttribute('tabindex', '0');
-            }
             this._element.addEventListener('keypress', this._onKeyPress);
         }
 
+        this._updateTabIndex();
         this._updateAccessibilityRole();
         return this;
     }
@@ -581,6 +600,57 @@ export class Marker extends Evented<MarkerEventType> {
         }
     };
 
+    /**
+     * Move a focused draggable default marker with the arrow keys
+     * (1 screen pixel per keydown; 10 with Shift).
+     * Mirrors the pointer drag gesture: the position updates before `dragstart`
+     * fires on the first movement, every movement fires `drag`, and releasing
+     * the arrow key (or losing focus) fires `dragend`. Holding a key down
+     * produces repeated `drag` events within a single gesture.
+     */
+    _onKeyDown = (e: KeyboardEvent): void => {
+        // Custom marker elements own their keyboard behavior (#7790).
+        if (!this._defaultMarker || !this._draggable || !this._map || !this._lngLat) return;
+        // Leave keys originating from elements nested inside the marker to the application.
+        if (e.composedPath()[0] !== this._element) return;
+        // Leave Alt/Ctrl/Meta shortcuts to the browser and the application.
+        if (e.altKey || e.ctrlKey || e.metaKey) return;
+
+        const delta = ARROW_KEY_DELTAS[e.key];
+        if (!delta) return;
+
+        e.preventDefault();
+        // The marker element lives in the canvas container, so without this the
+        // map's KeyboardHandler would also pan (or rotate/pitch with Shift) the camera.
+        e.stopPropagation();
+
+        const step = e.shiftKey ? KEYBOARD_DRAG_LARGE_STEP : KEYBOARD_DRAG_SMALL_STEP;
+        const pos = this._map.project(this._lngLat);
+        this.setLngLat(this._map.unproject(new Point(pos.x + delta[0] * step, pos.y + delta[1] * step)));
+
+        if (!this._keyboardDragActive) {
+            this._keyboardDragActive = true;
+            this.fire(new MarkerDragEvent('dragstart'));
+        }
+        this.fire(new MarkerDragEvent('drag'));
+    };
+
+    _onKeyUp = (e: KeyboardEvent): void => {
+        if (!ARROW_KEY_DELTAS[e.key]) return;
+        this._endKeyboardDrag();
+    };
+
+    _onBlur = (): void => {
+        this._endKeyboardDrag();
+    };
+
+    _endKeyboardDrag(): void {
+        if (this._keyboardDragActive) {
+            this._keyboardDragActive = false;
+            this.fire(new MarkerDragEvent('dragend'));
+        }
+    }
+
     _onMapClick = (e: MapMouseEvent): void => {
         const targetElement = e.originalEvent.target;
         const element = this._element;
@@ -851,7 +921,10 @@ export class Marker extends Evented<MarkerEventType> {
     };
 
     /**
-     * Sets the `draggable` property and functionality of the marker
+     * Sets the `draggable` property and functionality of the marker.
+     * A draggable default marker is also keyboard focusable and movable with the
+     * arrow keys (see {@link MarkerOptions.draggable}); custom marker elements keep
+     * their focusability and keyboard behavior application-owned.
      * @param shouldBeDraggable - Turns drag functionality on/off
      */
     setDraggable(shouldBeDraggable?: boolean): this {
@@ -870,6 +943,20 @@ export class Marker extends Evented<MarkerEventType> {
             }
         }
 
+        if (this._defaultMarker) {
+            if (this._draggable) {
+                this._element.addEventListener('keydown', this._onKeyDown);
+                this._element.addEventListener('keyup', this._onKeyUp);
+                this._element.addEventListener('blur', this._onBlur);
+            } else {
+                this._element.removeEventListener('keydown', this._onKeyDown);
+                this._element.removeEventListener('keyup', this._onKeyUp);
+                this._element.removeEventListener('blur', this._onBlur);
+                this._endKeyboardDrag();
+            }
+        }
+
+        this._updateTabIndex();
         this._updateAccessibilityRole();
         return this;
     }
@@ -882,6 +969,29 @@ export class Marker extends Evented<MarkerEventType> {
         return this._draggable;
     }
 
+    /**
+     * Keep the marker element focusable while it has built-in keyboard behavior.
+     * A popup makes any marker element interactive; dragging only manages
+     * focusability for the default marker so custom elements stay
+     * application-owned (#7790). A tabindex supplied by the application is
+     * never added, changed, or removed here.
+     */
+    _updateTabIndex(): void {
+        const needsTabIndex = !!this._popup || (this._defaultMarker && this._draggable);
+        if (needsTabIndex) {
+            if (!this._element.hasAttribute('tabindex')) {
+                this._element.setAttribute('tabindex', '0');
+                this._tabIndexManaged = true;
+            }
+        } else if (this._tabIndexManaged) {
+            // Only remove the value we set; the application may have overridden it since.
+            if (this._element.getAttribute('tabindex') === '0') {
+                this._element.removeAttribute('tabindex');
+            }
+            this._tabIndexManaged = false;
+        }
+    }
+
     /**
      * Keep the default marker role aligned with interactivity.
      * Default markers need a role because `aria-label` is set in {@link Marker.addTo}.

package/src/util/image_request.ts

@@ -1,9 +1,11 @@
 import {type RequestParameters, makeRequest, sameOrigin, type GetResourceResponse} from './ajax.ts';
 import {arrayBufferToImageBitmap, arrayBufferToImage, ensureError, extend, isWorker, isImageBitmap} from './util.ts';
 import {config} from './config.ts';
-import {AbortError} from './abort_error.ts';
+import {AbortError, throwIfAborted} from './abort_error.ts';
 import {getProtocol} from '../source/protocol_crud.ts';
 
+import type {RequestManager, ResourceType} from './request_manager.ts';
+
 type ImageQueueThrottleControlCallback = () => boolean;
 
 export type ImageRequestQueueItem  = {
@@ -97,11 +99,39 @@ export namespace ImageRequest {
         return false;
     };
 
+    /**
+     * Transform `url` through {@link RequestManager.transformRequest} and load the image.
+     * The transform may be async; if `abortController` aborts while it is pending, the
+     * request is never issued and the returned promise rejects with an `AbortError`.
+     * @param requestManager - The request manager whose transform to apply.
+     * @param url - The image URL, before transformation.
+     * @param resourceType - The resource type to pass to the transform.
+     * @param abortController - allows to abort the request.
+     * @param supportImageRefresh - `true`, if the image request need to support refresh based on cache headers.
+     * @param imageBitmapOptions - Options for `createImageBitmap`. Pass `{colorSpaceConversion: 'none'}` for images
+     * whose pixels hold data rather than color, such as raster-DEM tiles, so the browser does not color manage them.
+     * @returns - A promise resolved when the image is loaded.
+     */
+    export async function transformAndGetImage(
+        requestManager: RequestManager,
+        url: string,
+        resourceType: ResourceType,
+        abortController: AbortController,
+        supportImageRefresh: boolean = true,
+        imageBitmapOptions?: ImageBitmapOptions
+    ): Promise<GetResourceResponse<HTMLImageElement | ImageBitmap | null>> {
+        const requestParameters = await requestManager.transformRequest(url, resourceType);
+        throwIfAborted(abortController.signal);
+        return ImageRequest.getImage(requestParameters, abortController, supportImageRefresh, imageBitmapOptions);
+    }
+
     /**
      * Request to load an image.
      * @param requestParameters - Request parameters.
      * @param abortController - allows to abort the request.
      * @param supportImageRefresh - `true`, if the image request need to support refresh based on cache headers.
+     * @param imageBitmapOptions - Options for `createImageBitmap`. Pass `{colorSpaceConversion: 'none'}` for images
+     * whose pixels hold data rather than color, such as raster-DEM tiles, so the browser does not color manage them.
      * @returns - A promise resolved when the image is loaded.
      */
     export const getImage = (

package/src/webgl/draw/draw_background.ts

@@ -39,7 +39,7 @@ export function drawBackground(painter: Painter, tileManager: TileManager, layer
 
     if (image) {
         context.activeTexture.set(gl.TEXTURE0);
-        painter.imageManager.bind(painter.context);
+        painter.patternAtlas.bind(painter.context);
     }
 
     const crossfade = layer.getCrossfadeParameters();

package/src/webgl/program/pattern.ts

@@ -71,9 +71,9 @@ function bgPatternUniformValues(
         tileSize: number;
     }
 ): UniformValues<BackgroundPatternUniformsType> {
-    const imagePosA = painter.imageManager.getPattern(image.from.toString());
-    const imagePosB = painter.imageManager.getPattern(image.to.toString());
-    const {width, height} = painter.imageManager.getPixelSize();
+    const imagePosA = painter.patternAtlas.getPattern(image.from.toString());
+    const imagePosB = painter.patternAtlas.getPattern(image.to.toString());
+    const {width, height} = painter.patternAtlas.getPixelSize();
 
     const numTiles = Math.pow(2, tile.tileID.overscaledZ);
     const tileSizeAtNearestZoom = tile.tileSize * Math.pow(2, painter.transform.tileZoom) / numTiles;