@loidolt/theme-maps 0.7.0

package/dist/core/route.js

@@ -0,0 +1,182 @@
+/*
+ * Straight-line routing: great-circle distances, a good visiting order for a set of stops, and
+ * links that hand the order to Google or Apple Maps for turn-by-turn directions. No routing
+ * service, no key — the order is by distance as the crow flies, which is what a day's stops
+ * usually need before a driver looks at roads.
+ */
+/** Mean earth radius, in metres (IUGG). */
+export const EARTH_RADIUS = 6_371_008.8;
+const radians = (degrees) => (degrees * Math.PI) / 180;
+const finite = ([lng, lat]) => Number.isFinite(lng) && Number.isFinite(lat);
+/** Great-circle distance in metres. `NaN` when either point is not a real coordinate. */
+export function haversine(a, b) {
+    if (!finite(a) || !finite(b))
+        return Number.NaN;
+    const [dLat, dLng] = [radians(b[1] - a[1]), radians(b[0] - a[0])];
+    const h = Math.sin(dLat / 2) ** 2 +
+        Math.cos(radians(a[1])) * Math.cos(radians(b[1])) * Math.sin(dLng / 2) ** 2;
+    return 2 * EARTH_RADIUS * Math.asin(Math.min(1, Math.sqrt(h)));
+}
+/** The length of a path through `points`, in metres. */
+export const pathLength = (points) => points.slice(1).reduce((sum, point, index) => sum + haversine(points[index], point), 0);
+/** Every pairwise distance, in metres. Symmetric, with zeros on the diagonal. */
+export function distanceMatrix(points) {
+    const matrix = points.map(() => new Array(points.length).fill(0));
+    for (let i = 0; i < points.length; i++) {
+        for (let j = i + 1; j < points.length; j++) {
+            matrix[i][j] = matrix[j][i] = haversine(points[i], points[j]);
+        }
+    }
+    return matrix;
+}
+function measure(origin, points, order, matrix) {
+    const legs = order.map((stop, index) => index === 0 ? haversine(origin, points[stop]) : matrix[order[index - 1]][stop]);
+    return {
+        order,
+        legs,
+        total: legs.reduce((sum, leg) => sum + (Number.isFinite(leg) ? leg : 0), 0),
+    };
+}
+function greedy(origin, points, matrix) {
+    const visited = new Array(points.length).fill(false);
+    const order = [];
+    while (order.length < points.length) {
+        let best = -1;
+        let bestDistance = Infinity;
+        for (let index = 0; index < points.length; index++) {
+            if (visited[index])
+                continue;
+            const distance = order.length
+                ? matrix[order.at(-1)][index]
+                : haversine(origin, points[index]);
+            // Strictly less: a tie keeps the earlier stop, so the order is stable.
+            if (Number.isFinite(distance) && distance < bestDistance)
+                [best, bestDistance] = [index, distance];
+        }
+        if (best === -1) {
+            // Whatever is left cannot be measured; keep it, in the order given.
+            for (let index = 0; index < points.length; index++)
+                if (!visited[index])
+                    order.push(index);
+            break;
+        }
+        visited[best] = true;
+        order.push(best);
+    }
+    return order;
+}
+/**
+ * Improves an order by reversing any stretch that shortens the route, until none does (2-opt).
+ * The route starts at `origin` and ends at its last stop; it does not return.
+ */
+export function twoOpt(origin, points, order, { maxPasses = 20, matrix = distanceMatrix(points), } = {}) {
+    const best = [...order];
+    if (best.length < 3)
+        return best;
+    const fromOrigin = points.map((point) => haversine(origin, point));
+    const last = best.length - 1;
+    for (let pass = 0; pass < maxPasses; pass++) {
+        let improved = false;
+        for (let i = 0; i < last; i++) {
+            for (let j = i + 1; j <= last; j++) {
+                const before = i === 0 ? fromOrigin[best[0]] : matrix[best[i - 1]][best[i]];
+                const after = i === 0 ? fromOrigin[best[j]] : matrix[best[i - 1]][best[j]];
+                // A stretch running to the end has no edge after it: the route just stops there.
+                const tailBefore = j === last ? 0 : matrix[best[j]][best[j + 1]];
+                const tailAfter = j === last ? 0 : matrix[best[i]][best[j + 1]];
+                if (after + tailAfter - before - tailBefore < -1e-6) {
+                    best.splice(i, j - i + 1, ...best.slice(i, j + 1).reverse());
+                    improved = true;
+                }
+            }
+        }
+        if (!improved)
+            break;
+    }
+    return best;
+}
+/**
+ * A short order to visit `stops` from `origin`: nearest neighbour first, then 2-opt. Not the
+ * shortest possible — that problem is intractable — but close for a day's worth of stops.
+ */
+export function optimizeRoute(origin, stops, { improve = true, maxPasses } = {}) {
+    if (!stops.length)
+        return { order: [], legs: [], total: 0 };
+    const matrix = distanceMatrix(stops);
+    const first = greedy(origin, stops, matrix);
+    const order = improve ? twoOpt(origin, stops, first, { maxPasses, matrix }) : first;
+    return measure(origin, stops, order, matrix);
+}
+/** Legs and total for an order you already have, to compare against an optimised one. */
+export const measureRoute = (origin, stops, order) => measure(origin, stops, order, distanceMatrix(stops));
+const encodeStop = (stop) => {
+    if (typeof stop === 'string')
+        return stop.trim() ? encodeURIComponent(stop.trim()) : null;
+    return finite(stop) ? `${stop[1]},${stop[0]}` : null;
+};
+/** Google Maps allows this many stops between origin and destination in one link. */
+export const GOOGLE_MAX_WAYPOINTS = 9;
+/** A Google Maps directions link through `stops`, the last being the destination. */
+export function googleDirectionsUrl(stops, { origin, travelMode } = {}) {
+    const encoded = stops.map(encodeStop).filter((stop) => stop !== null);
+    if (!encoded.length)
+        return '';
+    const start = origin === undefined ? null : encodeStop(origin);
+    const params = [
+        'api=1',
+        ...(start ? [`origin=${start}`] : []),
+        `destination=${encoded.at(-1)}`,
+        ...(encoded.length > 1 ? [`waypoints=${encoded.slice(0, -1).join('%7C')}`] : []),
+        ...(travelMode ? [`travelmode=${travelMode}`] : []),
+    ];
+    return `https://www.google.com/maps/dir/?${params.join('&')}`;
+}
+/** An Apple Maps directions link through `stops`. */
+export function appleDirectionsUrl(stops, { origin, travelMode } = {}) {
+    const encoded = stops.map(encodeStop).filter((stop) => stop !== null);
+    if (!encoded.length)
+        return '';
+    const start = origin === undefined ? null : encodeStop(origin);
+    // Apple has no cycling mode in links; it falls back to driving, as it does itself.
+    const mode = travelMode === 'walking' || travelMode === 'transit' ? travelMode : 'driving';
+    const params = [
+        ...(start ? [`source=${start}`] : []),
+        ...encoded.slice(0, -1).map((stop) => `waypoint=${stop}`),
+        `destination=${encoded.at(-1)}`,
+        `mode=${mode}`,
+    ];
+    return `https://maps.apple.com/directions?${params.join('&')}`;
+}
+/**
+ * Splits a long list of stops into legs that each fit one link, every leg starting where the
+ * last one ended.
+ */
+export function splitIntoLegs(stops, maxPerLeg = GOOGLE_MAX_WAYPOINTS + 2) {
+    if (maxPerLeg < 2)
+        throw new RangeError('splitIntoLegs: a leg needs at least 2 stops');
+    if (stops.length <= maxPerLeg)
+        return stops.length ? [[...stops]] : [];
+    const legs = [];
+    for (let start = 0; start < stops.length - 1; start += maxPerLeg - 1) {
+        legs.push(stops.slice(start, start + maxPerLeg));
+    }
+    return legs;
+}
+/**
+ * Google Maps links for a route too long for one: one per leg, each starting where the last one
+ * ended. A leg holds an origin, up to nine waypoints and a destination.
+ */
+export function googleDirectionsLegUrls(stops, options = {}) {
+    const usable = stops.filter((stop) => encodeStop(stop) !== null);
+    if (!usable.length)
+        return [];
+    const { origin, travelMode } = options;
+    // With no origin the first link starts wherever the user is, so it has room for one more stop.
+    const first = origin === undefined ? usable.slice(0, GOOGLE_MAX_WAYPOINTS + 1) : [];
+    const remaining = origin === undefined ? usable.slice(first.length - 1) : [origin, ...usable];
+    const legs = remaining.length > 1 ? splitIntoLegs(remaining) : [];
+    return [
+        ...(first.length ? [googleDirectionsUrl(first, { travelMode })] : []),
+        ...legs.map(([start, ...rest]) => googleDirectionsUrl(rest, { origin: start, travelMode })),
+    ];
+}

package/dist/core/simplify.d.ts

@@ -0,0 +1,9 @@
+import type { FeatureCollection, Geometry, LngLat, Position } from './types.js';
+/** A line with every vertex within `tolerance` of it dropped. Keeps both ends. */
+export declare function simplifyLine<T extends Position>(points: T[], tolerance: number): T[];
+/** A geometry with its lines and rings simplified; points are left alone. */
+export declare function simplifyGeometry(geometry: Geometry, tolerance: number): Geometry;
+/** Every feature simplified; ids and properties are kept. */
+export declare function simplifyFeatures<P>(collection: FeatureCollection<P>, tolerance: number): FeatureCollection<P>;
+/** The smallest convex polygon holding every point, counter-clockwise and closed. */
+export declare function convexHull(points: LngLat[]): LngLat[];

package/dist/core/simplify.js

@@ -0,0 +1,102 @@
+/*
+ * Fewer vertices for the same shape: Douglas-Peucker line simplification and convex hulls.
+ * Tolerances are in degrees — see `toleranceForZoom` in `lod.ts` to derive one from a zoom.
+ */
+const squaredSegmentDistance = (point, a, b) => {
+    let [x, y] = a;
+    let [dx, dy] = [b[0] - x, b[1] - y];
+    if (dx !== 0 || dy !== 0) {
+        const t = ((point[0] - x) * dx + (point[1] - y) * dy) / (dx * dx + dy * dy);
+        if (t > 1)
+            [x, y] = b;
+        else if (t > 0)
+            [x, y] = [x + dx * t, y + dy * t];
+    }
+    [dx, dy] = [point[0] - x, point[1] - y];
+    return dx * dx + dy * dy;
+};
+/** A line with every vertex within `tolerance` of it dropped. Keeps both ends. */
+export function simplifyLine(points, tolerance) {
+    if (points.length <= 2 || tolerance <= 0)
+        return [...points];
+    const limit = tolerance * tolerance;
+    const keep = new Uint8Array(points.length);
+    keep[0] = keep[points.length - 1] = 1;
+    const stack = [[0, points.length - 1]];
+    while (stack.length) {
+        const [first, last] = stack.pop();
+        let [furthest, max] = [-1, limit];
+        for (let index = first + 1; index < last; index++) {
+            const distance = squaredSegmentDistance(points[index], points[first], points[last]);
+            if (distance > max)
+                [furthest, max] = [index, distance];
+        }
+        if (furthest !== -1) {
+            keep[furthest] = 1;
+            stack.push([first, furthest], [furthest, last]);
+        }
+    }
+    return points.filter((_, index) => keep[index]);
+}
+/** A polygon ring, simplified but never below a valid ring's four positions. */
+function simplifyRing(ring, tolerance) {
+    const simplified = simplifyLine(ring, tolerance);
+    return simplified.length >= 4 ? simplified : ring;
+}
+/** A geometry with its lines and rings simplified; points are left alone. */
+export function simplifyGeometry(geometry, tolerance) {
+    switch (geometry.type) {
+        case 'LineString':
+            return { ...geometry, coordinates: simplifyLine(geometry.coordinates, tolerance) };
+        case 'MultiLineString':
+            return {
+                ...geometry,
+                coordinates: geometry.coordinates.map((line) => simplifyLine(line, tolerance)),
+            };
+        case 'Polygon':
+            return {
+                ...geometry,
+                coordinates: geometry.coordinates.map((ring) => simplifyRing(ring, tolerance)),
+            };
+        case 'MultiPolygon':
+            return {
+                ...geometry,
+                coordinates: geometry.coordinates.map((polygon) => polygon.map((ring) => simplifyRing(ring, tolerance))),
+            };
+        case 'GeometryCollection':
+            return {
+                ...geometry,
+                geometries: geometry.geometries.map((part) => simplifyGeometry(part, tolerance)),
+            };
+        default:
+            return geometry;
+    }
+}
+/** Every feature simplified; ids and properties are kept. */
+export function simplifyFeatures(collection, tolerance) {
+    return {
+        ...collection,
+        features: collection.features.map((feature) => feature.geometry
+            ? { ...feature, geometry: simplifyGeometry(feature.geometry, tolerance) }
+            : feature),
+    };
+}
+/** The smallest convex polygon holding every point, counter-clockwise and closed. */
+export function convexHull(points) {
+    const sorted = [...points].sort((a, b) => a[0] - b[0] || a[1] - b[1]);
+    const unique = sorted.filter((point, index) => index === 0 || point[0] !== sorted[index - 1][0] || point[1] !== sorted[index - 1][1]);
+    if (unique.length < 3)
+        return unique;
+    const cross = (o, a, b) => (a[0] - o[0]) * (b[1] - o[1]) - (a[1] - o[1]) * (b[0] - o[0]);
+    const half = (list) => {
+        const hull = [];
+        for (const point of list) {
+            while (hull.length >= 2 && cross(hull[hull.length - 2], hull[hull.length - 1], point) <= 0)
+                hull.pop();
+            hull.push(point);
+        }
+        return hull.slice(0, -1);
+    };
+    const hull = [...half(unique), ...half([...unique].reverse())];
+    return [...hull, hull[0]];
+}

package/dist/core/spatial.d.ts

@@ -0,0 +1,21 @@
+import type { Feature, FeatureCollection, LngLat, LngLatBounds } from './types.js';
+export interface SpatialIndex<P = Record<string, unknown>> {
+    readonly size: number;
+    /** Replaces everything in the index. Bulk loading is much faster than inserting one by one. */
+    load(features: Array<Feature<P>> | FeatureCollection<P>): void;
+    insert(feature: Feature<P>): void;
+    remove(id: string | number): boolean;
+    clear(): void;
+    /** Features whose bounding box overlaps `bounds`, up to `limit`. */
+    search(bounds: LngLatBounds, options?: {
+        limit?: number;
+    }): Array<Feature<P>>;
+    /** The `count` features whose boxes are nearest `point`, nearest first. */
+    nearest(point: LngLat, count?: number): Array<Feature<P>>;
+}
+export interface SpatialIndexOptions<P> {
+    /** A stable id for a feature. Defaults to `feature.id`, then its position in the input. */
+    getId?: (feature: Feature<P>, index: number) => string | number;
+}
+/** A spatial index over features. Features with no geometry are skipped. */
+export declare function createSpatialIndex<P = Record<string, unknown>>(options?: SpatialIndexOptions<P>): SpatialIndex<P>;

package/dist/core/spatial.js

@@ -0,0 +1,88 @@
+import RBush from 'rbush';
+import { boundsOf } from './bounds.js';
+/** A spatial index over features. Features with no geometry are skipped. */
+export function createSpatialIndex(options = {}) {
+    const tree = new RBush();
+    const byId = new Map();
+    let counter = 0;
+    const idOf = (feature) => options.getId?.(feature, counter) ?? feature.id ?? `feature-${counter}`;
+    const entry = (feature) => {
+        const box = boundsOf(feature);
+        const id = idOf(feature);
+        counter += 1;
+        if (!box)
+            return null;
+        const [[minX, minY], [maxX, maxY]] = box;
+        return { minX, minY, maxX, maxY, id, feature: feature };
+    };
+    const distanceTo = ([x, y], item) => {
+        const dx = Math.max(item.minX - x, 0, x - item.maxX);
+        const dy = Math.max(item.minY - y, 0, y - item.maxY);
+        return dx * dx + dy * dy;
+    };
+    return {
+        get size() {
+            return byId.size;
+        },
+        load(input) {
+            tree.clear();
+            byId.clear();
+            counter = 0;
+            const features = Array.isArray(input) ? input : input.features;
+            const entries = features.map(entry).filter((item) => item !== null);
+            for (const item of entries)
+                byId.set(item.id, item);
+            tree.load(entries);
+        },
+        insert(feature) {
+            const item = entry(feature);
+            if (!item)
+                return;
+            const existing = byId.get(item.id);
+            if (existing)
+                tree.remove(existing);
+            byId.set(item.id, item);
+            tree.insert(item);
+        },
+        remove(id) {
+            const existing = byId.get(id);
+            if (!existing)
+                return false;
+            tree.remove(existing);
+            byId.delete(id);
+            return true;
+        },
+        clear() {
+            tree.clear();
+            byId.clear();
+            counter = 0;
+        },
+        search([[minX, minY], [maxX, maxY]], { limit = Infinity } = {}) {
+            return tree
+                .search({ minX, minY, maxX, maxY })
+                .slice(0, limit)
+                .map((item) => item.feature);
+        },
+        nearest(point, count = 1) {
+            // Widen the search box until it holds enough candidates, then rank them exactly.
+            const all = byId.size;
+            if (!all)
+                return [];
+            let radius = 0.01;
+            let found = [];
+            while (found.length < Math.min(count, all) && radius < 720) {
+                found = tree.search({
+                    minX: point[0] - radius,
+                    minY: point[1] - radius,
+                    maxX: point[0] + radius,
+                    maxY: point[1] + radius,
+                });
+                radius *= 4;
+            }
+            return found
+                .sort((a, b) => distanceTo(point, a) - distanceTo(point, b))
+                .slice(0, count)
+                .map((item) => item.feature);
+        },
+    };
+}

package/dist/core/style.d.ts

@@ -0,0 +1,43 @@
+import { type MapColors } from '@loidolt/theme-tokens';
+import type { StyleSpecification } from './types.js';
+/** OpenFreeMap's planet tiles: free, keyless, OpenMapTiles schema. */
+export declare const OPENFREEMAP_TILES = "https://tiles.openfreemap.org/planet";
+/** OpenFreeMap's glyph server. It serves the Noto Sans family. */
+export declare const OPENFREEMAP_GLYPHS = "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf";
+/** Attribution OpenFreeMap requires. Keep it visible: the attribution control shows it. */
+export declare const OPENFREEMAP_ATTRIBUTION = "<a href=\"https://openfreemap.org\" target=\"_blank\" rel=\"noopener\">OpenFreeMap</a> <a href=\"https://www.openmaptiles.org/\" target=\"_blank\" rel=\"noopener\">\u00A9 OpenMapTiles</a> Data from <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" rel=\"noopener\">OpenStreetMap</a>";
+/** Every layer this generator makes starts with this, so it can be found and repainted. */
+export declare const BASEMAP_PREFIX = "ldt-base-";
+type Paint = Record<string, unknown>;
+/**
+ * The colour of every basemap layer, by layer id. The style is built from this, and a theme
+ * change repaints from it without reloading the style — so data layers on top survive.
+ */
+export declare function basemapPaint(colors?: MapColors): Record<string, Paint>;
+export interface BasemapStyleOptions {
+    colors?: MapColors;
+    /** A TileJSON URL, or a tile URL template with `{z}/{x}/{y}`. OpenMapTiles schema. */
+    tiles?: string;
+    /** Glyph URL template. The labels need it. */
+    glyphs?: string;
+    attribution?: string;
+    /** Place, road and water names. */
+    labels?: boolean;
+    /** Font stack for labels — names the glyph server knows. */
+    font?: string[];
+    boldFont?: string[];
+}
+/**
+ * A quiet basemap in the loidolt palette, drawn from any OpenMapTiles-schema vector tiles —
+ * OpenFreeMap's by default. Land, water, parks, buildings, roads, rail, boundaries and names;
+ * nothing else, so the data drawn on top carries the colour.
+ */
+export declare function createBasemapStyle({ colors, tiles, glyphs, attribution, labels, font, boldFont, }?: BasemapStyleOptions): StyleSpecification;
+/**
+ * A tile-free map: the land colour and nothing else. For data that stands on its own, for
+ * places with no network, and for tests. `glyphs` is kept so symbol layers can still label.
+ */
+export declare function createBlankStyle({ colors, glyphs, }?: Pick<BasemapStyleOptions, 'colors' | 'glyphs'>): StyleSpecification;
+/** Whether a style was made here, and so can be repainted in place on a theme change. */
+export declare const isLoidoltStyle: (style: unknown) => style is StyleSpecification;
+export {};

package/dist/core/style.js

@@ -0,0 +1,205 @@
+import { mapColors } from '@loidolt/theme-tokens';
+/** OpenFreeMap's planet tiles: free, keyless, OpenMapTiles schema. */
+export const OPENFREEMAP_TILES = 'https://tiles.openfreemap.org/planet';
+/** OpenFreeMap's glyph server. It serves the Noto Sans family. */
+export const OPENFREEMAP_GLYPHS = 'https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf';
+/** Attribution OpenFreeMap requires. Keep it visible: the attribution control shows it. */
+export const OPENFREEMAP_ATTRIBUTION = '<a href="https://openfreemap.org" target="_blank" rel="noopener">OpenFreeMap</a> <a href="https://www.openmaptiles.org/" target="_blank" rel="noopener">© OpenMapTiles</a> Data from <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener">OpenStreetMap</a>';
+/** Every layer this generator makes starts with this, so it can be found and repainted. */
+export const BASEMAP_PREFIX = 'ldt-base-';
+const SOURCE = 'ldt-base';
+/** Line width that grows with zoom: `[zoom, width]` stops, interpolated exponentially. */
+const widths = (...stops) => [
+    'interpolate',
+    ['exponential', 1.4],
+    ['zoom'],
+    ...stops.flat(),
+];
+const MAJOR = ['motorway', 'trunk', 'primary'];
+const MEDIUM = ['secondary', 'tertiary'];
+const MINOR = ['minor', 'service', 'track'];
+/**
+ * The colour of every basemap layer, by layer id. The style is built from this, and a theme
+ * change repaints from it without reloading the style — so data layers on top survive.
+ */
+export function basemapPaint(colors = mapColors()) {
+    const id = (name) => `${BASEMAP_PREFIX}${name}`;
+    const label = {
+        'text-color': colors.label,
+        'text-halo-color': colors.labelHalo,
+        'text-halo-width': 1.4,
+    };
+    return {
+        [id('land')]: { 'background-color': colors.land },
+        [id('park')]: { 'fill-color': colors.park },
+        [id('wood')]: { 'fill-color': colors.park, 'fill-opacity': 0.7 },
+        [id('water')]: { 'fill-color': colors.water },
+        [id('waterway')]: { 'line-color': colors.water, 'line-width': widths([8, 0.5], [16, 3]) },
+        [id('building')]: { 'fill-color': colors.building, 'fill-opacity': 0.8 },
+        [id('road-minor')]: { 'line-color': colors.road, 'line-width': widths([12, 0.5], [18, 10]) },
+        [id('road-medium-casing')]: {
+            'line-color': colors.building,
+            'line-width': widths([8, 0.8], [18, 16]),
+        },
+        [id('road-medium')]: { 'line-color': colors.road, 'line-width': widths([8, 0.5], [18, 13]) },
+        [id('road-major-casing')]: {
+            'line-color': colors.building,
+            'line-width': widths([5, 1], [18, 22]),
+        },
+        [id('road-major')]: {
+            'line-color': colors.roadMajor,
+            'line-width': widths([5, 0.6], [18, 18]),
+        },
+        [id('rail')]: {
+            'line-color': colors.boundary,
+            'line-width': 1,
+            'line-dasharray': [3, 3],
+            'line-opacity': 0.6,
+        },
+        [id('boundary-country')]: {
+            'line-color': colors.boundary,
+            'line-width': widths([2, 0.8], [10, 2]),
+        },
+        [id('boundary-state')]: {
+            'line-color': colors.boundary,
+            'line-width': 1,
+            'line-dasharray': [4, 3],
+            'line-opacity': 0.7,
+        },
+        [id('label-water')]: label,
+        [id('label-road')]: label,
+        [id('label-place-minor')]: label,
+        [id('label-place-major')]: label,
+        [id('label-country')]: label,
+    };
+}
+/**
+ * A quiet basemap in the loidolt palette, drawn from any OpenMapTiles-schema vector tiles —
+ * OpenFreeMap's by default. Land, water, parks, buildings, roads, rail, boundaries and names;
+ * nothing else, so the data drawn on top carries the colour.
+ */
+export function createBasemapStyle({ colors = mapColors(), tiles = OPENFREEMAP_TILES, glyphs = OPENFREEMAP_GLYPHS, attribution = OPENFREEMAP_ATTRIBUTION, labels = true, font = ['Noto Sans Regular'], boldFont = ['Noto Sans Bold'], } = {}) {
+    const paint = basemapPaint(colors);
+    const layer = (name, type, sourceLayer, extra = {}) => ({
+        id: `${BASEMAP_PREFIX}${name}`,
+        type,
+        ...(sourceLayer ? { source: SOURCE, 'source-layer': sourceLayer } : {}),
+        paint: paint[`${BASEMAP_PREFIX}${name}`],
+        ...extra,
+    });
+    const road = (classes) => ['match', ['get', 'class'], classes, true, false];
+    const lineLayout = { 'line-cap': 'round', 'line-join': 'round' };
+    const text = (size, fontStack = font) => ({
+        'text-font': fontStack,
+        'text-size': size,
+        'text-max-width': 8,
+    });
+    const layers = [
+        layer('land', 'background', null),
+        layer('park', 'fill', 'park'),
+        layer('wood', 'fill', 'landcover', { filter: road(['wood', 'grass']) }),
+        layer('water', 'fill', 'water'),
+        layer('waterway', 'line', 'waterway', { minzoom: 8 }),
+        layer('building', 'fill', 'building', { minzoom: 13 }),
+        layer('road-minor', 'line', 'transportation', {
+            minzoom: 12,
+            filter: road(MINOR),
+            layout: lineLayout,
+        }),
+        layer('road-medium-casing', 'line', 'transportation', {
+            minzoom: 8,
+            filter: road(MEDIUM),
+            layout: lineLayout,
+        }),
+        layer('road-medium', 'line', 'transportation', {
+            minzoom: 8,
+            filter: road(MEDIUM),
+            layout: lineLayout,
+        }),
+        layer('road-major-casing', 'line', 'transportation', {
+            minzoom: 5,
+            filter: road(MAJOR),
+            layout: lineLayout,
+        }),
+        layer('road-major', 'line', 'transportation', {
+            minzoom: 5,
+            filter: road(MAJOR),
+            layout: lineLayout,
+        }),
+        layer('rail', 'line', 'transportation', { minzoom: 10, filter: road(['rail', 'transit']) }),
+        layer('boundary-country', 'line', 'boundary', {
+            filter: ['all', ['==', ['get', 'admin_level'], 2], ['!=', ['get', 'maritime'], 1]],
+        }),
+        layer('boundary-state', 'line', 'boundary', {
+            minzoom: 3,
+            filter: ['all', ['==', ['get', 'admin_level'], 4], ['!=', ['get', 'maritime'], 1]],
+        }),
+    ];
+    if (labels) {
+        layers.push(layer('label-water', 'symbol', 'water_name', {
+            layout: { 'text-field': ['get', 'name'], ...text(12, ['Noto Sans Italic']) },
+        }), layer('label-road', 'symbol', 'transportation_name', {
+            minzoom: 13,
+            layout: {
+                'text-field': ['get', 'name'],
+                'symbol-placement': 'line',
+                ...text(11),
+            },
+        }), layer('label-place-minor', 'symbol', 'place', {
+            minzoom: 11,
+            filter: road(['village', 'suburb', 'neighbourhood', 'quarter', 'hamlet']),
+            layout: { 'text-field': ['get', 'name'], ...text(12) },
+        }), layer('label-place-major', 'symbol', 'place', {
+            minzoom: 4,
+            filter: road(['city', 'town']),
+            layout: {
+                'text-field': ['get', 'name'],
+                ...text(['interpolate', ['linear'], ['zoom'], 4, 11, 12, 18], boldFont),
+            },
+        }), layer('label-country', 'symbol', 'place', {
+            maxzoom: 7,
+            filter: road(['country']),
+            layout: {
+                'text-field': ['get', 'name'],
+                'text-transform': 'uppercase',
+                'text-letter-spacing': 0.1,
+                ...text(12, boldFont),
+            },
+        }));
+    }
+    const source = /\{z\}/.test(tiles)
+        ? { type: 'vector', tiles: [tiles], maxzoom: 14, attribution }
+        : { type: 'vector', url: tiles, attribution };
+    return {
+        version: 8,
+        name: 'Loidolt',
+        metadata: { 'loidolt:basemap': 'default' },
+        glyphs,
+        sources: { [SOURCE]: source },
+        layers,
+    };
+}
+/**
+ * A tile-free map: the land colour and nothing else. For data that stands on its own, for
+ * places with no network, and for tests. `glyphs` is kept so symbol layers can still label.
+ */
+export function createBlankStyle({ colors = mapColors(), glyphs = OPENFREEMAP_GLYPHS, } = {}) {
+    return {
+        version: 8,
+        name: 'Loidolt plain',
+        metadata: { 'loidolt:basemap': 'blank' },
+        glyphs,
+        sources: {},
+        layers: [
+            {
+                id: `${BASEMAP_PREFIX}land`,
+                type: 'background',
+                paint: basemapPaint(colors)[`${BASEMAP_PREFIX}land`],
+            },
+        ],
+    };
+}
+/** Whether a style was made here, and so can be repainted in place on a theme change. */
+export const isLoidoltStyle = (style) => typeof style === 'object' &&
+    style !== null &&
+    typeof style.metadata?.['loidolt:basemap'] === 'string';