maplibre-gl 6.6.0 → 6.7.0

package/dist/maplibre-gl-dev.mjs

@@ -1,10 +1,10 @@
 /**
 * MapLibre GL JS
-* @license 3-Clause BSD. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v6.6.0/LICENSE.txt
+* @license 3-Clause BSD. Full text of license: https://github.com/maplibre/maplibre-gl-js/blob/v6.7.0/LICENSE.txt
 */
-import { $ as projectToWorldCoordinates, $n as createVec4f64, $r as slerp, $t as Properties, A as evaluateSizeForFeature, Ai as perspective, An as getReferrer, Ar as readImageUsingVideoFrame, At as polygonIntersectsPolygon, Bi as invert, Bn as throwIfAborted, Br as warnOnce, Bt as UniformMatrix4f, C as isCustomStyleLayer, Ci as create$1, Cn as ErrorEvent, Cr as mod, Ct as isHillshadeStyleLayer, D as SymbolBucket, Di as invert$1, Dn as GLOBAL_DISPATCHER_ID, Dr as pointPlaneSignedDistance, Dt as AlphaImage, E as isSymbolStyleLayer, Ei as identity, En as AJAXError, Er as pick, Et as renderColorRamp, F as ImagePosition, Fi as translate, Fn as getProtocol, Fr as sphericalToCartesian, Ft as Uniform3f, G as isFillExtrusionStyleLayer, Gn as arrayBufferToImageBitmap, Gr as create$3, Gt as Pos3dArray, H as isLineStyleLayer, Hi as isOffscreenCanvasDistorted, Hn as MAX_VALID_LATITUDE, Hr as zoomScale, Ht as CollisionBoxArray, I as potpack, Ii as create$4, In as removeProtocol, Ir as subscribe, It as Uniform4f, J as cameraDirectionFromPitchBearing, Jn as clone$2, Jr as sqrLen, Jt as RasterBoundsArray, Kn as bezier, Kr as length, Kt as PosArray, L as isStyleImageWebGLData, Li as fromRotation, Ln as config, Lr as threePlaneIntersection, Lt as UniformColor, Mi as rotateY$1, Mn as makeRequest, Mr as rollPitchBearingEqual, Mt as Uniform1f, N as getAnchorAlignment, Ni as rotateZ, Nn as sameOrigin, Nr as rollPitchBearingToQuat, Nt as Uniform1i, O as addDynamicAttributes, Oi as multiply, On as getArrayBuffer, Or as radiansToDegrees, Ot as RGBAImage, Pi as scale, Pn as addProtocol, Pr as scaleZoom, Pt as Uniform2f, Q as maxMercatorHorizonAngle, Qn as createVec3f64, Qr as multiply$1, Qt as DataConstantProperty, R as renderStyleImage, Ri as create$2, Rn as AbortError, Rr as translatePosition, Rt as UniformColorArray, S as createStyleLayer, Si as copy, Sn as latest, Sr as mapObject, St as Texture, T as isBackgroundStyleLayer, Ti as fromScaling, Tn as Evented, Tr as parseCacheControl, Tt as isHeatmapStyleLayer, Ui as offscreenCanvasSupported, Un as angleToRotateBetweenVectors2D, Ur as pixelsToTileUnits, Ut as CollisionCircleLayoutArray, V as collisionCircleLayout, Vi as rotate, Vr as wrap, Vt as SegmentVector, Wi as Point, Wn as arrayBufferToImage, Wr as EXTENT, Wt as LineStripIndexArray, X as cameraMercatorCoordinateFromCenterAndRotation, Xn as createIdentityMat4f64, Xr as fromEuler, Xt as createLayout, Y as cameraMercatorCoordinate, Yn as createIdentityMat4f32, Yr as zero, Yt as TriangleIndexArray, Z as getMercatorHorizon, Zn as createMat4f64, Zr as fromValues, Zt as isRasterStyleLayer, _ as UnwrappedTileID, _i as transformMat3, _n as diff, _r as isSafari, _t as SOUTH_POLE_Y, a as clipLine, ai as cross, an as ZoomHistory, ar as ensureError, at as lngFromMercatorX, b as isInBoundsForZoomLngLat, bi as zero$1, br as isWorker, bt as isColorReliefStyleLayer, ci as length$1, cn as emitValidationErrors, cr as filterObject, ct as mercatorZfromAltitude, di as rotateX$1, dn as validateStyleAndEmit, dr as getAngleDelta, ei as mul, en as TRANSITION_SUFFIX, er as deepEqual, et as tileCoordinatesToMercatorCoordinates, f as GEOJSON_TILE_LAYER_NAME, fi as rotateY, fn as Color, fr as getEdgeTiles, ft as EXTENT_BOUNDS, g as OverscaledTileID, gi as sub, gn as derefLayers, gr as isPointableEvent, gt as NORTH_POLE_Y, h as CanonicalTileID, hi as scaleAndAdd, hr as isImageBitmap, ii as clone, in as codePointUsesLocalIdeographFontFamily, ir as distanceOfAnglesRadians, it as latFromMercatorY, j as evaluateSizeForZoom, ji as rotateX, jn as getVideo, jr as remapSaturate, jt as toEvaluationFeature, k as getOverlapMode, ki as ortho, kn as getJSON, kr as rayPlaneIntersection, kt as isCircleStyleLayer, li as negate, ln as validateAndEmit, lr as findLineIntersection, lt as LngLat, mi as scale$2, mn as ValidationError, mr as getRollPitchBearing, mt as isFillStyleLayer, ni as transformMat4, nn as EvaluationParameters, nr as degreesToRadians, nt as MercatorCoordinate, oi as dot, or as evaluateZoomSnap, ot as mercatorXfromLng, pi as rotateZ$1, pn as ProjectionDefinition, pt as Bounds, q as calculateTileMatrix, qn as clamp, qr as scale$1, qt as QuadTriangleArray, r as TextAnchorEnum, ri as add, rr as differenceOfAnglesDegrees, rt as altitudeFromMercatorZ, s as TileCache, si as len, sn as SPEC_SOURCE_TYPES, sr as extend, st as mercatorYfromLat, t as getAnchorJustification, ti as scale$3, tn as Transitionable, tr as defaultEasing, tt as unprojectFromWorldCoordinates, u as GeoJSONFeature, ui as normalize, un as validateStyle, ur as getAABB, ut as earthRadius, v as calculateTileKey, vi as transformMat4$1, vn as emptyStyle, vr as isTouchableEvent, vt as SubdivisionGranularityExpression, w as validateCustomStyleLayer, wi as equals, wn as Event, wr as nextPowerOfTwo, wt as HEATMAP_FULL_RENDER_FBO_KEY, x as Actor, xi as clone$1, xn as interpolateFactory, xr as lerp, y as compareTileId, yi as transformQuat, yn as featureFilter, yr as isTouchableOrPointableType, yt as SubdivisionGranularitySetting, z as parseGlyphPbf, zi as determinant, zn as isAbortError, zr as uniqueId, zt as UniformFloatArray } from "./maplibre-gl-shared-dev.mjs";
+import { $ as maxMercatorHorizonAngle, $n as createVec3f64, $r as multiply$1, $t as DataConstantProperty, A as evaluateSizeForFeature, Ai as multiply, An as getJSON, Ar as rayPlaneIntersection, At as isCircleStyleLayer, Bi as create$2, Bn as isAbortError, Br as uniqueId, Bt as UniformFloatArray, C as isCustomStyleLayer, Ci as copy, Cn as latest, Cr as mapObject, Ct as Texture, D as SymbolBucket, Di as fromScaling, Dn as AJAXError, Dr as pick, Dt as renderColorRamp, E as isSymbolStyleLayer, Ei as exactEquals, En as Evented, Er as parseCacheControl, Et as isHeatmapStyleLayer, F as ImagePosition, Fi as rotateZ, Fn as addProtocol, Fr as scaleZoom, Ft as Uniform2f, Gi as offscreenCanvasSupported, Gn as arrayBufferToImage, Gr as EXTENT, Gt as LineStripIndexArray, H as collisionCircleLayout, Hi as invert, Hr as wrap, Ht as SegmentVector, I as potpack, Ii as scale, In as getProtocol, Ir as sphericalToCartesian, It as Uniform3f, J as calculateTileMatrix, Jn as clamp, Jr as scale$1, Jt as QuadTriangleArray, K as isFillExtrusionStyleLayer, Ki as Point, Kn as arrayBufferToImageBitmap, Kr as create$3, Kt as Pos3dArray, L as isStyleImageWebGLData, Li as translate, Ln as removeProtocol, Lr as subscribe, Lt as Uniform4f, Mi as perspective, Mn as getVideo, Mr as remapSaturate, Mt as toEvaluationFeature, N as getAnchorAlignment, Ni as rotateX, Nn as makeRequest, Nr as rollPitchBearingEqual, Nt as Uniform1f, O as addDynamicAttributes, Oi as identity, On as GLOBAL_DISPATCHER_ID, Or as pointPlaneSignedDistance, Ot as AlphaImage, Pi as rotateY$1, Pn as sameOrigin, Pr as rollPitchBearingToQuat, Pt as Uniform1i, Q as getMercatorHorizon, Qn as createMat4f64, Qr as fromValues, Qt as isRasterStyleLayer, R as renderStyleImage, Ri as create$4, Rn as config, Rr as threePlaneIntersection, Rt as UniformColor, S as createStyleLayer, Si as clone$1, Sn as derefLayers, Sr as lerp, T as isBackgroundStyleLayer, Ti as equals, Tn as Event, Tr as nextPowerOfTwo, Tt as HEATMAP_FULL_RENDER_FBO_KEY, U as isLineStyleLayer, Ui as rotate, Un as MAX_VALID_LATITUDE, Ur as zoomScale, Ut as CollisionBoxArray, V as isCluster, Vi as determinant, Vn as throwIfAborted, Vr as warnOnce, Vt as UniformMatrix4f, Wi as isOffscreenCanvasDistorted, Wn as angleToRotateBetweenVectors2D, Wr as pixelsToTileUnits, Wt as CollisionCircleLayoutArray, X as cameraMercatorCoordinate, Xn as createIdentityMat4f32, Xr as zero, Xt as TriangleIndexArray, Y as cameraDirectionFromPitchBearing, Yn as clone$2, Yr as sqrLen, Yt as RasterBoundsArray, Z as cameraMercatorCoordinateFromCenterAndRotation, Zn as createIdentityMat4f64, Zr as fromEuler, Zt as createLayout, _ as UnwrappedTileID, _i as sub, _n as interpolateFactory, _r as isPointableEvent, _t as NORTH_POLE_Y, a as clipLine, ai as clone, an as codePointUsesLocalIdeographFontFamily, ar as distanceOfAnglesRadians, at as latFromMercatorY, b as isInBoundsForZoomLngLat, bi as transformQuat, bn as ValidationError, br as isTouchableOrPointableType, bt as SubdivisionGranularitySetting, ci as len, cn as SPEC_SOURCE_TYPES, cr as extend, ct as mercatorYfromLat, di as normalize, dn as validateStyle, dr as getAABB, dt as earthRadius, ei as slerp, en as Properties, er as createVec4f64, et as projectToWorldCoordinates, f as GEOJSON_TILE_LAYER_NAME, fi as rotateX$1, fn as validateStyleAndEmit, fr as getAngleDelta, g as OverscaledTileID, gi as scaleAndAdd, gr as isImageBitmap, h as CanonicalTileID, hi as scale$2, hn as featureFilter, hr as getRollPitchBearing, ht as isFillStyleLayer, ii as add, ir as differenceOfAnglesDegrees, it as altitudeFromMercatorZ, j as evaluateSizeForZoom, ji as ortho, jn as getReferrer, jr as readImageUsingVideoFrame, jt as polygonIntersectsPolygon, k as getOverlapMode, ki as invert$1, kn as getArrayBuffer, kr as radiansToDegrees, kt as RGBAImage, li as length$1, ln as emitValidationErrors, lr as filterObject, lt as mercatorZfromAltitude, mi as rotateZ$1, mt as Bounds, ni as scale$3, nn as Transitionable, nr as defaultEasing, nt as unprojectFromWorldCoordinates, oi as cross, on as ZoomHistory, or as ensureError, ot as lngFromMercatorX, pi as rotateY, pn as emptyStyle, pr as getEdgeTiles, pt as EXTENT_BOUNDS, qn as bezier, qr as length, qt as PosArray, r as TextAnchorEnum, ri as transformMat4, rn as EvaluationParameters, rr as degreesToRadians, rt as MercatorCoordinate, s as TileCache, si as dot, sr as evaluateZoomSnap, st as mercatorXfromLng, t as getAnchorJustification, ti as mul, tn as TRANSITION_SUFFIX, tr as deepEqual, tt as tileCoordinatesToMercatorCoordinates, u as GeoJSONFeature, ui as negate, un as validateAndEmit, ur as findLineIntersection, ut as LngLat, v as calculateTileKey, vi as transformMat3, vn as ProjectionDefinition, vr as isSafari, vt as SOUTH_POLE_Y, w as validateCustomStyleLayer, wi as create$1, wn as ErrorEvent, wr as mod, wt as isHillshadeStyleLayer, x as Actor, xi as zero$1, xn as diff, xr as isWorker, xt as isColorReliefStyleLayer, y as compareTileId, yi as transformMat4$1, yn as Color, yr as isTouchableEvent, yt as SubdivisionGranularityExpression, z as parseGlyphPbf, zi as fromRotation, zn as AbortError, zr as translatePosition, zt as UniformColorArray } from "./maplibre-gl-shared-dev.mjs";
 //#region package.json
-var version$2 = "6.6.0";
+var version$2 = "6.7.0";
 //#endregion
 //#region src/util/browser.ts
 let linkEl;
@@ -1165,17 +1165,183 @@ var PatternAtlas = class {
 	}
 };
 //#endregion
-//#region src/style/load_glyph_range.ts
-async function loadGlyphRange(fontstack, range, urlTemplate, requestManager) {
-	const begin = range * 256;
-	const end = begin + 255;
-	const request = await requestManager.transformRequest(urlTemplate.replace("{fontstack}", fontstack).replace("{range}", `${begin}-${end}`), "Glyphs");
-	const response = await getArrayBuffer(request, new AbortController());
-	if (!response?.data) throw new Error(`Could not load glyph range. range: ${range}, ${begin}-${end}`);
-	const glyphs = {};
-	for (const glyph of parseGlyphPbf(response.data)) glyphs[glyph.id] = glyph;
-	return glyphs;
+//#region src/render/font_face_manager.ts
+const MAX_CODE_POINT = 1114111;
+/**
+* What a font file covers when the style does not narrow it down with `unicode-range`.
+*/
+const DEFAULT_UNICODE_RANGE = {
+	start: 0,
+	end: MAX_CODE_POINT
+};
+/**
+* Makes the family names unique across every map on the page, since `document.fonts` is shared.
+*/
+let nextFamilyId = 0;
+/**
+* Parses one `unicode-range` entry, in the CSS grammar the style specification borrows: `U+A5`,
+* `U+0-10FFFF` or `U+4??`.
+* @param value - a single `unicode-range` entry
+* @returns the codepoints it covers, or `null` if it is not a range this can make sense of
+*/
+function parseUnicodeRange(value) {
+	const wildcard = /^u\+([0-9a-f]*)(\?+)$/i.exec(value);
+	if (wildcard) {
+		const [, prefix, questionMarks] = wildcard;
+		if (prefix.length + questionMarks.length > 6) return null;
+		return clampRange(parseInt(`${prefix}${"0".repeat(questionMarks.length)}`, 16), parseInt(`${prefix}${"f".repeat(questionMarks.length)}`, 16));
+	}
+	const explicit = /^u\+([0-9a-f]{1,6})(?:-([0-9a-f]{1,6}))?$/i.exec(value);
+	if (!explicit) return null;
+	const start = parseInt(explicit[1], 16);
+	return clampRange(start, explicit[2] === void 0 ? start : parseInt(explicit[2], 16));
+}
+function clampRange(start, end) {
+	if (start > end || start > MAX_CODE_POINT) return null;
+	return {
+		start,
+		end: Math.min(end, MAX_CODE_POINT)
+	};
+}
+/**
+* Whether the style lets this file cover the given codepoint.
+*/
+function covers(face, codePoint) {
+	return face.ranges.some(({ start, end }) => codePoint >= start && codePoint <= end);
 }
+/**
+* Keeps the font files a style declares in its
+* [`font-faces`](https://maplibre.org/maplibre-style-spec/root/#font-faces) property, and hands the
+* {@link GlyphManager} the CSS family to draw a given codepoint with.
+*
+* The files go to the browser's CSS Font Loading API, so any format it can render text with works.
+* Each is registered under a family name of our own making, so that a style cannot restyle the
+* surrounding page and a codepoint can be pinned to one file rather than to whatever font matching
+* picks.
+*
+* Rasterizing happens a grapheme cluster at a time, so a letter reaches the browser's text engine
+* with its marks. Shaping across cluster boundaries still needs the RTL text plugin.
+*/
+var FontFaceManager = class {
+	constructor(requestManager) {
+		this.requestManager = requestManager;
+		this._faces = {};
+		this._registered = /* @__PURE__ */ new Set();
+	}
+	/**
+	* Replaces the declared font faces. Nothing is downloaded here: each file waits until a
+	* codepoint it covers is actually drawn.
+	*/
+	setFontFaces(fontFaces) {
+		this._unregisterAll();
+		this._faces = {};
+		for (const [fontName, declaration] of Object.entries(fontFaces ?? {})) {
+			const declarations = Array.isArray(declaration) ? declaration : [declaration];
+			this._faces[fontName] = declarations.map((entry) => this._declareFontFace(fontName, entry)).filter((face) => face !== null);
+		}
+	}
+	/**
+	* Whether the style declared any font face at all, so that the common case of a style without
+	* `font-faces` costs nothing.
+	*/
+	hasFontFaces() {
+		return Object.keys(this._faces).length > 0;
+	}
+	/**
+	* Finds the font file to draw a codepoint with: each name of the `text-font` stack in turn, and
+	* within a name each declared file, until one covers it. A file that fails to load is skipped,
+	* the specification asking for unsupported fonts to be ignored.
+	*
+	* @returns the CSS family to draw with, or `null` to leave the codepoint to the `glyphs` URL
+	*/
+	async getFontFamily(fontStack, codePoint) {
+		for (const fontName of fontStack.split(",")) for (const face of this._faces[fontName.trim()] ?? []) {
+			if (!covers(face, codePoint)) continue;
+			face.loaded ??= this._loadFontFace(face);
+			if (await face.loaded) return face.family;
+		}
+		return null;
+	}
+	/**
+	* Turns one declaration into a face to draw with, or `null` if there is nothing usable in it.
+	*
+	* A bare URL is the same as a face that names no `unicode-range`: it covers every codepoint.
+	*/
+	_declareFontFace(fontName, declaration) {
+		const face = typeof declaration === "string" ? { url: declaration } : declaration;
+		if (typeof face?.url !== "string") {
+			warnOnce(`Ignoring the font face declared for "${fontName}": it has no URL.`);
+			return null;
+		}
+		const family = `maplibre-gl-font-face-${nextFamilyId++}`;
+		const unicodeRange = face["unicode-range"];
+		if (!unicodeRange?.length) return {
+			url: face.url,
+			ranges: [DEFAULT_UNICODE_RANGE],
+			family
+		};
+		const ranges = [];
+		for (const entry of unicodeRange) {
+			const range = parseUnicodeRange(entry);
+			if (!range) {
+				warnOnce(`Ignoring the unicode range "${entry}" of the font face at ${face.url}: it is not a valid range.`);
+				continue;
+			}
+			ranges.push(range);
+		}
+		if (!ranges.length) return null;
+		return {
+			url: face.url,
+			ranges,
+			family
+		};
+	}
+	/**
+	* Downloads a declared file and hands it to the browser, reporting whether it can be drawn with.
+	* A failure is not an error: its codepoints fall through to the next file, then to `glyphs`.
+	*/
+	async _loadFontFace(face) {
+		if (typeof FontFace === "undefined" || typeof document === "undefined" || !document.fonts) {
+			warnOnce(`Ignoring the font face at ${face.url}: this environment has no CSS Font Loading API.`);
+			return false;
+		}
+		let fontFace;
+		try {
+			fontFace = new FontFace(face.family, await this._downloadFontFile(face.url));
+			if (!Object.values(this._faces).some((faces) => faces.includes(face))) return false;
+			document.fonts.add(fontFace);
+			this._registered.add(fontFace);
+			await fontFace.load();
+			return true;
+		} catch (e) {
+			if (fontFace) this._unregister(fontFace);
+			warnOnce(`Ignoring the font face at ${face.url}: ${ensureError(e).message}`);
+			return false;
+		}
+	}
+	/**
+	* Downloads a font file, giving the map's `transformRequest` a chance to rewrite the request the
+	* same way it gets one for a glyph range.
+	*/
+	async _downloadFontFile(url) {
+		const request = await this.requestManager.transformRequest(url, "Glyphs");
+		const response = await getArrayBuffer(request, new AbortController());
+		if (!response?.data) throw new Error(`the response was empty for the font file at ${url}`);
+		return response.data;
+	}
+	_unregister(fontFace) {
+		document.fonts?.delete(fontFace);
+		this._registered.delete(fontFace);
+	}
+	_unregisterAll() {
+		for (const fontFace of this._registered) document.fonts?.delete(fontFace);
+		this._registered.clear();
+	}
+	destroy() {
+		this._unregisterAll();
+		this._faces = {};
+	}
+};
 //#endregion
 //#region node_modules/@mapbox/tiny-sdf/index.js
 const INF = 0x56bc75e2d63100000;
@@ -1305,22 +1471,38 @@ const defaultGenericFontFamily = "sans-serif";
 * Client-generated glyphs are rendered at 2× because CJK glyphs are more detailed than others.
 */
 const textureScale = 2;
-var GlyphManager = class GlyphManager {
-	static {
-		this.loadGlyphRange = loadGlyphRange;
-	}
-	static {
-		this.TinySDF = TinySDF;
-	}
-	constructor(requestManager, localIdeographFontFamily, lang) {
+const defaultCreateRasterizer = (options, padding) => {
+	const tinySDF = new TinySDF(options);
+	tinySDF.buffer = padding;
+	return tinySDF;
+};
+/**
+* How wide a grapheme cluster may be drawn, in multiples of the font size.
+*
+* TinySDF sizes its canvas for a single character and cuts off the rest, but a cluster is a whole
+* syllable: Burmese `လား` is nearly twice the font size. Three ems fits the ones that occur.
+*/
+const clusterEmsWide = 3;
+var GlyphManager = class {
+	constructor(requestManager, localIdeographFontFamily, lang, createRasterizer = defaultCreateRasterizer) {
 		this.requestManager = requestManager;
 		this.localIdeographFontFamily = localIdeographFontFamily;
 		this.entries = {};
 		this.lang = lang;
+		this.fontFaceManager = new FontFaceManager(requestManager);
+		this.createRasterizer = createRasterizer;
 	}
 	setURL(url) {
 		this.url = url;
 	}
+	/**
+	* Replaces the font files the style declares in its `font-faces` property, dropping every glyph
+	* drawn with the previous ones.
+	*/
+	setFontFaces(fontFaces) {
+		this.fontFaceManager.setFontFaces(fontFaces);
+		this.entries = {};
+	}
 	async getGlyphs(glyphs) {
 		const glyphsPromises = [];
 		for (const stack in glyphs) for (const id of glyphs[stack]) glyphsPromises.push(this._getAndCacheGlyphsPromise(stack, id));
@@ -1336,6 +1518,14 @@ var GlyphManager = class GlyphManager {
 		}
 		return result;
 	}
+	/**
+	* Gets one glyph, asked for by grapheme cluster so that a letter and its marks are drawn as the
+	* one shape they are written as.
+	*
+	* Only a file the style pinned with `font-faces` can draw a cluster -- a glyphs URL serves
+	* codepoints -- so where none covers it this returns nothing and layout falls back to codepoints.
+	* For a single codepoint a declared file still wins over the glyphs URL and the local fallbacks.
+	*/
 	async _getAndCacheGlyphsPromise(stack, id) {
 		this.entries[stack] ??= {
 			glyphs: {},
@@ -1349,7 +1539,25 @@ var GlyphManager = class GlyphManager {
 			id,
 			glyph
 		};
-		if (!this.url || this._charUsesLocalIdeographFontFamily(id)) {
+		const codePoint = id.codePointAt(0);
+		const fontFaceFamily = this.fontFaceManager.hasFontFaces() ? await this.fontFaceManager.getFontFamily(stack, codePoint) : null;
+		if (fontFaceFamily) {
+			glyph = entry.glyphs[id] = await this._drawGlyph(entry, stack, id, fontFaceFamily);
+			return {
+				stack,
+				id,
+				glyph
+			};
+		}
+		if (isCluster(id)) {
+			glyph = entry.glyphs[id] = null;
+			return {
+				stack,
+				id,
+				glyph
+			};
+		}
+		if (!this.url || this._charUsesLocalIdeographFontFamily(codePoint)) {
 			glyph = entry.glyphs[id] = await this._drawGlyph(entry, stack, id);
 			return {
 				stack,
@@ -1359,27 +1567,34 @@ var GlyphManager = class GlyphManager {
 		}
 		return await this._downloadAndCacheRangePromise(stack, id);
 	}
+	/**
+	* Gets a glyph from the server-side cache, downloading the PBF range it falls in if need be.
+	*
+	* Only reached for a single codepoint. What comes back is keyed by codepoint, as the file is,
+	* and is cached by cluster -- which for one codepoint is the character itself.
+	*/
 	async _downloadAndCacheRangePromise(stack, id) {
+		const codePoint = id.codePointAt(0);
 		const entry = this.entries[stack];
-		const range = Math.floor(id / 256);
+		const range = Math.floor(codePoint / 256);
 		if (entry.ranges[range]) return {
 			stack,
 			id,
 			glyph: null
 		};
-		entry.requests[range] ||= GlyphManager.loadGlyphRange(stack, range, this.url, this.requestManager);
+		entry.requests[range] ||= this._loadGlyphRange(stack, range);
 		try {
 			const response = await entry.requests[range];
-			for (const id in response) entry.glyphs[+id] = response[+id];
+			for (const responseId in response) entry.glyphs[String.fromCodePoint(+responseId)] = response[+responseId];
 			entry.ranges[range] = true;
 			return {
 				stack,
 				id,
-				glyph: response[id] || null
+				glyph: response[codePoint] || null
 			};
 		} catch (e) {
 			const glyph = entry.glyphs[id] = await this._drawGlyph(entry, stack, id);
-			this._warnOnMissingGlyphRange(glyph, range, id, ensureError(e));
+			this._warnOnMissingGlyphRange(glyph, range, codePoint, ensureError(e));
 			return {
 				stack,
 				id,
@@ -1387,6 +1602,19 @@ var GlyphManager = class GlyphManager {
 			};
 		}
 	}
+	/**
+	* Downloads one range of 256 codepoints from the glyphs URL and parses the glyphs out of it.
+	*/
+	async _loadGlyphRange(fontstack, range) {
+		const begin = range * 256;
+		const end = begin + 255;
+		const request = await this.requestManager.transformRequest(this.url.replace("{fontstack}", fontstack).replace("{range}", `${begin}-${end}`), "Glyphs");
+		const response = await getArrayBuffer(request, new AbortController());
+		if (!response?.data) throw new Error(`Could not load glyph range. range: ${range}, ${begin}-${end}`);
+		const glyphs = {};
+		for (const glyph of parseGlyphPbf(response.data)) glyphs[glyph.id] = glyph;
+		return glyphs;
+	}
 	_warnOnMissingGlyphRange(glyph, range, id, err) {
 		const begin = range * 256;
 		const end = begin + 255;
@@ -1400,13 +1628,13 @@ var GlyphManager = class GlyphManager {
 		return !!this.localIdeographFontFamily && codePointUsesLocalIdeographFontFamily(id);
 	}
 	/**
-	* Draws a glyph offscreen using TinySDF, creating a TinySDF instance lazily.
+	* Draws a glyph offscreen using TinySDF, created lazily. The whole cluster goes to TinySDF, which
+	* is what lets the browser's text engine place a letter's marks on it.
+	*
+	* @param fontFaceFamily - the CSS family of the `font-faces` file covering this codepoint, if any
 	*/
-	async _drawGlyph(entry, stack, id) {
-		const usesLocalIdeographFontFamily = stack === defaultStack && this.localIdeographFontFamily !== "" && this._charUsesLocalIdeographFontFamily(id);
-		const tinySDFKey = usesLocalIdeographFontFamily ? "ideographTinySDF" : "tinySDF";
-		entry[tinySDFKey] ||= this._createTinySDF(usesLocalIdeographFontFamily ? this.localIdeographFontFamily : stack);
-		const char = (await entry[tinySDFKey]).draw(String.fromCodePoint(id));
+	async _drawGlyph(entry, stack, id, fontFaceFamily) {
+		const char = (await this._getTinySDF(entry, stack, id, fontFaceFamily)).draw(id);
 		/**
 		* TinySDF's "top" is the distance from the alphabetic baseline to the top of the glyph.
 		* Server-generated fonts specify "top" relative to an origin above the em box (the origin
@@ -1422,9 +1650,9 @@ var GlyphManager = class GlyphManager {
 		*/
 		const topAdjustment = 27.5;
 		const leftAdjustment = .5;
-		const isControl = /^\p{gc=Cf}+$/u.test(String.fromCodePoint(id));
+		const isControl = /^\p{gc=Cf}+$/u.test(id);
 		return {
-			id,
+			id: id.codePointAt(0),
 			bitmap: new AlphaImage({
 				width: char.width || 60,
 				height: char.height || 60
@@ -1439,28 +1667,59 @@ var GlyphManager = class GlyphManager {
 			}
 		};
 	}
-	async _createTinySDF(stack) {
+	/**
+	* Returns the TinySDF that draws this grapheme, created lazily. A stack keeps one per font
+	* selection, so a fallback cannot bleed into the rest of the text, and one more per font file
+	* for the clusters drawn from it, which need a wider canvas.
+	*
+	* A font file carries its own weight and style, so neither is sniffed out of the family name.
+	* Where no file covers the grapheme, `localIdeographFontFamily` beats the last resort fontstack.
+	*/
+	_getTinySDF(entry, stack, id, fontFaceFamily) {
+		if (fontFaceFamily) {
+			const cluster = isCluster(id);
+			const cache = cluster ? "clusterTinySDFs" : "fontFaceTinySDFs";
+			entry[cache] ??= {};
+			entry[cache][fontFaceFamily] ||= this._createTinySDF(fontFaceFamily, false, cluster ? clusterEmsWide : 1);
+			return entry[cache][fontFaceFamily];
+		}
+		const usesLocalIdeographFontFamily = stack === defaultStack && this.localIdeographFontFamily !== "" && this._charUsesLocalIdeographFontFamily(id.codePointAt(0));
+		const cache = usesLocalIdeographFontFamily ? "ideographTinySDF" : "tinySDF";
+		entry[cache] ||= this._createTinySDF(usesLocalIdeographFontFamily ? this.localIdeographFontFamily : stack);
+		return entry[cache];
+	}
+	/**
+	* Builds the TinySDF that draws with a given font selection.
+	*
+	* TinySDF derives its canvas from `fontSize + buffer * 4`, so the buffer is the only way in to a
+	* wider one. It also stands for the padding the atlas expects to be `GLYPH_PBF_BORDER`, so the
+	* two are passed separately.
+	*
+	* @param emsWide - how wide the glyphs may be, in font sizes, before TinySDF cuts them off
+	*/
+	async _createTinySDF(stack, sniffFontStyles = true, emsWide = 1) {
 		const fontFamilies = stack ? stack.split(",") : [];
 		fontFamilies.push(defaultGenericFontFamily);
 		const fontFamily = fontFamilies.map((fontName) => /[-\w]+/.test(fontName) ? fontName : `'${CSS.escape(fontName)}'`).join(",");
 		const fontSize = 48;
-		const fontWeight = this._fontWeight(fontFamilies[0]);
-		const fontStyle = this._fontStyle(fontFamilies[0]);
+		const fontWeight = sniffFontStyles ? this._fontWeight(fontFamilies[0]) : void 0;
+		const fontStyle = sniffFontStyles ? this._fontStyle(fontFamilies[0]) : "normal";
 		if (typeof document !== "undefined" && document.fonts?.load) try {
 			await document.fonts.load(`${fontStyle} ${fontWeight || "normal"} ${fontSize}px ${fontFamily}`);
 		} catch (e) {
 			warnOnce(`Failed to load font "${fontFamily}": ${ensureError(e).message}`);
 		}
-		return new GlyphManager.TinySDF({
+		const padding = 6;
+		return this.createRasterizer({
 			fontSize,
-			buffer: 6,
+			buffer: Math.max(padding, Math.ceil(fontSize * (emsWide - 1) / 4)),
 			radius: 16,
 			cutoff: .25,
 			fontFamily,
 			fontWeight,
 			fontStyle,
 			lang: this.lang
-		});
+		}, padding);
 	}
 	/**
 	* Sniffs the font style out of a font family name.
@@ -1502,11 +1761,13 @@ var GlyphManager = class GlyphManager {
 			const entry = this.entries[stack];
 			entry.tinySDF = null;
 			entry.ideographTinySDF = null;
+			entry.fontFaceTinySDFs = {};
 			entry.glyphs = {};
 			entry.requests = {};
 			entry.ranges = {};
 		}
 		this.entries = {};
+		this.fontFaceManager.destroy();
 	}
 };
 //#endregion
@@ -4063,6 +4324,18 @@ const BILINEAR_FORESHORTENING = 512;
 * const bitmap = await createImageBitmap(myCanvas);
 * mySource.updateImage({image: bitmap});
 *
+* // create an empty source (no url), then feed it entirely via updateImage
+* map.addSource('empty id', {
+*    type: 'image',
+*    coordinates: [
+*        [-76.54, 39.18],
+*        [-76.52, 39.18],
+*        [-76.52, 39.17],
+*        [-76.54, 39.17]
+*    ]
+* });
+* (map.getSource('empty id') as ImageSource).updateImage({image: bitmap});
+*
 * map.removeSource('some id');  // remove
 * ```
 */
@@ -4089,6 +4362,11 @@ var ImageSource = class extends Evented {
 		this.options = options;
 	}
 	async load(newCoordinates) {
+		if (this.options.url === void 0) {
+			this._loaded = true;
+			this._finishLoading();
+			return;
+		}
 		this._loaded = false;
 		this.fire(new MapSourceDataEvent("dataloading"));
 		this.url = this.options.url;
@@ -4271,11 +4549,12 @@ var ImageSource = class extends Evented {
 		} else tile.state = "errored";
 	}
 	serialize() {
-		return {
+		const spec = {
 			type: "image",
-			url: this.options.url,
 			coordinates: this.coordinates
 		};
+		if (this.options.url !== void 0) spec.url = this.options.url;
+		return spec;
 	}
 	hasTransition() {
 		return false;
@@ -9968,11 +10247,13 @@ var TerrainTileManager = class extends Evented {
 	* Load Terrain Tiles, create internal render-to-texture tiles, free GPU memory.
 	* @param transform - the operation to do
 	* @param terrain - the terrain
+	* @returns true when the set of renderable tiles changed
 	*/
 	update(transform, terrain) {
 		this.tileManager.update(transform, terrain);
 		this._renderableTilesKeys = [];
 		const keys = {};
+		let changed = false;
 		for (const tileID of coveringTiles(transform, {
 			tileSize: this.tileSize,
 			minzoom: this.minzoom,
@@ -9988,12 +10269,15 @@ var TerrainTileManager = class extends Evented {
 				ortho(tileID.terrainRttPosMatrix32f, 0, EXTENT, EXTENT, 0, 0, 1);
 				this._tiles[tileID.key] = new Tile(tileID, this.tileSize);
 				this._lastTilesetChange = now();
+				changed = true;
 			}
 		}
 		for (const key in this._tiles) if (!keys[key]) {
 			this._tiles[key].releaseRTT(this.tileManager.map.painter);
 			delete this._tiles[key];
+			changed = true;
 		}
+		return changed;
 	}
 	/**
 	* Release the RTT objects for `tileID` (and its ancestors/descendants),
@@ -10280,11 +10564,19 @@ var Terrain = class {
 	}
 	/**
 	* Get the elevation for given {@link LngLat} in respect of exaggeration.
-	* This will traverse up the zoom levels to find the first tile with data to return.
+	* Where the location is covered by a rendered tile with loaded DEM data this samples the
+	* rendered surface, so the result agrees with what is drawn; elsewhere it traverses up the
+	* zoom levels to find the first tile with data to return.
 	* @param lnglat - the location
 	* @returns the elevation
 	*/
 	getElevationForLngLat(lnglat, transform) {
+		const index = this.getCoverageIndex();
+		if (index) {
+			const mercator = MercatorCoordinate.fromLngLat(lnglat);
+			const sample = sampleAt(index, this.exaggeration, mercator.x, mercator.y);
+			if (sample.demLoaded) return sample.elevation;
+		}
 		const terrainCoveringTiles = coveringTiles(transform, {
 			maxzoom: this.tileManager.maxzoom,
 			minzoom: this.tileManager.minzoom,
@@ -10591,6 +10883,7 @@ var Terrain = class {
 };
 const NOT_COVERED = {
 	covered: false,
+	demLoaded: false,
 	elevation: 0
 };
 /**
@@ -10612,10 +10905,12 @@ function sampleAt(index, exaggeration, mercatorX, mercatorY) {
 		const sampler = index.samplerPerTile.get(key);
 		if (!sampler) return {
 			covered: true,
+			demLoaded: false,
 			elevation: 0
 		};
 		return {
 			covered: true,
+			demLoaded: true,
 			elevation: sampler(Math.min((scaledX - tileX) * EXTENT, MAX_TILE_COORD), Math.min((scaledY - tileY) * EXTENT, MAX_TILE_COORD), EXTENT) * exaggeration
 		};
 	}
@@ -10960,7 +11255,7 @@ var MercatorTransform = class MercatorTransform {
 	}
 	recalculateZoomAndCenter(terrain) {
 		const center = this.screenPointToLocation(this.centerPoint, terrain);
-		const elevation = terrain ? terrain.getElevationForLngLatZoom(center, this._helper._tileZoom) : 0;
+		const elevation = terrain ? terrain.getElevationForLngLat(center, this) : 0;
 		this._helper.recalculateZoomAndCenter(elevation);
 	}
 	/**
@@ -13301,7 +13596,7 @@ function globeSampleAt(ray, t) {
 	const elevation = Math.abs(lngLat.lat) > 85.051129 ? 0 : sample.elevation;
 	return {
 		sample: {
-			covered: sample.covered,
+			...sample,
 			elevation
 		},
 		radius,
@@ -14181,6 +14476,8 @@ var Style = class extends Evented {
 		this._glyphsDidChange = false;
 		this._updatedPaintProps = {};
 		this._layerOrderChanged = false;
+		this._symbolPlacementTriggered = false;
+		this._placedProjectionTransition = void 0;
 		this.crossTileSymbolIndex = new ((this.crossTileSymbolIndex?.constructor) || Object)();
 		this.pauseablePlacement = void 0;
 		this.placement = void 0;
@@ -14275,6 +14572,7 @@ var Style = class extends Evented {
 		if (nextState.sprite) this._loadSprite(nextState.sprite);
 		else this.imageManager.setLoaded(true);
 		this.glyphManager.setURL(nextState.glyphs);
+		this.glyphManager.setFontFaces(nextState["font-faces"]);
 		this._createLayers();
 		this.light = new Light(this.stylesheet.light ?? {}, this._globalState);
 		this._setProjectionInternal(this.stylesheet.projection?.type || "mercator");
@@ -14538,6 +14836,9 @@ var Style = class extends Evented {
 			case "setGlyphs":
 				operations.push(() => this.setGlyphs.apply(this, op.args));
 				break;
+			case "setFontFaces":
+				operations.push(() => this.setFontFaces.apply(this, op.args));
+				break;
 			case "setSprite":
 				operations.push(() => this.setSprite.apply(this, op.args));
 				break;
@@ -14863,6 +15164,7 @@ var Style = class extends Evented {
 		if (isRasterStyleLayer(layer) && name === "raster-fade-duration") this.tileManagers[layer.source].setRasterFadeDuration(value);
 		this._changed = true;
 		this._updatedPaintProps[layer.id] = true;
+		if (layer.type === "symbol") this.triggerSymbolPlacement();
 		this._serializedLayers = null;
 	}
 	getPaintProperty(layer, name) {
@@ -14961,8 +15263,10 @@ var Style = class extends Evented {
 			pitch: myStyleSheet.pitch,
 			sprite: myStyleSheet.sprite,
 			glyphs: myStyleSheet.glyphs,
+			"font-faces": myStyleSheet["font-faces"],
 			transition: myStyleSheet.transition,
 			projection: myStyleSheet.projection,
+			state: myStyleSheet.state,
 			sources,
 			layers,
 			terrain
@@ -15120,6 +15424,7 @@ var Style = class extends Evented {
 		for (const key in this.tileManagers) this.tileManagers[key].reload();
 	}
 	_validate(validate, key, value, props, options = {}) {
+		if (options.validate === false) return false;
 		return validateAndEmit(this, validate, {
 			key,
 			style: this.serialize(),
@@ -15165,6 +15470,26 @@ var Style = class extends Evented {
 	_generateCollisionBoxes() {
 		for (const id in this.tileManagers) this._reloadSource(id);
 	}
+	/**
+	* Re-places symbols on the next frame.
+	* Placement is skipped while its inputs look unchanged, so call this when something
+	* the map cannot see for itself has moved symbols.
+	*/
+	triggerSymbolPlacement() {
+		this._symbolPlacementTriggered = true;
+	}
+	/**
+	* Whether re-running symbol placement could produce a different result than the last run.
+	* Every camera and viewport parameter placement can observe perturbs the model-view-projection
+	* matrix, so comparing the matrix covers them all. Inputs the matrix cannot see arrive as
+	* {@link triggerSymbolPlacement} calls.
+	*
+	* @internal
+	*/
+	_placementInputsChanged(transform, showCollisionBoxes, crossSourceCollisions) {
+		const lastPlacement = this.pauseablePlacement;
+		return !lastPlacement || this._symbolPlacementTriggered || this._placedProjectionTransition !== this.projection?.transitionState || lastPlacement._showCollisionBoxes !== showCollisionBoxes || lastPlacement.placement.collisionGroups.crossSourceCollisions !== crossSourceCollisions || lastPlacement.placement.transform.renderWorldCopies !== transform.renderWorldCopies || !exactEquals(lastPlacement.placement.transform.modelViewProjectionMatrix, transform.modelViewProjectionMatrix);
+	}
 	_updatePlacement(transform, showCollisionBoxes, fadeDuration, crossSourceCollisions, forceFullPlacement = false) {
 		let symbolBucketsChanged = false;
 		let placementCommitted = false;
@@ -15181,12 +15506,17 @@ var Style = class extends Evented {
 		}
 		this.crossTileSymbolIndex.pruneUnusedLayers(this._order);
 		forceFullPlacement ||= this._layerOrderChanged || fadeDuration === 0;
-		if (forceFullPlacement || !this.pauseablePlacement || this.pauseablePlacement.isDone() && !this.placement.stillRecent(now(), transform.zoom)) {
+		const placementInputsChanged = symbolBucketsChanged || this._placementInputsChanged(transform, showCollisionBoxes, crossSourceCollisions);
+		const placementSettled = this.pauseablePlacement?.isDone() && !this.placement.stillRecent(now(), transform.zoom);
+		if (forceFullPlacement || !this.pauseablePlacement || placementSettled && (placementInputsChanged || this.placement.stale)) {
+			this._symbolPlacementTriggered = false;
+			this._placedProjectionTransition = this.projection?.transitionState;
 			this.pauseablePlacement = new PauseablePlacement(transform, this.map.terrain, this._order, forceFullPlacement, showCollisionBoxes, fadeDuration, crossSourceCollisions, this.placement);
 			this._layerOrderChanged = false;
 		}
-		if (this.pauseablePlacement.isDone()) this.placement.setStale();
-		else {
+		if (this.pauseablePlacement.isDone()) {
+			if (placementInputsChanged) this.placement.setStale();
+		} else {
 			this.pauseablePlacement.continuePlacement(this._order, this._layers, layerTiles);
 			if (this.pauseablePlacement.isDone()) {
 				this.placement = this.pauseablePlacement.commit(now());
@@ -15223,11 +15553,22 @@ var Style = class extends Evented {
 	setGlyphs(glyphsUrl, options = {}) {
 		this._checkLoaded();
 		if (glyphsUrl && this._validate(validateStyle.glyphs, "glyphs", glyphsUrl, null, options)) return;
+		this._changed = true;
 		this._glyphsDidChange = true;
 		this.stylesheet.glyphs = glyphsUrl;
 		this.glyphManager.entries = {};
 		this.glyphManager.setURL(glyphsUrl);
 	}
+	getFontFaces() {
+		return this.stylesheet["font-faces"] || null;
+	}
+	setFontFaces(fontFaces) {
+		this._checkLoaded();
+		this._changed = true;
+		this._glyphsDidChange = true;
+		this.stylesheet["font-faces"] = fontFaces;
+		this.glyphManager.setFontFaces(fontFaces);
+	}
 	async getDashes(mapId, params) {
 		const result = {};
 		for (const [key, dash] of Object.entries(params.dashes)) result[key] = this.lineAtlas.getDash(dash.dasharray, dash.round);
@@ -17271,7 +17612,7 @@ function drawSymbols(painter, tileManager, layer, coords, variableOffsets, rende
 	const stencilMode = StencilMode.disabled;
 	const colorMode = painter.colorModeForRenderPass();
 	if (layer._unevaluatedLayout.hasValue("text-variable-anchor") || layer._unevaluatedLayout.hasValue("text-variable-anchor-offset")) updateVariableAnchors(coords, painter, layer, tileManager, layer.layout.get("text-rotation-alignment"), layer.layout.get("text-pitch-alignment"), layer.paint.get("text-translate"), layer.paint.get("text-translate-anchor"), variableOffsets);
-	if (layer.paint.get("icon-opacity").constantOr(1) !== 0) drawLayerSymbols(painter, tileManager, layer, coords, false, layer.paint.get("icon-translate"), layer.paint.get("icon-translate-anchor"), layer.layout.get("icon-rotation-alignment"), layer.layout.get("icon-pitch-alignment"), layer.layout.get("icon-keep-upright"), stencilMode, colorMode, isRenderingToTexture);
+	if (layer.paint.get("icon-opacity").constantOr(1) !== 0) drawLayerSymbols(painter, tileManager, layer, coords, false, layer.paint.get("icon-translate"), layer.paint.get("icon-translate-anchor"), layer.layout.get("icon-rotation-alignment").constantOr("viewport"), layer.layout.get("icon-pitch-alignment"), layer.layout.get("icon-keep-upright"), stencilMode, colorMode, isRenderingToTexture);
 	if (layer.paint.get("text-opacity").constantOr(1) !== 0) drawLayerSymbols(painter, tileManager, layer, coords, true, layer.paint.get("text-translate"), layer.paint.get("text-translate-anchor"), layer.layout.get("text-rotation-alignment"), layer.layout.get("text-pitch-alignment"), layer.layout.get("text-keep-upright"), stencilMode, colorMode, isRenderingToTexture);
 	if (tileManager.map.showCollisionBoxes) {
 		drawCollisionDebug(painter, tileManager, layer, coords, true);
@@ -19382,7 +19723,8 @@ var Painter = class Painter {
 //#endregion
 //#region src/util/gpu_initialization_error.ts
 /**
-* Thrown (via the map's `error` event) when a GPU rendering context cannot be created.
+* Thrown by the `Map` constructor when a GPU rendering context cannot be created,
+* or fired via the map's `error` event when recreating the context after a `webglcontextrestored` fails.
 *
 * Carries the canvas attributes that were requested and, when the browser provided one,
 * the originating `webglcontextcreationerror` `statusMessage`.
@@ -22261,7 +22603,7 @@ var Camera = class extends Evented {
 		let bearingChanged = false, pitchChanged = false;
 		let rollChanged = false;
 		const oldZoom = tr.zoom;
-		if (this.terrain) tr.setElevation(this.terrain.getElevationForLngLatZoom(options.center ? LngLat.convert(options.center) : tr.center, options.zoom || tr.tileZoom));
+		if (this.terrain) tr.setElevation(this.terrain.getElevationForLngLat(options.center ? LngLat.convert(options.center) : tr.center, tr));
 		this.cameraHelper.handleJumpToCenterZoom(tr, options);
 		const zoomChanged = tr.zoom !== oldZoom;
 		if ("elevation" in options && tr.elevation !== +options.elevation) tr.setElevation(+options.elevation);
@@ -22384,13 +22726,13 @@ var Camera = class extends Evented {
 	_prepareElevation(center) {
 		this._elevationCenter = center;
 		this._elevationStart = this.transform.elevation;
-		this._elevationTarget = this.terrain.getElevationForLngLatZoom(center, this.transform.tileZoom);
+		this._elevationTarget = this.terrain.getElevationForLngLat(center, this.transform);
 		this.elevationFreeze = true;
 	}
 	_updateElevation(k) {
 		if (this._elevationStart === void 0 || this._elevationCenter === void 0) this._prepareElevation(this.transform.center);
 		this.transform.setMinElevationForCurrentTile(this.terrain.getMinTileElevationForLngLatZoom(this._elevationCenter, this.transform.tileZoom));
-		const elevation = this.terrain.getElevationForLngLatZoom(this._elevationCenter, this.transform.tileZoom);
+		const elevation = this.terrain.getElevationForLngLat(this._elevationCenter, this.transform);
 		if (k < 1 && elevation !== this._elevationTarget) {
 			const pitch1 = this._elevationTarget - this._elevationStart;
 			const pitch2 = (elevation - (pitch1 * k + this._elevationStart)) / (1 - k);
@@ -23200,8 +23542,12 @@ var Map$1 = class extends Evented {
 				style: null,
 				images: null
 			};
-			this._setupPainter();
-			if (!this.painter) return;
+			try {
+				this._setupPainter();
+			} catch (error) {
+				this.fire(new ErrorEvent(error));
+				return;
+			}
 			this.resize();
 			this._update();
 			this._resizeInternal();
@@ -23266,13 +23612,17 @@ var Map$1 = class extends Evented {
 		this.cancelPendingTileRequestsWhileZooming = resolvedOptions.cancelPendingTileRequestsWhileZooming === true;
 		this.setAnisotropicFilterPitch(resolvedOptions.anisotropicFilterPitch);
 		if (resolvedOptions.reduceMotion !== void 0) browser.prefersReducedMotion = resolvedOptions.reduceMotion;
-		this._imageQueueHandle = ImageRequest.addThrottleControl(() => this.isMoving());
 		this._requestManager = new RequestManager(resolvedOptions.transformRequest);
 		this._container = this._resolveContainer(resolvedOptions.container);
 		if (resolvedOptions.maxBounds) this.setMaxBounds(resolvedOptions.maxBounds);
 		this._setupContainer();
-		this._setupPainter();
-		if (!this.painter) return;
+		try {
+			this._setupPainter();
+		} catch (error) {
+			this._cleanupContainer();
+			throw error;
+		}
+		this._imageQueueHandle = ImageRequest.addThrottleControl(() => this.isMoving());
 		this.on("move", () => this._update(false));
 		this.on("moveend", () => this._update(false));
 		this.on("zoom", () => this._update(true));
@@ -24247,14 +24597,17 @@ var Map$1 = class extends Evented {
 	/**
 	* Returns the map's minimum allowable zoom level.
 	*
+	* @param constrained - If `true`, returns the effective minimum zoom after applying the map's viewport constraints.
+	* If `false` or omitted, returns the configured minimum zoom.
 	* @returns minZoom
 	* @example
 	* ```ts
 	* let minZoom = map.getMinZoom();
 	* ```
 	*/
-	getMinZoom() {
-		return this._camera.transform.minZoom;
+	getMinZoom(constrained = false) {
+		const transform = this._camera.transform;
+		return constrained ? transform.applyConstrain(transform.center, transform.minZoom).zoom : transform.minZoom;
 	}
 	/**
 	* Sets or clears the map's maximum zoom level.
@@ -25049,10 +25402,11 @@ var Map$1 = class extends Evented {
 			this.painter.renderToTexture = new RenderToTexture(this.painter, this.terrain);
 			this._camera.terrain = this.terrain;
 			this._camera.transform.setMinElevationForCurrentTile(this.terrain.getMinTileElevationForLngLatZoom(this._camera.transform.center, this._camera.transform.tileZoom));
-			this._camera.transform.setElevation(this.terrain.getElevationForLngLatZoom(this._camera.transform.center, this._camera.transform.tileZoom));
+			this._camera.transform.setElevation(this.terrain.getElevationForLngLat(this._camera.transform.center, this._camera.transform));
 			this._terrainDataCallback = (e) => this._handleTerrainDataEvent(e, options.source);
 			this.style.on("data", this._terrainDataCallback);
 		}
+		this.style.triggerSymbolPlacement();
 		this.fire(new MapTerrainEvent({ terrain: options }));
 		return this;
 	}
@@ -25062,10 +25416,13 @@ var Map$1 = class extends Evented {
 			return;
 		}
 		const isTerrainSourceEvent = event.sourceId === terrainSourceId;
-		if (isTerrainSourceEvent) this.terrain.resetElevationCache();
+		if (isTerrainSourceEvent) {
+			this.terrain.resetElevationCache();
+			this.style.triggerSymbolPlacement();
+		}
 		if (isTerrainSourceEvent && event.tile && !this._camera.elevationFreeze) {
 			this._camera.transform.setMinElevationForCurrentTile(this.terrain.getMinTileElevationForLngLatZoom(this._camera.transform.center, this._camera.transform.tileZoom));
-			if (this.getCenterClampedToGround()) this._camera.transform.setElevation(this.terrain.getElevationForLngLatZoom(this._camera.transform.center, this._camera.transform.tileZoom));
+			if (this.getCenterClampedToGround()) this._camera.transform.setElevation(this.terrain.getElevationForLngLat(this._camera.transform.center, this._camera.transform));
 		}
 		if (!event.tile) return;
 		if (event.source?.type === "image") {
@@ -25720,6 +26077,42 @@ var Map$1 = class extends Evented {
 		return this.style.getGlyphsUrl();
 	}
 	/**
+	* Sets the value of the style's `font-faces` property, which points at the font files used to
+	* draw text that the style's `glyphs` URL does not cover. Pass a falsy value (null or undefined)
+	* to unset it.
+	*
+	* The files are handed to the browser's CSS Font Loading API, so any format the browser can
+	* render text with may be used, and requests for them go through `transformRequest` as glyph
+	* requests do. Text is drawn a grapheme cluster at a time, so a letter and the marks written on
+	* it are handed to the browser's text engine together and come back as the one shape they are
+	* written as -- which is what a `glyphs` URL, serving one codepoint at a time, cannot do.
+	*
+	* @param fontFaces - The font faces to set. Must conform to the [MapLibre Style Specification](https://maplibre.org/maplibre-style-spec/root/#font-faces).
+	* A declaration this cannot make sense of is skipped with a warning, as is a font file that
+	* fails to load, so the text it would have drawn falls back to the `glyphs` URL.
+	* @example
+	* ```ts
+	* map.setFontFaces({
+	*     'Noto Sans Regular': [
+	*         {url: 'https://example.com/NotoSansKhmer-Regular.ttf', 'unicode-range': ['U+1780-17FF']}
+	*     ]
+	* });
+	* ```
+	*/
+	setFontFaces(fontFaces) {
+		this._lazyInitEmptyStyle();
+		this.style.setFontFaces(fontFaces);
+		return this._update(true);
+	}
+	/**
+	* Returns the value of the style's `font-faces` property.
+	*
+	* @returns The style's font faces, or `null` if it declares none.
+	*/
+	getFontFaces() {
+		return this.style.getFontFaces();
+	}
+	/**
 	* Adds a sprite to the map's style. Fires the `style` event.
 	*
 	* @param id - The ID of the sprite to add. Must not conflict with existing sprites.
@@ -26055,12 +26448,28 @@ var Map$1 = class extends Evented {
 		]) positions[positionName] = DOM.create("div", `maplibregl-ctrl-${positionName} `, controlContainer);
 		this._container.addEventListener("scroll", this._onMapScroll, false);
 	}
+	/**
+	* @internal
+	* Reverses the DOM mutations of {@link Map._setupContainer}, returning the container element to its pre-construction state.
+	*/
+	_cleanupContainer() {
+		this._canvas.removeEventListener("webglcontextrestored", this._contextRestored, false);
+		this._canvas.removeEventListener("webglcontextlost", this._contextLost, false);
+		this._canvasContainer.remove();
+		this._controlContainer.remove();
+		this._container.removeEventListener("scroll", this._onMapScroll, false);
+		this._container.classList.remove("maplibregl-map");
+	}
 	_resizeCanvas(width, height, pixelRatio) {
 		this._canvas.width = Math.floor(pixelRatio * width);
 		this._canvas.height = Math.floor(pixelRatio * height);
 		this._canvas.style.width = `${width}px`;
 		this._canvas.style.height = `${height}px`;
 	}
+	/**
+	* @internal
+	* Creates the WebGL2 context and the painter. Throws {@link GPUInitializationError} when the context cannot be created.
+	*/
 	_setupPainter() {
 		const attributes = {
 			...this._canvasContextAttributes,
@@ -26074,10 +26483,7 @@ var Map$1 = class extends Evented {
 			creationEvent = event;
 		}, { once: true });
 		const gl = this._canvas.getContext("webgl2", attributes);
-		if (!gl) {
-			this.fire(new ErrorEvent(new GPUInitializationError(attributes, creationEvent)));
-			return;
-		}
+		if (!gl) throw new GPUInitializationError(attributes, creationEvent);
 		this.painter = new Painter(gl, this._camera.transform);
 	}
 	/**
@@ -26175,10 +26581,9 @@ var Map$1 = class extends Evented {
 			this.style._updateSources(this._camera.transform);
 		}
 		if (this.terrain) {
-			this.terrain.tileManager.update(this._camera.transform, this.terrain);
-			this.terrain.resetElevationCache();
+			if (this.terrain.tileManager.update(this._camera.transform, this.terrain)) this.terrain.resetElevationCache();
 			this._camera.transform.setMinElevationForCurrentTile(this.terrain.getMinTileElevationForLngLatZoom(this._camera.transform.center, this._camera.transform.tileZoom));
-			if (!this._camera.elevationFreeze && this.getCenterClampedToGround()) this._camera.transform.setElevation(this.terrain.getElevationForLngLatZoom(this._camera.transform.center, this._camera.transform.tileZoom));
+			if (!this._camera.elevationFreeze && this.getCenterClampedToGround()) this._camera.transform.setElevation(this.terrain.getElevationForLngLat(this._camera.transform.center, this._camera.transform));
 		} else {
 			this._camera.transform.setMinElevationForCurrentTile(0);
 			if (this.getCenterClampedToGround()) this._camera.transform.setElevation(0);
@@ -26251,12 +26656,7 @@ var Map$1 = class extends Evented {
 		this._resizeObserver?.disconnect();
 		const extension = this.painter.context.gl.getExtension("WEBGL_lose_context");
 		if (extension?.loseContext) extension.loseContext();
-		this._canvas.removeEventListener("webglcontextrestored", this._contextRestored, false);
-		this._canvas.removeEventListener("webglcontextlost", this._contextLost, false);
-		this._canvasContainer.remove();
-		this._controlContainer.remove();
-		this._container.removeEventListener("scroll", this._onMapScroll, false);
-		this._container.classList.remove("maplibregl-map");
+		this._cleanupContainer();
 		this._removed = true;
 		this.fire(new MapLibreEvent("remove"));
 	}
@@ -26433,7 +26833,7 @@ var NavigationControl = class {
 		this._updateZoomButtons = () => {
 			const zoom = this._map.getZoom();
 			const isMax = zoom === this._map.getMaxZoom();
-			const isMin = zoom === this._map.getMinZoom();
+			const isMin = zoom === this._map.getMinZoom(true);
 			this._zoomInButton.disabled = isMax;
 			this._zoomOutButton.disabled = isMin;
 			this._zoomInButton.setAttribute("aria-disabled", isMax.toString());
@@ -26487,7 +26887,7 @@ var NavigationControl = class {
 		if (this.options.showZoom) {
 			this._setButtonTitle(this._zoomInButton, "ZoomIn");
 			this._setButtonTitle(this._zoomOutButton, "ZoomOut");
-			this._map.on("zoom", this._updateZoomButtons);
+			this._map.on("move", this._updateZoomButtons);
 			this._updateZoomButtons();
 		}
 		if (this.options.showCompass) {
@@ -26503,7 +26903,7 @@ var NavigationControl = class {
 	/** {@inheritDoc IControl.onRemove} */
 	onRemove() {
 		this._container.remove();
-		if (this.options.showZoom) this._map.off("zoom", this._updateZoomButtons);
+		if (this.options.showZoom) this._map.off("move", this._updateZoomButtons);
 		if (this.options.showCompass) {
 			if (this.options.visualizePitch) this._map.off("pitch", this._rotateCompassArrow);
 			if (this.options.visualizeRoll) this._map.off("roll", this._rotateCompassArrow);