@sakuzu/maplibre-gl-draw 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -6,6 +6,28 @@ the project follows semantic versioning.
 
 ## [Unreleased]
 
+## [2.1.1] - 2026-10-02
+
+Three fixes to the lines drawn on the terrain: their thickness on a
+high-DPI display, their thickness between the vertices, and dashed lines
+that sank into the ground. Nothing else changes.
+
+### Fixed
+
+- With the terrain on, a solid line or the outline of a polygon was drawn
+  half as thick on a high-DPI display (a device pixel ratio of 2) as
+  without the terrain, when its width follows the zoom. It is now as
+  thick with the terrain as without it.
+- With the terrain on and the camera pitched, a solid line looked like a
+  string of beads: it was thinner between its vertices than at them, and
+  the outline of a polygon was thinner along its edges. Its thickness is
+  now the same all along.
+- With the terrain on and the camera pitched, a dashed or dotted line,
+  and the dashed outline of a polygon, sank into the ground on the side
+  towards the camera and showed a jagged edge. They are now painted on
+  the ground like solid lines, with the same dashes as without the
+  terrain.
+
 ## [2.1.0] - 2026-10-01
 
 The standard UI package, the documentation site with twenty examples and
@@ -1146,5 +1168,8 @@ available from Kasika, Inc.
 - A read-only mode and an interaction lock.
 - Plugins, custom modes and custom feature types.
 
+[Unreleased]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.1...HEAD
+[2.1.1]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.1.0...v2.1.1
+[2.1.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v2.0.0...v2.1.0
 [2.0.0]: https://github.com/sakuzu/maplibre-gl-draw/compare/v1.0.0...v2.0.0
 [1.0.0]: https://github.com/sakuzu/maplibre-gl-draw/releases/tag/v1.0.0

package/dist/dataset/retained.js

@@ -324,8 +324,8 @@ export function isEmptyChunkBatches(batches) {
  * @param isExternallyRenderedPoint Predicate that returns whether a point is drawn by an external
  *   renderer (every point is pushed when omitted). A point for which it is true goes neither onto
  *   a batch nor into fallback
- * @param skipDrapedFills Do not push the solid polygons and lines (a frame where the analytic
- *   drape draws them as ground pixels)
+ * @param skipDrapedFills Do not push the polygons and lines, solid or dashed (a frame where the
+ *   analytic drape draws them as ground pixels)
  * @returns The batches that were built. When the GPU resources could not be created (the shaders
  *          are not initialized) null is returned and the caller rebuilds them on the next frame
  *
@@ -739,7 +739,7 @@ export function isDrapedGeometry(feature) {
  * @internal
  */
 export function collectFeature(feature, draft, styles, isExternallyRenderedPoint, skipDrapedFills = false) {
-    const skipSolid = skipDrapedFills && isDrapedGeometry(feature);
+    const skipDraped = skipDrapedFills && isDrapedGeometry(feature);
     switch (feature.type) {
         case 'Point':
             collectPoint(feature, coordinatesOf(feature), draft, styles, isExternallyRenderedPoint);
@@ -753,20 +753,20 @@ export function collectFeature(feature, draft, styles, isExternallyRenderedPoint
             return;
         case 'LineString':
         case 'Freehand':
-            collectLine(feature, coordinatesOf(feature), draft, styles, skipSolid);
+            collectLine(feature, coordinatesOf(feature), draft, styles, skipDraped);
             return;
         case 'MultiLineString':
             for (const coords of coordinatesOf(feature)) {
-                collectLine(feature, coords, draft, styles, skipSolid);
+                collectLine(feature, coords, draft, styles, skipDraped);
             }
             return;
         case 'Polygon':
-            collectPolygon(feature, coordinatesOf(feature), draft, styles, 0, skipSolid);
+            collectPolygon(feature, coordinatesOf(feature), draft, styles, 0, skipDraped);
             return;
         case 'MultiPolygon': {
             const parts = coordinatesOf(feature);
             for (let i = 0; i < parts.length; i++) {
-                collectPolygon(feature, parts[i], draft, styles, i, skipSolid);
+                collectPolygon(feature, parts[i], draft, styles, i, skipDraped);
             }
             return;
         }
@@ -827,18 +827,19 @@ function collectPoint(feature, coord, draft, styles, isExternallyRenderedPoint)
  * Pushes a line (a dashed line is sent to immediate mode because its CPU-side splitting depends
  * on the zoom)
  */
-function collectLine(feature, coords, draft, styles, skipSolid = false) {
+function collectLine(feature, coords, draft, styles, skipDraped = false) {
     if (coords.length < 2)
         return;
     const strokeStyle = styles.getLineStringStrokeStyle(feature);
+    // A line, solid or dashed, is drawn by the analytic drape as ground pixels (in this frame
+    // only)
+    if (skipDraped && strokeStyle.opacity > 0 && strokeStyle.width > 0)
+        return;
     if (strokeStyle.lineStyle !== 'solid') {
         // The path that goes to immediate mode is not multiplied by the factors of zoomScale
         pushFallback(draft, feature);
         return;
     }
-    // A solid line is drawn by the analytic drape as ground pixels (in this frame only)
-    if (skipSolid && strokeStyle.opacity > 0 && strokeStyle.width > 0)
-        return;
     const createdZoom = getCreatedZoom(feature);
     const target = createdZoom === undefined ? draft.fixedLines : draft.scaledLines;
     const item = toLineBatchItem(coords, feature.id, strokeStyle, createdZoom ?? FIXED_WIDTH_ZOOM);
@@ -856,23 +857,23 @@ function collectLine(feature, coords, draft, styles, skipSolid = false) {
  * A fill-only polygon is also pushed as an SDFPolygon without an outline (immediate mode uses
  * PolygonBatchRenderer, but the appearance of the fill is the same).
  */
-function collectPolygon(feature, rings, draft, styles, partIndex = 0, skipSolid = false) {
+function collectPolygon(feature, rings, draft, styles, partIndex = 0, skipDraped = false) {
     const outerRing = rings[0];
     if (!outerRing || outerRing.length < 3)
         return;
     const { fillColor, strokeStyle } = styles.getPolygonStyles(feature);
     const hasStroke = strokeStyle.opacity > 0 && strokeStyle.width > 0;
+    if (!hasStroke && fillColor[3] <= 0)
+        return;
+    // The fill and the outline, solid or dashed, are drawn by the analytic drape as ground pixels
+    // (in this frame only)
+    if (skipDraped)
+        return;
     if (hasStroke && strokeStyle.lineStyle !== 'solid') {
         // The path that goes to immediate mode is not multiplied by the factors of zoomScale
         pushFallback(draft, feature);
         return;
     }
-    if (!hasStroke && fillColor[3] <= 0)
-        return;
-    // The solid fill and outline are drawn by the analytic drape as ground pixels (in this frame
-    // only)
-    if (skipSolid)
-        return;
     const createdZoom = getCreatedZoom(feature);
     const target = createdZoom === undefined ? draft.fixedPolygons : draft.scaledPolygons;
     // A fixed line width is declared by the negative convention (the same reason as collectLine).

package/dist/dataset/selection.d.ts

@@ -6,8 +6,8 @@ import type { RetainedStyleResolver } from '../view/renderers/retained.js';
  * It is paired with `collectDataset` in `view/terrain/drape/pass.ts`. Changing only one of
  * them would show the selection highlight twice or in neither of them.
  *
- * A dashed outline does not go onto the drape (solving the accumulated distance along the outline
- * from the pixels is not implemented, so drawing it as a solid line would change the appearance).
- * For what does not go onto it, the immediate-mode path draws the highlight as before.
+ * Dashed lines and dashed outlines go onto the drape like solid ones (the drape lays the pattern
+ * out along the path). For what does not go onto it, the immediate-mode path draws the highlight
+ * as before.
  */
 export declare function isHandedToDrape(feature: Feature, styles: RetainedStyleResolver): boolean;

package/dist/dataset/selection.js

@@ -150,24 +150,20 @@ export function sameFeatureIds(a, b) {
  * It is paired with `collectDataset` in `view/terrain/drape/pass.ts`. Changing only one of
  * them would show the selection highlight twice or in neither of them.
  *
- * A dashed outline does not go onto the drape (solving the accumulated distance along the outline
- * from the pixels is not implemented, so drawing it as a solid line would change the appearance).
- * For what does not go onto it, the immediate-mode path draws the highlight as before.
+ * Dashed lines and dashed outlines go onto the drape like solid ones (the drape lays the pattern
+ * out along the path). For what does not go onto it, the immediate-mode path draws the highlight
+ * as before.
  */
 export function isHandedToDrape(feature, styles) {
     if (feature.type === 'Polygon' || feature.type === 'MultiPolygon') {
         const { fillColor, strokeStyle } = styles.getPolygonStyles(feature);
         const hasStroke = strokeStyle.opacity > 0 && strokeStyle.width > 0;
-        if (hasStroke && strokeStyle.lineStyle !== 'solid')
-            return false;
         return hasStroke || fillColor[3] > 0;
     }
     if (feature.type === 'LineString' ||
         feature.type === 'MultiLineString' ||
         feature.type === 'Freehand') {
         const strokeStyle = styles.getLineStringStrokeStyle(feature);
-        if (strokeStyle.lineStyle !== 'solid')
-            return false;
         return strokeStyle.opacity > 0 && strokeStyle.width > 0;
     }
     return false;

package/dist/dataset/table-source.js

@@ -329,7 +329,8 @@ export class TableSource {
     }
     collector(rows, context) {
         const table = this.table;
-        // Whether the solid lines and polygons of each child are left to the analytic drape
+        // Whether the lines and polygons (solid or dashed) of each child are left to the analytic
+        // drape
         const skipDraped = table.children.map((column) => context.skipDrapedFills === true && isDraped(column.type));
         const createdZoom = table.columns[CREATED_ZOOM_COLUMN];
         let next = 0;
@@ -497,18 +498,19 @@ class RowCollector {
      * A line over the coordinates `[start, end)` of the geometry column of the row (a dashed line
      * goes to immediate mode)
      */
-    line(row, column, start, end, createdZoom, skipSolid) {
+    line(row, column, start, end, createdZoom, skipDraped) {
         if (end - start < 2)
             return;
         const slot = this.slots.line(column.type, this.slots.ruleColorOf(row));
         const stroke = slot.stroke;
+        // A line, solid or dashed, is drawn by the analytic drape as ground pixels (in this frame
+        // only)
+        if (skipDraped && stroke.opacity > 0 && stroke.width > 0)
+            return;
         if (stroke.lineStyle !== 'solid') {
             this.fallback(row);
             return;
         }
-        // A solid line is drawn by the analytic drape as ground pixels (in this frame only)
-        if (skipSolid && stroke.opacity > 0 && stroke.width > 0)
-            return;
         const draft = this.draft;
         const fixed = createdZoom === undefined;
         let builder = fixed ? draft.packedFixedLines : draft.packedScaledLines;
@@ -528,21 +530,21 @@ class RowCollector {
      *
      * @param ringOffsets The offsets from a ring to its coordinates
      */
-    polygon(row, column, ringStart, ringEnd, ringOffsets, partIndex, createdZoom, skipSolid) {
+    polygon(row, column, ringStart, ringEnd, ringOffsets, partIndex, createdZoom, skipDraped) {
         if (ringEnd <= ringStart)
             return;
         if (ringOffsets[ringStart + 1] - ringOffsets[ringStart] < 3)
             return;
         const slot = this.slots.polygon(column.type, this.slots.ruleColorOf(row));
+        if (!slot.hasStroke && slot.fillColor[3] <= 0)
+            return;
+        // The fill and the outline, solid or dashed, are drawn by the analytic drape as ground pixels
+        if (skipDraped)
+            return;
         if (slot.hasStroke && slot.strokeStyle.lineStyle !== 'solid') {
             this.fallback(row);
             return;
         }
-        if (!slot.hasStroke && slot.fillColor[3] <= 0)
-            return;
-        // The solid fill and outline are drawn by the analytic drape as ground pixels
-        if (skipSolid)
-            return;
         const rings = new Array(ringEnd - ringStart);
         for (let r = ringStart; r < ringEnd; r++) {
             rings[r - ringStart] = column.positions(ringOffsets[r], ringOffsets[r + 1]);

package/dist/view/layer/custom-layer.js

@@ -1,6 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
-import { resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
+import { resolveContentPixelRatio, resolvePixelRatio } from '../../shared/utils/pixel-ratio.js';
 import { updateGlobeSubdivision } from '../globe-subdivision.js';
 import { beginRenderFrame } from '../shaders/frame.js';
 import { installAnchorProjector, uninstallAnchorProjector } from '../terrain/anchor.js';
@@ -350,6 +350,7 @@ export function createCustomLayer(deps) {
             zoom,
             rawZoom,
             dpr,
+            contentDpr: resolveContentPixelRatio(pixelRatio),
             terrainState,
             retainedAvailable: engine.storeRetainedCache !== null,
             overlayRenderers: dynamicOverlayRenderers,

package/dist/view/layer/drape-planner.d.ts

@@ -119,7 +119,10 @@ export interface DrapeFrameInput {
     resolveStyles: () => RetainedStyleResolver;
     /** The terrain of the map (null when the terrain state of the frame is inactive) */
     mapTerrain: MapTerrain;
+    /** The rendering pixel ratio, for widths fixed in screen pixels (the rendering scale included) */
     dpr: number;
+    /** The rendering pixel ratio for widths that follow the zoom (the rendering scale not applied) */
+    contentDpr: number;
     /** The style zoom (what the rendering reads) */
     zoom: number;
     /** The real zoom of the camera (the band is decided with it) */

package/dist/view/layer/drape-planner.js

@@ -281,7 +281,7 @@ export class DrapePlanner {
      */
     planFrame(input) {
         const { terrain } = this.deps;
-        const { mapTerrain, dpr, zoom, rawZoom } = input;
+        const { mapTerrain, dpr, contentDpr, zoom, rawZoom } = input;
         let drapeUsable = false;
         this.pendingWork = false;
         // The analytic drape is used even in a wide band when building the index is light. Cutting
@@ -297,10 +297,10 @@ export class DrapePlanner {
         // cost has to be known first). The collected result is folded behind a key, so there is no
         // cost as long as the contents do not change
         if (mapTerrain !== null)
-            this.collect(input.resolveStyles, dpr, zoom);
+            this.collect(input.resolveStyles, dpr, contentDpr, zoom);
         const analyticBand = rawZoom > TERRAIN_ANALYTIC_MIN_ZOOM || this.lightEnough;
         if (mapTerrain !== null && analyticBand) {
-            drapeUsable = this.prepare(input.gl, mapTerrain, input.resolveStyles, dpr, zoom);
+            drapeUsable = this.prepare(input.gl, mapTerrain, input.resolveStyles, dpr, contentDpr, zoom);
         }
         else if (mapTerrain !== null) {
             // A wide band is handled by the vertex displacement path (no index is built either)
@@ -447,6 +447,7 @@ export class DrapePlanner {
                             cellOffset: item.plan.cellOffset,
                             grid: item.plan.grid,
                             groundMeters: item.plan.groundMeters,
+                            tileZ: item.plan.tile.z,
                             edges,
                         },
                         projection: item.projection,
@@ -500,12 +501,13 @@ export class DrapePlanner {
      * "polygons are not drawn at low zooms"). The collected result is folded behind a key, so from
      * the second time on nothing happens as long as the contents do not change.
      */
-    collect(resolveStyles, dpr, zoom) {
+    collect(resolveStyles, dpr, contentDpr, zoom) {
         const { store, datasets: manager } = this.deps;
         const datasets = manager?.listInternal() ?? [];
         const key = [
             this.revision,
             dpr,
+            contentDpr,
             marginZoom(zoom),
             store.getLayerOrder().join('/'),
             datasets.map((c) => `${c.id}:${c.drapeRevision}:${c.visible ? 1 : 0}:${c.order}`).join(','),
@@ -513,7 +515,7 @@ export class DrapePlanner {
         ].join('|');
         let collected = this.collected;
         if (key !== this.collectKey || !collected) {
-            collected = collectDrapeElements(store, resolveStyles(), dpr, datasets);
+            collected = collectDrapeElements(store, resolveStyles(), dpr, contentDpr, datasets);
             this.collectKey = key;
             this.collected = collected;
             this.lightEnough = collected.edgeCount <= DRAPE_WIDE_EDGE_BUDGET;
@@ -529,14 +531,14 @@ export class DrapePlanner {
      * not collected again just because the view moved (collecting them again would mean rebuilding
      * the whole index).
      */
-    prepare(gl, terrain, resolveStyles, dpr, zoom) {
+    prepare(gl, terrain, resolveStyles, dpr, contentDpr, zoom) {
         const { map, datasets: manager } = this.deps;
         const context = this.deps.terrain;
         const tiles = getRenderableTerrainTiles(terrain);
         if (tiles.length === 0)
             return false;
         const datasets = manager?.listInternal() ?? [];
-        const collected = this.collect(resolveStyles, dpr, zoom);
+        const collected = this.collect(resolveStyles, dpr, contentDpr, zoom);
         // The factors per source (which follow the zoom) are rewritten every frame, because baking
         // them into the elements would mean rebuilding the index on every zoom movement
         const drapeSourceFactors = this.sourceFactors;

package/dist/view/layer/frame-render.js

@@ -107,9 +107,8 @@ function drawDrapeSegment(deps, f, index) {
         drawSegment(paintCursor, to, last);
     }
     f.restoreBlendState();
-    // Back to the depth state of the layer rendering. What the drape could not paint (dashed
-    // lines, polygons with a dashed outline, the geometry being drawn, the features of
-    // extensions) is drawn next, by the vertex displacement path, and the terrain must hide it
+    // Back to the depth state of the layer rendering. What the drape could not paint (the
+    // geometry being drawn, the features of extensions) is drawn next, by the vertex displacement path, and the terrain must hide it
     // as it does in a frame without the drape. Symbols switch the depth test off themselves.
     applySegmentDepthState(gl, deps.terrainContext, f);
 }

package/dist/view/layer/frame-state.d.ts

@@ -111,7 +111,10 @@ export interface FrameBuildInput {
     zoom: number;
     /** The real zoom of the camera */
     rawZoom: number;
+    /** The rendering pixel ratio, for sizes fixed in screen pixels (the rendering scale included) */
     dpr: number;
+    /** The rendering pixel ratio for sizes that follow the zoom (the rendering scale not applied) */
+    contentDpr: number;
     /** The terrain state of the frame (already set on the terrain context) */
     terrainState: TerrainRenderState;
     /** Whether the retained batches of the Store rendering exist */

package/dist/view/layer/frame-state.js

@@ -139,7 +139,7 @@ function sameCameraPosition(a, b) {
  */
 export function buildFrameState(input) {
     const { gl, renderers: r, map, store, terrainContext, drape, renderOptions } = input;
-    const { zoom, rawZoom, dpr, terrainState } = input;
+    const { zoom, rawZoom, dpr, contentDpr, terrainState } = input;
     const { shaderData, defaultProjectionData } = renderOptions;
     const mapTerrain = terrainState.active ? getMapTerrain(map) : null;
     // Shader initialization
@@ -193,6 +193,7 @@ export function buildFrameState(input) {
         resolveStyles: () => r.batchManager.getRetainedRenderers()?.styles ?? r.featureDrawer,
         mapTerrain,
         dpr,
+        contentDpr,
         zoom,
         rawZoom,
     });

package/dist/view/layer/gl-state.d.ts

@@ -34,9 +34,8 @@ export declare function applySegmentGlState(gl: WebGL2RenderingContext, terrainC
  * `applySegmentGlState` sets it at the start of a slot, and the drape of the segment, which
  * changes the depth function and the offset, hands it back with this before the layers are
  * drawn. The layers are therefore drawn in one depth state whether or not the drape was used.
- * What the drape cannot paint (dashed lines, polygons with a dashed outline, the geometry being
- * drawn, the features of extensions, the datasets not handed over to it) is
- * drawn after it by the vertex displacement path and must be hidden by the terrain in the same
+ * What the drape cannot paint (the geometry being drawn, the features of extensions, the datasets
+ * not handed over to it) is drawn after it by the vertex displacement path and must be hidden by the terrain in the same
  * way. Symbols switch the depth test off themselves (`drawBillboardsWithoutDepth`).
  */
 export declare function applySegmentDepthState(gl: WebGL2RenderingContext, terrainContext: TerrainContext, f: Pick<SegmentGlFrame, 'terrainState' | 'wideFallback'>): void;

package/dist/view/layer/gl-state.js

@@ -33,9 +33,8 @@ export function applySegmentGlState(gl, terrainContext, f) {
  * `applySegmentGlState` sets it at the start of a slot, and the drape of the segment, which
  * changes the depth function and the offset, hands it back with this before the layers are
  * drawn. The layers are therefore drawn in one depth state whether or not the drape was used.
- * What the drape cannot paint (dashed lines, polygons with a dashed outline, the geometry being
- * drawn, the features of extensions, the datasets not handed over to it) is
- * drawn after it by the vertex displacement path and must be hidden by the terrain in the same
+ * What the drape cannot paint (the geometry being drawn, the features of extensions, the datasets
+ * not handed over to it) is drawn after it by the vertex displacement path and must be hidden by the terrain in the same
  * way. Symbols switch the depth test off themselves (`drawBillboardsWithoutDepth`).
  */
 export function applySegmentDepthState(gl, terrainContext, f) {

package/dist/view/renderers/line/dash.d.ts

@@ -18,6 +18,33 @@ export interface DashSegment {
  * @returns The dashes, in order along the line. An empty array for fewer than 2 positions
  */
 export declare function splitIntoDashes(coords: Coordinate[], dashLength: number, gapLength: number, zoom: number): DashSegment[];
+/**
+ * The coefficients of a dash pattern
+ *
+ * The dash is `max(a, b * w)` and the gap `max(w + 1, c * w)` for a line `w` pixels wide (the
+ * smallest gap, `w + 1`, keeps the round caps of two dashes apart). This table is the one
+ * source of the patterns: the subdividing path computes them here on the CPU, and the analytic
+ * drape hands the same coefficients to its shader, which evaluates the same two formulas.
+ */
+export interface DashCoefficients {
+    /** The shortest dash (px) */
+    readonly a: number;
+    /** The dash per pixel of width */
+    readonly b: number;
+    /** The gap per pixel of width */
+    readonly c: number;
+}
+/**
+ * The coefficients of each line style that is not solid
+ *
+ * Dashed: dashes 4 times the width (12 px at least) and gaps twice the width. Dotted: short,
+ * nearly round dots and gaps about the width.
+ */
+export declare const DASH_COEFFICIENTS: Readonly<Record<'dashed' | 'dotted', DashCoefficients>>;
+/**
+ * The coefficients of a line style, or null for a solid line
+ */
+export declare function dashCoefficientsOf(lineStyle: 'solid' | 'dashed' | 'dotted'): DashCoefficients | null;
 /**
  * Returns the dash and gap lengths in px that suit a line style at a line width.
  *

package/dist/view/renderers/line/dash.js

@@ -126,6 +126,22 @@ export function splitIntoDashes(coords, dashLength, gapLength, zoom) {
     }
     return segments;
 }
+/**
+ * The coefficients of each line style that is not solid
+ *
+ * Dashed: dashes 4 times the width (12 px at least) and gaps twice the width. Dotted: short,
+ * nearly round dots and gaps about the width.
+ */
+export const DASH_COEFFICIENTS = {
+    dashed: { a: 12, b: 4, c: 2 },
+    dotted: { a: 1, b: 0.5, c: 1.2 },
+};
+/**
+ * The coefficients of a line style, or null for a solid line
+ */
+export function dashCoefficientsOf(lineStyle) {
+    return lineStyle === 'dashed' || lineStyle === 'dotted' ? DASH_COEFFICIENTS[lineStyle] : null;
+}
 /**
  * Returns the dash and gap lengths in px that suit a line style at a line width.
  *
@@ -137,16 +153,11 @@ export function splitIntoDashes(coords, dashLength, gapLength, zoom) {
  * @returns [dashLength, gapLength], or null (for a solid line)
  */
 export function getStrokeDashPattern(lineStyle, strokeWidth = 2) {
-    // The minimum gap at which round caps do not overlap
-    const minGap = strokeWidth + 1;
-    switch (lineStyle) {
-        case 'dashed':
-            // Dashed: longer dashes (4x the line width), moderate gaps (2x the line width)
-            return [Math.max(12, strokeWidth * 4), Math.max(minGap, strokeWidth * 2)];
-        case 'dotted':
-            // Dotted: short dots (nearly round), short gaps (about the line width)
-            return [Math.max(1, strokeWidth * 0.5), Math.max(minGap, strokeWidth * 1.2)];
-        default:
-            return null;
-    }
+    const coefficients = dashCoefficientsOf(lineStyle);
+    if (!coefficients)
+        return null;
+    return [
+        Math.max(coefficients.a, coefficients.b * strokeWidth),
+        Math.max(strokeWidth + 1, coefficients.c * strokeWidth),
+    ];
 }

package/dist/view/terrain/drape/bin-store.d.ts

@@ -19,16 +19,23 @@
  */
 import type { DrapeElement, DrapeQuadBreak, DrapeTile, TileBins } from './binning.js';
 /** The number of style texels per element */
-export declare const DRAPE_STYLE_TEXELS = 4;
+export declare const DRAPE_STYLE_TEXELS = 5;
 /**
  * The index of the texel the selection highlight uses within the style table
  *
  * 0 = fill, 1 = stroke, 2 = specifications (width, kind, source, reference zoom), 3 =
- * selection. The selection alone is put in a separate texel so that the index (the binning)
+ * selection, 4 = the dash pattern (`DRAPE_DASH_TEXEL`). The selection alone is put in a separate texel so that the index (the binning)
  * need not be touched at all when the selection changes. Mixing it into the same texel as the
  * color or the width would mean rebuilding the other values too on every rewrite.
  */
 export declare const DRAPE_SELECTION_TEXEL = 3;
+/**
+ * The index of the texel of the dash pattern within the style table
+ *
+ * (a, b, c, pixel ratio): the coefficients of the pattern (`DrapeDash` in `binning.ts`) and the
+ * physical pixels of the width per CSS pixel. A pixel ratio of 0 marks a solid outline.
+ */
+export declare const DRAPE_DASH_TEXEL = 4;
 /** The upper bound on the number of edge texels (16 bytes per texel, so 1M is 16MB) */
 export declare const DRAPE_MAX_EDGE_TEXELS = 1048576;
 /** The key of a tile */
@@ -57,6 +64,8 @@ export declare class DrapePackBuilder {
      * transferred) */
     readonly id: number;
     edges: Float32Array<ArrayBuffer>;
+    /** Where each edge starts along its path (one number per edge, in step with `edges`) */
+    edgeStarts: Float32Array<ArrayBuffer>;
     edgeCount: number;
     runs: Float32Array<ArrayBuffer>;
     runCount: number;

package/dist/view/terrain/drape/bin-store.js

@@ -2,16 +2,23 @@
 // SPDX-License-Identifier: AGPL-3.0-only
 import { binTile, drapeCellWorkBudget } from './binning.js';
 /** The number of style texels per element */
-export const DRAPE_STYLE_TEXELS = 4;
+export const DRAPE_STYLE_TEXELS = 5;
 /**
  * The index of the texel the selection highlight uses within the style table
  *
  * 0 = fill, 1 = stroke, 2 = specifications (width, kind, source, reference zoom), 3 =
- * selection. The selection alone is put in a separate texel so that the index (the binning)
+ * selection, 4 = the dash pattern (`DRAPE_DASH_TEXEL`). The selection alone is put in a separate texel so that the index (the binning)
  * need not be touched at all when the selection changes. Mixing it into the same texel as the
  * color or the width would mean rebuilding the other values too on every rewrite.
  */
 export const DRAPE_SELECTION_TEXEL = 3;
+/**
+ * The index of the texel of the dash pattern within the style table
+ *
+ * (a, b, c, pixel ratio): the coefficients of the pattern (`DrapeDash` in `binning.ts`) and the
+ * physical pixels of the width per CSS pixel. A pixel ratio of 0 marks a solid outline.
+ */
+export const DRAPE_DASH_TEXEL = 4;
 /** The upper bound on the tiles retained (beyond it, those outside the view are dropped and
  * the arrays are repacked) */
 const MAX_CACHED_TILES = 96;
@@ -43,6 +50,13 @@ export class DrapePackBuilder {
             writable: true,
             value: new Float32Array(4 * 4096)
         });
+        /** Where each edge starts along its path (one number per edge, in step with `edges`) */
+        Object.defineProperty(this, "edgeStarts", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: new Float32Array(4096)
+        });
         Object.defineProperty(this, "edgeCount", {
             enumerable: true,
             configurable: true,
@@ -125,6 +139,14 @@ export class DrapePackBuilder {
             styles[at + 9] = element.kind;
             styles[at + 10] = element.source;
             styles[at + 11] = element.widthZoom;
+            const dash = element.dash;
+            if (dash) {
+                const dashAt = at + DRAPE_DASH_TEXEL * 4;
+                styles[dashAt] = dash.a;
+                styles[dashAt + 1] = dash.b;
+                styles[dashAt + 2] = dash.c;
+                styles[dashAt + 3] = dash.pixelRatio;
+            }
         }
         this.styles = styles;
         this.elementCount = elements.length;
@@ -167,6 +189,8 @@ export class DrapePackBuilder {
         const edgeTexels = bins.edges.length / 4;
         this.edges = ensureCapacity(this.edges, (this.edgeCount + edgeTexels) * 4);
         this.edges.set(bins.edges, edgeBase * 4);
+        this.edgeStarts = ensureCapacity(this.edgeStarts, this.edgeCount + edgeTexels);
+        this.edgeStarts.set(bins.edgeStarts, edgeBase);
         this.edgeCount += edgeTexels;
         const runTexels = bins.runs.length / 4;
         this.runs = ensureCapacity(this.runs, (this.runCount + runTexels) * 4);

package/dist/view/terrain/drape/binning.d.ts

@@ -109,6 +109,26 @@ export declare function drapeCellWorkBudget(tileCount: number): number;
 export declare const DRAPE_LOD_TRIGGER = 16000;
 /** The color (0..1, with the opacity already folded in) */
 export type DrapeColor = readonly [number, number, number, number];
+/**
+ * The dash pattern of an outline that is not solid
+ *
+ * The coefficients are those of `DASH_COEFFICIENTS` in `view/renderers/line/dash.ts`: the shader
+ * works the dash and the gap out of the width the line has in the frame, with the same formulas
+ * as the subdividing path.
+ */
+export interface DrapeDash {
+    /** The shortest dash (CSS px) */
+    readonly a: number;
+    /** The dash per pixel of width */
+    readonly b: number;
+    /** The gap per pixel of width */
+    readonly c: number;
+    /**
+     * The physical pixels of `strokeWidthPx` per CSS pixel (the pixel ratio the width was
+     * resolved with). The pattern is measured in CSS pixels, so the shader divides it back out
+     */
+    readonly pixelRatio: number;
+}
 /**
  * An element handed to the analytic drape (a feature of the Store and a feature of a
  * dataset have the same shape)
@@ -131,6 +151,13 @@ export interface DrapeElement {
     readonly stroke: DrapeColor;
     /** The width of the outline (physical pixels). 0 means the outline is not drawn */
     readonly strokeWidthPx: number;
+    /**
+     * The dash pattern of the outline (absent or null for a solid outline)
+     *
+     * Only an element with a pattern has the lengths along its paths worked out and binned next
+     * to its edges (`TileBins.edgeStarts`).
+     */
+    readonly dash?: DrapeDash | null;
     /**
      * The origin of the coefficients (0 = the Store, 1 and above = datasets)
      *
@@ -201,6 +228,11 @@ export interface TileBins {
     readonly runs: Float32Array;
     /** (x0, y0, x1, y1) per edge. In-tile 0..1 coordinates */
     readonly edges: Float32Array;
+    /**
+     * Where each edge starts along its path, one per edge (Mercator units, the 0..1 world; not
+     * in-tile). 0 for an edge of an element without a dash pattern
+     */
+    readonly edgeStarts: Float32Array;
     /** Whether a limit was exceeded (if it was, the caller degrades) */
     readonly overflow: boolean;
     /** The number of cells truncated for exceeding the budget (a local degradation. Diagnostic) */