@sakuzu/maplibre-gl-draw 2.0.0 → 2.1.1

package/dist/api/impl/options.js

@@ -656,9 +656,10 @@ function assignInPlace(target, source) {
  * @param options - The options the instance was created with
  * @param setExternalEntry - Replaces the function that tells the entries from outside the
  *   document
+ * @param onChanged - Receives the options after and before an update that changed them
  * @internal
  */
-export function createOptions(engine, options, setExternalEntry) {
+export function createOptions(engine, options, setExternalEntry, onChanged = () => { }) {
     const { context, map, customLayer } = engine;
     let current = runtimePart(options);
     const apply = (patch) => {
@@ -758,39 +759,44 @@ export function createOptions(engine, options, setExternalEntry) {
         else if (redraw)
             map.triggerRepaint();
     };
+    const get = () => {
+        const { snapService, trace, topology, pixelRatioSource, renderingConfig } = context;
+        const snap = snapService.getOptions();
+        const values = {
+            ...current,
+            scaleWithZoom: context.options.scaleWithZoom,
+            clickTolerance: context.options.clickTolerance,
+            dragThreshold: context.options.dragThreshold,
+            snapping: {
+                ...current.snapping,
+                enabled: snap.enabled,
+                tolerancePx: snap.tolerancePx,
+                disableKey: snap.disableKey,
+                kinds: { ...snap.kinds },
+                datasets: snap.datasets,
+                guideStepDegrees: snap.guideStepDegrees,
+            },
+            tracing: { enabled: trace.enabled },
+            topology: { sharedVertexDrag: topology.sharedVertexDrag },
+            rendering: {
+                ...current.rendering,
+                renderScale: pixelRatioSource.getScaleFactor(),
+                cacheGeometry: renderingConfig.storeRetained !== false,
+                timeSlicing: renderingConfig.timeSlicing !== false,
+            },
+        };
+        return structuredCloneOptions(values);
+    };
     return {
-        get() {
-            const { snapService, trace, topology, pixelRatioSource, renderingConfig } = context;
-            const snap = snapService.getOptions();
-            const values = {
-                ...current,
-                scaleWithZoom: context.options.scaleWithZoom,
-                clickTolerance: context.options.clickTolerance,
-                dragThreshold: context.options.dragThreshold,
-                snapping: {
-                    ...current.snapping,
-                    enabled: snap.enabled,
-                    tolerancePx: snap.tolerancePx,
-                    disableKey: snap.disableKey,
-                    kinds: { ...snap.kinds },
-                    datasets: snap.datasets,
-                    guideStepDegrees: snap.guideStepDegrees,
-                },
-                tracing: { enabled: trace.enabled },
-                topology: { sharedVertexDrag: topology.sharedVertexDrag },
-                rendering: {
-                    ...current.rendering,
-                    renderScale: pixelRatioSource.getScaleFactor(),
-                    cacheGeometry: renderingConfig.storeRetained !== false,
-                    timeSlicing: renderingConfig.timeSlicing !== false,
-                },
-            };
-            return structuredCloneOptions(values);
-        },
+        get,
         update(patch) {
             checkPatch(patch);
+            const previous = get();
             current = mergeOptions(current, patch);
             apply(patch);
+            const next = get();
+            if (!sameOptions(previous, next))
+                onChanged({ options: next, previous });
         },
         getStyle() {
             return current.style;
@@ -809,6 +815,29 @@ export function createOptions(engine, options, setExternalEntry) {
         },
     };
 }
+/**
+ * Whether two copies of the options hold the same values: plain objects and arrays are
+ * compared item by item, a function by identity, and a key given as `undefined` is the same
+ * as a key left out
+ */
+function sameOptions(a, b) {
+    if (Object.is(a, b))
+        return true;
+    if (Array.isArray(a) || Array.isArray(b)) {
+        return (Array.isArray(a) &&
+            Array.isArray(b) &&
+            a.length === b.length &&
+            a.every((item, i) => sameOptions(item, b[i])));
+    }
+    if (!isRecord(a) || !isRecord(b))
+        return false;
+    const keys = new Set([...Object.keys(a), ...Object.keys(b)]);
+    for (const key of keys) {
+        if (!sameOptions(a[key], b[key]))
+            return false;
+    }
+    return true;
+}
 /** A copy of the options that shares the functions and nothing else */
 function structuredCloneOptions(value) {
     if (Array.isArray(value))

package/dist/dataset/dataset.js

@@ -347,6 +347,9 @@ export class DatasetImpl {
     getBaseStyle() {
         return this.styler.base;
     }
+    getStyleRule() {
+        return this.styler.rule;
+    }
     getFeatures() {
         return this.source.features();
     }

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/dataset/types.d.ts

@@ -306,6 +306,8 @@ export interface Dataset {
     setTable(table: Table | PreparedTable): void;
     /** Replaces the style rule (undefined clears it) */
     setStyleRule(rule: StyleRule | undefined): void;
+    /** The style rule in effect (undefined when not set) */
+    getStyleRule(): StyleRule | undefined;
     /**
      * Replaces the zoom-dependent drawing factors (null clears them)
      *

package/dist/dispatcher/input-router.js

@@ -39,7 +39,8 @@ function firstTentativeCoordinate(tentative) {
  *   little beyond ±180; the rendering and the export deal with that
  * - A drag moves every coordinate of its events by the one shift decided from where it started
  *   (`dragStartLngLat`), so the distance dragged never jumps by 360 degrees when the pointer
- *   crosses the antimeridian during the drag
+ *   crosses the antimeridian during the drag. The normalizer gives the positions of a press
+ *   continuously (the globe's jump from 180 to -180 included), so one shift keeps them so
  *
  * Away from the antimeridian, on the main copy of the world, nothing changes and the event is
  * returned as it is.

package/dist/dispatcher/normalizer.js

@@ -1,5 +1,6 @@
 // SPDX-FileCopyrightText: 2026 SAKAIDA Atsushi
 // SPDX-License-Identifier: AGPL-3.0-only
+import { nearestLongitude } from '../shared/math/longitude.js';
 import { getModifiers } from './types.js';
 const DEFAULT_OPTIONS = {
     dragThreshold: 3,
@@ -51,6 +52,20 @@ function createProfiles(opts) {
         },
     };
 }
+/**
+ * The position of the pointer, on the copy of the world nearest to where it was last
+ *
+ * The flat map gives the pointer unwrapped longitudes, which run on past 180 as it crosses the
+ * antimeridian. The globe gives them in [-180, 180], so they jump by 360 degrees there: a
+ * freehand stroke drawn from them went once round the world along the parallel, and the shift
+ * of a feature dragged across jumped by a turn. Within a press each position is therefore
+ * taken on the copy nearest to the last one, so the pointer moves on continuously, as on the
+ * flat map. A position within 180 degrees of the last one is returned unchanged.
+ */
+function continuing(lngLat, last) {
+    const lng = nearestLongitude(lngLat.lng, last.lng);
+    return lng === lngLat.lng ? lngLat : { lng, lat: lngLat.lat };
+}
 /**
  * Whether a mouse event is the compatibility event a browser emits for a touch
  */
@@ -184,7 +199,8 @@ export function createInputNormalizer(map, options = {}) {
      *
      * Once the press has become a drag it stays one until it is released.
      */
-    function movePress(current, point, lngLat, originalEvent) {
+    function movePress(current, point, rawLngLat, originalEvent) {
+        const lngLat = continuing(rawLngLat, current.lastLngLat);
         current.lastPoint = point;
         current.lastLngLat = lngLat;
         current.lastEvent = originalEvent;
@@ -204,7 +220,8 @@ export function createInputNormalizer(map, options = {}) {
      * Releases the press: dragend (when dragging) and mouseup. Returns whether the release
      * is a click candidate.
      */
-    function releasePress(current, point, lngLat, originalEvent) {
+    function releasePress(current, point, rawLngLat, originalEvent) {
+        const lngLat = continuing(rawLngLat, current.lastLngLat);
         clearLongPress(current);
         press = null;
         if (current.dragging) {

package/dist/geometry/geojson.d.ts

@@ -23,6 +23,10 @@ export type LineInput = LineString | MultiLineString | {
  * Returns the geometry of a geometry, or of anything that carries one in a `geometry` field
  * (a GeoJSON feature, a feature of the drawing)
  *
+ * A value whose `geometry` member is a geometry is read as a feature first, whatever its own
+ * `type` says: a feature of the drawing names its feature type there (`'Polygon'`,
+ * `'Circle'`, `'Freehand'` and so on), which is not the type of a geometry it is.
+ *
  * @throws GeometryError (`invalid-input`) for a value that is neither, and for a feature
  *   without a geometry
  */

package/dist/geometry/geojson.js

@@ -24,6 +24,10 @@ function isPosition(value) {
  * Returns the geometry of a geometry, or of anything that carries one in a `geometry` field
  * (a GeoJSON feature, a feature of the drawing)
  *
+ * A value whose `geometry` member is a geometry is read as a feature first, whatever its own
+ * `type` says: a feature of the drawing names its feature type there (`'Polygon'`,
+ * `'Circle'`, `'Freehand'` and so on), which is not the type of a geometry it is.
+ *
  * @throws GeometryError (`invalid-input`) for a value that is neither, and for a feature
  *   without a geometry
  */
@@ -32,26 +36,31 @@ export function geometryOf(input, operation) {
     if (!isObject(value)) {
         throw invalidInput(operation, 'the input is not a geometry or a feature');
     }
-    if (!isGeometryType(value.type)) {
-        if (!('geometry' in value) && value.type !== 'Feature') {
-            throw invalidInput(operation, 'the input is not a geometry or a feature');
-        }
+    if ('geometry' in value || value.type === 'Feature') {
         const geometry = value.geometry;
-        if (!isObject(geometry) || !isGeometryType(geometry.type)) {
+        if (isObject(geometry) && isGeometryType(geometry.type)) {
+            return geometryOf(geometry, operation);
+        }
+        if (!isGeometry(value)) {
             throw invalidInput(operation, 'the feature has no geometry');
         }
-        return geometryOf(geometry, operation);
     }
-    if (value.type === 'GeometryCollection') {
-        if (!Array.isArray(value.geometries)) {
-            throw invalidInput(operation, 'the geometry collection has no geometries');
-        }
+    if (value.type === 'GeometryCollection' && !Array.isArray(value.geometries)) {
+        throw invalidInput(operation, 'the geometry collection has no geometries');
     }
-    else if (!Array.isArray(value.coordinates)) {
+    if (!isGeometry(value)) {
         throw invalidInput(operation, 'the input is not a geometry or a feature');
     }
     return value;
 }
+/** Whether an object has the type of a geometry and the member that type carries */
+function isGeometry(value) {
+    if (!isGeometryType(value.type))
+        return false;
+    if (value.type === 'GeometryCollection')
+        return Array.isArray(value.geometries);
+    return Array.isArray(value.coordinates);
+}
 /** Whether a value names a GeoJSON geometry type */
 function isGeometryType(type) {
     return typeof type === 'string' && (COORDINATE_TYPES.has(type) || type === 'GeometryCollection');

package/dist/index.d.ts

@@ -17,6 +17,20 @@
  * });
  * ```
  *
+ * Where to find things: every resource of {@link Draw} is a field with its own methods.
+ *
+ * - `draw.features` (create, update, delete, move, union, split): {@link FeaturesCollection}
+ * - `draw.layers` (create, update, reorder, setActive): {@link LayersCollection}
+ * - `draw.groups` (create, update, move): {@link GroupsCollection}
+ * - `draw.datasets` (add, remove, move): {@link DatasetsCollection}
+ * - `draw.selection` (set, add, clear, delete, group): {@link SelectionResource}
+ * - `draw.vertexSelection` (set, clear, delete): {@link VertexSelectionResource}
+ * - `draw.metadata` and `draw.options` (get, update): {@link MetadataResource}, {@link OptionsResource}
+ * - `draw.document` (load, toJSON, toGeoJSON): {@link DocumentResource}
+ * - `draw.drawing` (addVertex, finish, cancel): {@link DrawingResource}
+ * - `draw.extensions` (plugins, modes, feature types): {@link ExtensionsCollections}
+ * - events with `draw.on`: {@link DrawEvents}; errors: {@link DrawError}
+ *
  * Read next: [getting started](https://sakuzu.github.io/maplibre-gl-draw/getting-started),
  * then the guides for [drawing](https://sakuzu.github.io/maplibre-gl-draw/guides/drawing) and
  * [saving and loading](https://sakuzu.github.io/maplibre-gl-draw/guides/save-load). The

package/dist/view/layer/attach.d.ts

@@ -5,13 +5,19 @@ import type { CustomLayerInterface, Map as MapLibreMap } from 'maplibre-gl';
  *
  * One rule covers every timing: the slots are added whenever the style accepts layers and a slot
  * is missing. It is checked once now (for a map whose style is already parsed, even while tiles
- * are still loading) and again on every `styledata` event. maplibre fires `styledata` when a
- * style finishes loading (before `style.load` and `load`) and after changes to the style, so the
- * slots are also restored after `setStyle`, including a diffed `setStyle` that drops layers it
- * does not know. A slot that is already on the map is never added twice.
+ * are still loading) and again on every `styledata` and `style.load` event. maplibre fires
+ * `styledata` when a style finishes loading (before `style.load` and `load`) and after changes to
+ * the style, so the slots are also restored after a full `setStyle`. A slot that is already on
+ * the map is never added twice.
  *
  * The slots are added in order from the first (the backmost), which lines them up in the same
- * order in maplibre (layers added later are on top).
+ * order in maplibre (layers added later are on top). A slot missing while a later one is on the
+ * map is added just behind it.
+ *
+ * On `style.load` the slots are also put back on top of the map (see `placeSlotsOnTop`). maplibre
+ * fires it when a style is loaded and at the end of a diffed `setStyle` that changed something,
+ * and only then: a layer the host adds or moves itself fires `styledata` alone, so a layer the
+ * host put above the drawing stays there until the style is changed.
  *
  * @param map The map
  * @param getSlotLayers Returns the current list of slots (first = backmost)

package/dist/view/layer/attach.js

@@ -11,19 +11,82 @@
 function styleAcceptsLayers(map) {
     return map.style?._loaded === true;
 }
+/**
+ * Puts the slots back on top of the map after a style change
+ *
+ * The slots, and the native layers the host placed between them (the separators), form one
+ * block that belongs at the top of the map, with the slots in their order (the first is the
+ * backmost). A full `setStyle` gives that by itself: the old layers are gone and the slots are
+ * added again on top. A diffed `setStyle` does not: maplibre's `Style.serialize()` leaves custom
+ * layers out, so the diff neither removes nor adds the slots, and the layers of the new style are
+ * added above them, which hides the drawing under the basemap.
+ *
+ * Nothing is moved when the block is already in place, so the `styledata` that follows a move
+ * finds nothing to do. When it is not, the block is moved to the top: each slot, followed by the
+ * native layers that sat just above it (up to the next slot), keeps its neighbours. The layers
+ * above the frontmost slot are taken as part of the new style and stay below the block.
+ *
+ * @param map The map
+ * @param slotLayers The slots (first = backmost)
+ */
+function placeSlotsOnTop(map, slotLayers) {
+    const order = map.getLayersOrder();
+    const slotIds = slotLayers.map((layer) => layer.id).filter((id) => order.includes(id));
+    if (slotIds.length === 0)
+        return;
+    const isSlot = new Set(slotIds);
+    // The block runs from the backmost slot on the map to the frontmost one
+    let first = -1;
+    let last = -1;
+    order.forEach((id, index) => {
+        if (!isSlot.has(id))
+            return;
+        if (first < 0)
+            first = index;
+        last = index;
+    });
+    const block = order.slice(first, last + 1);
+    const slotsInBlock = block.filter((id) => isSlot.has(id));
+    const inOrder = slotsInBlock.every((id, index) => id === slotIds[index]);
+    if (inOrder && last === order.length - 1)
+        return;
+    // Each slot keeps the native layers that followed it
+    const following = new Map();
+    let current = '';
+    for (const id of block) {
+        if (isSlot.has(id)) {
+            current = id;
+            following.set(id, []);
+        }
+        else {
+            following.get(current)?.push(id);
+        }
+    }
+    for (const slotId of slotIds) {
+        map.moveLayer(slotId);
+        for (const id of following.get(slotId) ?? [])
+            map.moveLayer(id);
+    }
+}
 /**
  * Keeps the frames of the stacking order on the map for as long as the returned detach function has not
  * been called
  *
  * One rule covers every timing: the slots are added whenever the style accepts layers and a slot
  * is missing. It is checked once now (for a map whose style is already parsed, even while tiles
- * are still loading) and again on every `styledata` event. maplibre fires `styledata` when a
- * style finishes loading (before `style.load` and `load`) and after changes to the style, so the
- * slots are also restored after `setStyle`, including a diffed `setStyle` that drops layers it
- * does not know. A slot that is already on the map is never added twice.
+ * are still loading) and again on every `styledata` and `style.load` event. maplibre fires
+ * `styledata` when a style finishes loading (before `style.load` and `load`) and after changes to
+ * the style, so the slots are also restored after a full `setStyle`. A slot that is already on
+ * the map is never added twice.
  *
  * The slots are added in order from the first (the backmost), which lines them up in the same
- * order in maplibre (layers added later are on top).
+ * order in maplibre (layers added later are on top). A slot missing while a later one is on the
+ * map is added just behind it.
+ *
+ * On `style.load` the slots are also put back on top of the map (see `placeSlotsOnTop`). maplibre
+ * fires it when a style is loaded and at the end of a diffed `setStyle` that changed something,
+ * and only then: a layer the host adds or moves itself fires `styledata` alone, so a layer the
+ * host put above the drawing stays there until the style is changed.
  *
  * @param map The map
  * @param getSlotLayers Returns the current list of slots (first = backmost)
@@ -33,15 +96,28 @@ export function attachSlotLayers(map, getSlotLayers) {
     const ensureSlots = () => {
         if (!styleAcceptsLayers(map))
             return;
-        for (const slotLayer of getSlotLayers()) {
-            if (!map.getLayer(slotLayer.id)) {
+        const slotLayers = getSlotLayers();
+        slotLayers.forEach((slotLayer, index) => {
+            if (map.getLayer(slotLayer.id))
+                return;
+            // Behind the next slot that is on the map, so that the slots stay in order
+            const next = slotLayers.slice(index + 1).find((later) => map.getLayer(later.id));
+            if (next)
+                map.addLayer(slotLayer, next.id);
+            else
                 map.addLayer(slotLayer);
-            }
-        }
+        });
+    };
+    const restoreSlots = () => {
+        ensureSlots();
+        if (styleAcceptsLayers(map))
+            placeSlotsOnTop(map, getSlotLayers());
     };
     map.on('styledata', ensureSlots);
+    map.on('style.load', restoreSlots);
     ensureSlots();
     return () => {
         map.off('styledata', ensureSlots);
+        map.off('style.load', restoreSlots);
     };
 }

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,