@sakuzu/maplibre-gl-draw 1.0.0 → 2.1.0

package/dist/view/layer/store-retained-classify.js

@@ -1,6 +1,18 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { toInstancedPointShape } from '../renderers/point/point-instance.js';
+/**
+ * The custom renderer that draws a feature: the one registered for its type, unless it
+ * refuses the feature, which the built-in drawing of the type then draws
+ */
+export function customRendererOf(customTypes, feature) {
+    const renderer = customTypes.get(feature.type);
+    if (renderer === undefined)
+        return undefined;
+    const { appliesTo } = renderer;
+    return appliesTo && !appliesTo.call(renderer, feature) ? undefined : renderer;
+}
 /**
  * Classifies a feature into the kind of its run
  *
@@ -13,7 +25,7 @@ import { toInstancedPointShape } from '../renderers/point/point-instance.js';
  */
 export function classifyFeature(feature, styles, customTypes, companions, layer) {
     // A custom type is drawn immediately (it cannot go on a core batch)
-    if (customTypes.has(feature.type))
+    if (customRendererOf(customTypes, feature))
         return 'immediate';
     // A feature that has a companion (feature companion) needs a hook right before it, so it cannot
     // go on a retained batch. It is split out into an immediate chunk and drawn one at a time (on
@@ -59,29 +71,29 @@ export function featureOrigin(feature) {
         return [0, 0];
     switch (feature.type) {
         case 'MultiPoint': {
-            const coord = feature.coordinates[0];
+            const coord = coordinatesOf(feature)[0];
             return coord ? [coord[0], coord[1]] : [0, 0];
         }
         case 'LineString':
         case 'Freehand': {
-            const coord = feature.coordinates[0];
+            const coord = coordinatesOf(feature)[0];
             return coord ? [coord[0], coord[1]] : [0, 0];
         }
         case 'MultiLineString': {
-            const coord = feature.coordinates[0]?.[0];
+            const coord = coordinatesOf(feature)[0]?.[0];
             return coord ? [coord[0], coord[1]] : [0, 0];
         }
         case 'Polygon': {
-            const coord = feature.coordinates[0]?.[0];
+            const coord = coordinatesOf(feature)[0]?.[0];
             return coord ? [coord[0], coord[1]] : [0, 0];
         }
         case 'MultiPolygon': {
-            const coord = feature.coordinates[0]?.[0]?.[0];
+            const coord = coordinatesOf(feature)[0]?.[0]?.[0];
             return coord ? [coord[0], coord[1]] : [0, 0];
         }
         default: {
             // A single coordinate, such as Point / Circle
-            const coord = feature.coordinates;
+            const coord = coordinatesOf(feature);
             return Array.isArray(coord) && typeof coord[0] === 'number' ? [coord[0], coord[1]] : [0, 0];
         }
     }

package/dist/view/layer/store-retained-collect.js

@@ -7,6 +7,7 @@
  * and the result is baked into the vertex or instance data of the batch.
  */
 import { generateCirclePolygon } from '../../shared/math/index.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js';
 import { toLineBatchItem, toPointInstanceData } from '../renderers/batch-manager.js';
 /**
@@ -37,11 +38,11 @@ export function collectLineItems(features, styles, layer) {
             items.push(item);
         };
         if (feature.type === 'MultiLineString') {
-            for (const part of feature.coordinates)
+            for (const part of coordinatesOf(feature))
                 push(part);
         }
         else {
-            push(feature.coordinates);
+            push(coordinatesOf(feature));
         }
     }
     return items;
@@ -85,7 +86,7 @@ export function collectPolygons(features, styles, layer) {
             });
         };
         if (feature.type === 'MultiPolygon') {
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             for (let i = 0; i < parts.length; i++)
                 push(parts[i], i);
         }
@@ -93,10 +94,10 @@ export function collectPolygons(features, styles, layer) {
             const radiusMeters = getCircleRadius(feature);
             if (!radiusMeters || radiusMeters <= 0)
                 continue;
-            push([generateCirclePolygon(feature.coordinates, radiusMeters)], 0);
+            push([generateCirclePolygon(coordinatesOf(feature), radiusMeters)], 0);
         }
         else {
-            push(feature.coordinates, 0);
+            push(coordinatesOf(feature), 0);
         }
     }
     return polygons;
@@ -109,12 +110,12 @@ export function collectPoints(features, styles, layer) {
     for (const feature of features) {
         const style = styles.getPointStyle(feature, layer);
         if (feature.type === 'MultiPoint') {
-            for (const coord of feature.coordinates) {
+            for (const coord of coordinatesOf(feature)) {
                 points.push(toPointInstanceData(coord, style));
             }
         }
         else {
-            points.push(toPointInstanceData(feature.coordinates, style));
+            points.push(toPointInstanceData(coordinatesOf(feature), style));
         }
     }
     return points;

package/dist/view/layer/store-retained-coord-patch.d.ts

@@ -1,11 +1,3 @@
-/**
- * Incremental update of the coordinate texture of a retained line chunk
- *
- * A vertex drag moves only a few vertices. Rebuilding a line chunk with many vertices every frame
- * would overflow the frame, so the diff of the vertices that moved is queued on the chunk and,
- * right before drawing, only the corresponding texels of the coordinate texture are rewritten
- * (see SDFLineRenderer.patchRetainedBatchCoords).
- */
 import type { Coordinate, Feature } from '../../store/types.js';
 import type { RetainedLineBatch } from '../renderers/line/line-types.js';
 import type { SDFLineRenderer } from '../renderers/line/sdf-line.js';

package/dist/view/layer/store-retained-coord-patch.js

@@ -1,5 +1,14 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+/**
+ * Incremental update of the coordinate texture of a retained line chunk
+ *
+ * A vertex drag moves only a few vertices. Rebuilding a line chunk with many vertices every frame
+ * would overflow the frame, so the diff of the vertices that moved is queued on the chunk and,
+ * right before drawing, only the corresponding texels of the coordinate texture are rewritten
+ * (see SDFLineRenderer.patchRetainedBatchCoords).
+ */
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { expandBBox } from './store-retained-bbox.js';
 /**
  * Upper limit of the number of vertices that one update may put into the incremental update of
@@ -71,14 +80,14 @@ export function computeLineCoordSlots(features) {
     let offset = 0;
     for (const feature of features) {
         if (feature.type === 'MultiLineString') {
-            for (const part of feature.coordinates ?? []) {
+            for (const part of coordinatesOf(feature) ?? []) {
                 if (!part || part.length < 2)
                     continue;
                 offset += part.length;
             }
             continue;
         }
-        const coords = feature.coordinates;
+        const coords = coordinatesOf(feature);
         if (!coords || coords.length < 2)
             continue;
         if (feature.type === 'LineString' || feature.type === 'Freehand') {
@@ -122,12 +131,12 @@ export function queueCoordPatch(chunk, feature, previous, line) {
     const slot = chunk.lineOffsets.get(feature.id);
     if (!slot)
         return false;
-    const coords = feature.coordinates;
+    const coords = coordinatesOf(feature);
     // If the vertex count differs from when the index table was built, the positions of the
     // following features are off as well
     if (!Array.isArray(coords) || coords.length !== slot.count)
         return false;
-    const changed = computeCoordinateDiff(previous.coordinates, coords, MAX_PATCHED_VERTICES);
+    const changed = computeCoordinateDiff(coordinatesOf(previous), coords, MAX_PATCHED_VERTICES);
     if (!changed)
         return false;
     // An update where no vertex moved (a change of locked, for example) is not treated as a diff;

package/dist/view/layer/store-retained-immediate.d.ts

@@ -6,7 +6,7 @@
  * as the layer loop of render.ts.
  */
 import type { ProjectionData } from 'maplibre-gl';
-import type { CustomFeatureHandler, CustomRendererDrawContext } from '../../extension/index.js';
+import type { FeatureTypeHandler, FrameDrawContext } from '../../extension/index.js';
 import type { Store } from '../../store/store.js';
 import type { Feature, Layer } from '../../store/types.js';
 import { type FeatureCompanionRegistry } from '../feature-companion.js';
@@ -28,9 +28,9 @@ export interface StoreRetainedDrawDeps {
     /** Immediate-mode draw target that draws the features which cannot be retained */
     batchManager: StoreImmediateTarget;
     /** Renderers of the custom feature types (type name → renderer) */
-    customRenderers: Map<string, CustomFeatureHandler['renderer']>;
+    customRenderers: Map<string, FeatureTypeHandler['renderer']>;
     /** Draw context passed to a custom renderer */
-    customRendererContext: CustomRendererDrawContext;
+    customRendererContext: FrameDrawContext;
     /** Providers of companion drawing and companion hits (those of this draw instance) */
     companions: FeatureCompanionRegistry;
     /**

package/dist/view/layer/store-retained-immediate.js

@@ -2,6 +2,7 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { isLocallyHidden } from '../../store/local-visibility.js';
 import { drawFeatureCompanionsInFrame, } from '../feature-companion.js';
+import { customRendererOf } from './store-retained-classify.js';
 /**
  * Draws a list of features in immediate mode
  *
@@ -25,18 +26,12 @@ export function drawFeaturesImmediate(store, featureIds, layer, projectionData,
         // immediate chunk, so going through here makes the z order in retained mode identical to
         // immediate mode.
         drawFeatureCompanionsInFrame(deps.companions, feature, batchManager, projectionData, zoom, layer, customRendererContext, deps.restoreBlendState);
-        const customRenderer = customRenderers.get(feature.type);
+        const customRenderer = customRendererOf(customRenderers, feature);
         if (customRenderer) {
             // To keep the draw order (painter's algorithm), the core batch that has accumulated is
             // flushed first and only then the custom feature is drawn immediately.
             batchManager.endFrame();
-            customRenderer.draw({
-                id: feature.id,
-                type: feature.type,
-                coordinates: feature.coordinates,
-                properties: feature.properties,
-                style: feature.style,
-            }, projectionData, zoom, customRendererContext);
+            customRenderer.draw(feature, projectionData, zoom, customRendererContext);
             // Re-establish the blend state that the external renderer may have rewritten
             deps.restoreBlendState?.();
             batchManager.beginFrame(projectionData, zoom, layer);

package/dist/view/layer/store-retained-invalidation.d.ts

@@ -5,7 +5,7 @@
  * hidden features (updated in place), the registry of companion drawing and the generations of
  * the terrain. They are checked once per frame, and any change discards the whole cache.
  */
-import type { Layer, StateChanges } from '../../store/types.js';
+import type { Layer, StoreChange } from '../../store/types.js';
 import type { FeatureCompanionRegistry } from '../feature-companion.js';
 import type { TerrainContext } from '../terrain/context.js';
 /**
@@ -93,4 +93,4 @@ export declare function isOpacityOnlyLayerChange(previous: Layer, layer: Layer):
  * Whether a change of the layers consists only of opacity updates (nothing created, deleted or
  * reordered, and every update is {@link isOpacityOnlyLayerChange})
  */
-export declare function isOpacityOnlyLayersChange(layers: NonNullable<StateChanges['layers']>): boolean;
+export declare function isOpacityOnlyLayersChange(layers: NonNullable<StoreChange['layers']>): boolean;

package/dist/view/layer/store-retained.d.ts

@@ -38,7 +38,7 @@
  */
 import type { ProjectionData } from 'maplibre-gl';
 import type { Store } from '../../store/store.js';
-import type { BoundingBox, Layer, StateChanges } from '../../store/types.js';
+import type { BoundingBox, Layer, StoreChange } from '../../store/types.js';
 import type { FeatureCompanionRegistry } from '../feature-companion.js';
 import type { RetainedRendererSet } from '../renderers/retained.js';
 import { TerrainContext } from '../terrain/context.js';
@@ -116,7 +116,7 @@ export declare class StoreRetainedCache {
      * The decisions are conservative (rebuilding too much still renders correctly; rebuilding too
      * little leaves a stale picture).
      */
-    applyChanges(changes: StateChanges): void;
+    applyChanges(changes: StoreChange): void;
     /**
      * Discards the cache of every layer (the GPU resources are released as well)
      */

package/dist/view/layer/store-retained.js

@@ -96,7 +96,7 @@ export class StoreRetainedCache {
         this.frame++;
         this.featuresByLayer = null;
         // Every watch is advanced on every frame (no short circuit), so each keeps its snapshot
-        const hiddenChanged = this.watch.locallyHiddenChanged(this.store.getLocallyHidden());
+        const hiddenChanged = this.watch.locallyHiddenChanged(this.store.listHidden());
         const companionsChanged = this.watch.companionsChanged(companions);
         const terrainChanged = this.watch.terrainChanged(this.terrain);
         if (hiddenChanged || companionsChanged || terrainChanged)

package/dist/view/renderers/batch-manager.js

@@ -1,6 +1,7 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { generateCirclePolygon } from '../../shared/math/index.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js';
 import { densifyPathForGlobe } from '../globe-subdivision.js';
 import { TerrainContext } from '../terrain/context.js';
@@ -371,7 +372,7 @@ export class BatchManager {
     }
     // === Point processing ===
     processPoint(feature) {
-        this.processPointCoord(feature, feature.coordinates);
+        this.processPointCoord(feature, coordinatesOf(feature));
     }
     /**
      * Add a MultiPoint to the point batch, part by part
@@ -380,7 +381,7 @@ export class BatchManager {
      * feature, so it is shared across all parts.
      */
     processMultiPoint(feature) {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (const coord of parts) {
             this.processPointCoord(feature, coord);
         }
@@ -440,7 +441,7 @@ export class BatchManager {
     }
     // === LineString processing ===
     processLineString(feature) {
-        this.processLineCoords(feature, feature.coordinates);
+        this.processLineCoords(feature, coordinatesOf(feature));
     }
     /**
      * Add a MultiLineString to the line batch, part by part
@@ -448,7 +449,7 @@ export class BatchManager {
      * The coordinates are `Coordinate[][]` (a part = one polyline).
      */
     processMultiLineString(feature) {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (const coords of parts) {
             if (coords.length < 2)
                 continue;
@@ -534,7 +535,7 @@ export class BatchManager {
     }
     // === Polygon processing ===
     processPolygon(feature) {
-        const rings = feature.coordinates;
+        const rings = coordinatesOf(feature);
         const outerRing = rings[0];
         if (!outerRing || outerRing.length < 3)
             return;
@@ -548,7 +549,7 @@ export class BatchManager {
      * The key of the earcut cache includes the part index as well.
      */
     processMultiPolygon(feature) {
-        const parts = feature.coordinates;
+        const parts = coordinatesOf(feature);
         for (let partIndex = 0; partIndex < parts.length; partIndex++) {
             const rings = parts[partIndex];
             const outerRing = rings?.[0];
@@ -559,7 +560,7 @@ export class BatchManager {
     }
     // === Circle processing ===
     processCircle(feature) {
-        const center = feature.coordinates;
+        const center = coordinatesOf(feature);
         const radiusMeters = getCircleRadius(feature);
         if (!radiusMeters || radiusMeters <= 0)
             return;

package/dist/view/renderers/drawer.js

@@ -1,7 +1,8 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { toColor } from '../../shared/color.js';
 import { generateCirclePolygon } from '../../shared/math/index.js';
-import { hexToColor } from '../../shared/utils/color.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getCircleRadius, getCreatedZoom } from '../../shared/utils/property.js';
 import { StyleRuleCache } from '../cache/style-rule.js';
 import { applyRuleColor } from '../style-rule.js';
@@ -87,25 +88,25 @@ export class FeatureDrawer {
     drawFeature(feature, projectionData, zoom, layer) {
         const opacity = layerDrawFactors(layer).opacity;
         if (feature.type === 'Point') {
-            const coord = feature.coordinates;
+            const coord = coordinatesOf(feature);
             const pointStyle = pointWithOpacity(this.getPointStyle(feature, layer), opacity);
             this.drawPointShape(coord, pointStyle, zoom, feature.id);
         }
         else if (feature.type === 'LineString') {
-            const coords = feature.coordinates;
+            const coords = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const strokeStyle = strokeWithOpacity(this.getLineStringStrokeStyle(feature, layer), opacity);
             this.drawLineStringStroke(coords, strokeStyle, projectionData, zoom, createdZoom, feature.id);
         }
         else if (feature.type === 'Polygon') {
-            const rings = feature.coordinates;
+            const rings = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const { fillColor, strokeStyle } = polygonWithOpacity(this.getPolygonStyles(feature, layer), opacity);
             this.drawPolygonWithStroke(rings, fillColor, strokeStyle, projectionData, zoom, createdZoom, feature.id);
         }
         else if (feature.type === 'MultiPoint') {
             // Draw a point for each part (the style is shared across the feature)
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             const pointStyle = pointWithOpacity(this.getPointStyle(feature, layer), opacity);
             for (const coord of parts) {
                 this.drawPointShape(coord, pointStyle, zoom, feature.id);
@@ -113,7 +114,7 @@ export class FeatureDrawer {
         }
         else if (feature.type === 'MultiLineString') {
             // Draw a line for each part
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const strokeStyle = strokeWithOpacity(this.getLineStringStrokeStyle(feature, layer), opacity);
             for (let i = 0; i < parts.length; i++) {
@@ -122,7 +123,7 @@ export class FeatureDrawer {
         }
         else if (feature.type === 'MultiPolygon') {
             // Draw a hole-aware polygon for each part
-            const parts = feature.coordinates;
+            const parts = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const { fillColor, strokeStyle } = polygonWithOpacity(this.getPolygonStyles(feature, layer), opacity);
             for (let i = 0; i < parts.length; i++) {
@@ -130,14 +131,16 @@ export class FeatureDrawer {
             }
         }
         else if (feature.type === 'Image') {
-            this.imageRenderer.draw(feature, projectionData, zoom, () => this.map.triggerRepaint(), opacity);
+            // An image without an opacity of its own takes the one of the instance
+            const imageOpacity = feature.style.imageOpacity === undefined ? (this.featureStyle.image?.opacity ?? 1) : 1;
+            this.imageRenderer.draw(feature, projectionData, zoom, () => this.map.triggerRepaint(), opacity * imageOpacity);
         }
         else if (feature.type === 'Circle') {
             this.drawCircle(feature, projectionData, zoom, layer, opacity);
         }
         else if (feature.type === 'Freehand') {
             // Freehand uses the same rendering logic as LineString
-            const coords = feature.coordinates;
+            const coords = coordinatesOf(feature);
             const createdZoom = getCreatedZoom(feature) ?? zoom;
             const strokeStyle = strokeWithOpacity(this.getLineStringStrokeStyle(feature, layer), opacity);
             this.drawLineStringStroke(coords, strokeStyle, projectionData, zoom, createdZoom, feature.id);
@@ -185,7 +188,7 @@ export class FeatureDrawer {
         // Apply strokeOpacity when it is specified, even if strokeColor is not set
         // strokeOpacity is set directly rather than multiplied into the default alpha value
         const color = style.strokeColor
-            ? hexToColor(style.strokeColor, style.strokeOpacity ?? 1)
+            ? toColor(style.strokeColor, style.strokeOpacity ?? 1)
             : style.strokeOpacity !== undefined
                 ? [defaultStyle.color[0], defaultStyle.color[1], defaultStyle.color[2], style.strokeOpacity]
                 : defaultStyle.color;
@@ -208,8 +211,11 @@ export class FeatureDrawer {
      * @param layer The layer it belongs to (used to evaluate style rules; no rules when omitted)
      */
     getPolygonStyles(feature, layer) {
-        const defaultFillColor = this.featureStyle.polygon.fill.color;
-        const defaultStrokeStyle = this.featureStyle.polygon.stroke;
+        const look = feature?.type === 'Circle' && this.featureStyle.circle
+            ? this.featureStyle.circle
+            : this.featureStyle.polygon;
+        const defaultFillColor = look.fill.color;
+        const defaultStrokeStyle = look.stroke;
         const style = this.resolveStyle(feature, layer, 'fill');
         if (!style) {
             return { fillColor: defaultFillColor, strokeStyle: defaultStrokeStyle };
@@ -220,14 +226,14 @@ export class FeatureDrawer {
         // So that a feature with only fillColor specified does not become opaque (alpha 1),
         // it follows the alpha component of the default color rather than a hardcoded 1.
         const fillColor = style.fillColor
-            ? hexToColor(style.fillColor, style.fillOpacity ?? defaultFillColor[3])
+            ? toColor(style.fillColor, style.fillOpacity ?? defaultFillColor[3])
             : style.fillOpacity !== undefined
                 ? [defaultFillColor[0], defaultFillColor[1], defaultFillColor[2], style.fillOpacity]
                 : defaultFillColor;
         // Apply strokeOpacity when it is specified, even if strokeColor is not set
         // strokeOpacity is set directly rather than multiplied into the default alpha value
         const strokeColor = style.strokeColor
-            ? hexToColor(style.strokeColor, style.strokeOpacity ?? 1)
+            ? toColor(style.strokeColor, style.strokeOpacity ?? 1)
             : style.strokeOpacity !== undefined
                 ? [
                     defaultStrokeStyle.color[0],
@@ -292,7 +298,7 @@ export class FeatureDrawer {
      * Draw a Circle
      */
     drawCircle(feature, projectionData, zoom, layer, opacity = 1) {
-        const center = feature.coordinates;
+        const center = coordinatesOf(feature);
         const radiusMeters = getCircleRadius(feature);
         if (!radiusMeters || radiusMeters <= 0)
             return;

package/dist/view/renderers/image.js

@@ -1,20 +1,10 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
 import { getMetersPerPixel, metersToDegreesLat, metersToDegreesLng, } from '../../shared/math/index.js';
+import { coordinatesOf } from '../../shared/utils/coordinates.js';
 import { getTileSize } from '../../shared/utils/map.js';
 import { getImageProperties } from '../../shared/utils/property.js';
 import { computeQuadVertices } from '../shaders/quad.js';
-/**
- * The default image style
- * width/height: 0 = use the original size
- */
-const DEFAULT_IMAGE_STYLE = {
-    width: 0,
-    height: 0,
-    rotation: 0,
-    opacity: 1.0,
-    imageOpacity: 1,
-};
 /**
  * ImageRenderer
  *
@@ -99,9 +89,8 @@ export class ImageRenderer {
         // its file), so the feature is drawn without its image and nothing is logged.
         if (!fileData)
             return;
-        const coord = feature.coordinates;
+        const coord = coordinatesOf(feature);
         const latitude = coord[1];
-        const style = this.getImageStyle(feature.style);
         // The texture is keyed by the dataURL. While the image is decoding nothing is drawn; the
         // decode (shared per dataURL) requests a redraw when it finishes, and that frame uploads it
         const imageFileId = properties.imageFileId;
@@ -117,12 +106,9 @@ export class ImageRenderer {
             this.noteMissingImage(feature.id, src);
             return;
         }
-        // Determine the size (use the size stored in ImageProperties)
-        const imageWidth = properties.imageWidth || textureInfo.width;
-        const imageHeight = properties.imageHeight || textureInfo.height;
-        // Use the size specified by the style, or the original size
-        const displayWidth = style.width || imageWidth;
-        const displayHeight = style.height || imageHeight;
+        // The size in pixels at the created zoom: the size of the feature, or else of the image
+        const displayWidth = properties.imageWidth || textureInfo.width;
+        const displayHeight = properties.imageHeight || textureInfo.height;
         // Scale relative to how it is displayed at createdZoom
         // At createdZoom the image is displayed at its original pixel size
         const createdZoom = properties.createdZoom || zoom;
@@ -136,16 +122,13 @@ export class ImageRenderer {
         const widthDeg = metersToDegreesLng(widthMeters, latitude);
         const heightDeg = metersToDegreesLat(heightMeters);
         // Rotation angle (degrees -> radians)
-        const rotationRad = (((style.rotation || 0) + (properties.rotation || 0)) * Math.PI) / 180;
+        const rotationRad = ((properties.rotation || 0) * Math.PI) / 180;
         // Compute the quad vertices
         const vertices = computeQuadVertices(coord[0], coord[1], widthDeg, heightDeg, rotationRad);
-        // Draw (imageOpacity takes precedence; otherwise opacity is used)
-        const opacity = (style.imageOpacity ?? style.opacity ?? 1.0) * opacityFactor;
+        // Draw
+        const opacity = (feature.style.imageOpacity ?? 1.0) * opacityFactor;
         this.quadShader.draw(vertices, textureInfo.texture, opacity, projectionData, zoom);
     }
-    /**
-     * Merge the image style
-     */
     /**
      * Records a feature whose image is not drawn: reports it at once when the image has failed,
      * otherwise waits for the decode (the cache tells only the caller that started it)
@@ -177,12 +160,6 @@ export class ImageRenderer {
         this.reportedFailures.set(featureId, src);
         this.onError?.(featureId, error);
     }
-    getImageStyle(style) {
-        return {
-            ...DEFAULT_IMAGE_STYLE,
-            ...style,
-        };
-    }
     /**
      * Compute the bounding box of an image (in degrees)
      *
@@ -196,14 +173,11 @@ export class ImageRenderer {
         const properties = getImageProperties(feature);
         if (!properties.imageFileId)
             return null;
-        const coord = feature.coordinates;
+        const coord = coordinatesOf(feature);
         const latitude = coord[1];
-        const style = this.getImageStyle(feature.style);
-        // Determine the size
-        const imageWidth = properties.imageWidth || style.width;
-        const imageHeight = properties.imageHeight || style.height;
-        const displayWidth = style.width || imageWidth;
-        const displayHeight = style.height || imageHeight;
+        // The size in pixels at the created zoom
+        const displayWidth = properties.imageWidth;
+        const displayHeight = properties.imageHeight;
         // Scale relative to how it is displayed at createdZoom
         const createdZoom = properties.createdZoom || zoom;
         const scale = properties.scale || 1;
@@ -216,7 +190,7 @@ export class ImageRenderer {
         const widthDeg = metersToDegreesLng(widthMeters, latitude);
         const heightDeg = metersToDegreesLat(heightMeters);
         // Rotation angle
-        const rotationRad = (((style.rotation || 0) + (properties.rotation || 0)) * Math.PI) / 180;
+        const rotationRad = ((properties.rotation || 0) * Math.PI) / 180;
         // Compute the quad vertices
         const vertices = computeQuadVertices(coord[0], coord[1], widthDeg, heightDeg, rotationRad);
         // Compute the bounding box

package/dist/view/renderers/line/line-types.d.ts

@@ -6,12 +6,12 @@
  */
 import type { Color, LineStyle } from '../../../shared/types/style.js';
 export type { Color, LineStyle };
-/** The style of a line drawn by {@link SDFLineRenderer}. */
+/** The style of a line drawn by the shared line renderer. */
 export interface SDFStrokeStyle {
     /** The line width in CSS px (at `createdZoom` when the options give one) */
     width: number;
     /** The color as `[r, g, b, a]`, each 0..1 */
-    color: Color;
+    color: [number, number, number, number];
     /** The opacity, 0..1, multiplied into the color */
     opacity: number;
     /** Solid, dashed or dotted */
@@ -27,7 +27,7 @@ export interface SDFStrokeStyle {
  * zoom and the latitude.
  */
 export type WidthUnit = 'pixels' | 'meters';
-/** The options of one {@link SDFLineRenderer.draw} call. */
+/** The options of one `draw` call of the shared line renderer. */
 export interface SDFStrokeOptions {
     /** The unit of the width. The renderer draws `width` in CSS px */
     widthUnit: WidthUnit;

package/dist/view/renderers/line/sdf-line.js

@@ -141,7 +141,9 @@ export class SDFLineRenderer {
         this.terrain = terrain;
         this.uniforms = new LineUniforms(gl);
         this.immCoordTexture = new ImmediateCoordTexture(gl);
-        this.projectionUniformManager = new ProjectionUniformManager(gl, { surface: true, terrain });
+        this.projectionUniformManager = new ProjectionUniformManager(gl, {
+            surface: true,
+        }).useTerrainState(terrain);
         this.initBuffers();
     }
     /**

package/dist/view/renderers/point/billboard-depth.js

@@ -17,7 +17,7 @@
  * Billboards are not drawn in a single place. Both the instanced billboard (point-instance) and
  * the per-point shapes (point-shape: triangle, star, icon, and the degenerate path for the
  * default circle) draw billboards. Wrapping only the instanced side leaves hand-drawn points as
- * half circles. A hand-drawn Point may be taken over by a registered CustomFeatureRenderer,
+ * half circles. A hand-drawn Point may be taken over by a registered FeatureTypeRenderer,
  * and then never goes through the instanced path at all. That is why this function is shared
  * by every renderer that draws billboards. SDF glyphs laid flat on the map plane (text that is
  * not painted into a ground quad) go through here for the same reason.

package/dist/view/renderers/point/point-instance.js

@@ -474,7 +474,7 @@ void main() {
             opacity: gl.getUniformLocation(program, 'u_opacity'),
             shape: gl.getUniformLocation(program, 'u_shape'),
         };
-        const projection = new ProjectionUniformManager(gl, { terrain: this.terrain });
+        const projection = new ProjectionUniformManager(gl).useTerrainState(this.terrain);
         projection.getLocations(program);
         const state = { locs, memo: createPointMemo(), projection };
         this.programStates.set(program, state);