From 06bbe3736aa819c68f0616bca25c1e15585aab86 Mon Sep 17 00:00:00 2001 From: Eduard Gert Date: Mon, 8 Apr 2024 16:44:27 +0200 Subject: [PATCH 1/2] Allow passing custom themes to create layers So far it was only possible to generate styles based on a set of fixed themes maintained by the protomaps project. With this change, it is possible to pass a custom color theme to create layers, without interfering with the final style. Also passing partial themes is possible to override only a small set of properties. --- styles/.gitignore | 3 ++- styles/src/index.ts | 19 +++++++++++++- styles/test/custom_themes.test.ts | 41 +++++++++++++++++++++++++++++++ styles/test/index.test.ts | 1 + 4 files changed, 62 insertions(+), 2 deletions(-) create mode 100644 styles/test/custom_themes.test.ts diff --git a/styles/.gitignore b/styles/.gitignore index 53c37a16..db4c6d9b 100644 --- a/styles/.gitignore +++ b/styles/.gitignore @@ -1 +1,2 @@ -dist \ No newline at end of file +dist +node_modules \ No newline at end of file diff --git a/styles/src/index.ts b/styles/src/index.ts index 9f27b4ea..a32f6e7f 100644 --- a/styles/src/index.ts +++ b/styles/src/index.ts @@ -1,6 +1,6 @@ import { LayerSpecification } from "@maplibre/maplibre-gl-style-spec"; import { labels_layers, nolabels_layers } from "./base_layers"; -import themes from "./themes"; +import themes, { Theme } from "./themes"; export default function (source: string, key: string): LayerSpecification[] { const theme = themes[key]; @@ -16,3 +16,20 @@ export function labels(source: string, key: string): LayerSpecification[] { const theme = themes[key]; return labels_layers(source, theme); } + +export function layersWithCustomTheme(source: string, theme: Theme): LayerSpecification[] { + return nolabels_layers(source, theme).concat(labels_layers(source, theme)); +} + +export function layersWithPartialCustomTheme(source: string, key: string, partialTheme: Partial): LayerSpecification[] { + const mergedTheme = { ...themes[key], ...partialTheme }; + return nolabels_layers(source, mergedTheme).concat(labels_layers(source, mergedTheme)); +} + +export function noLabelsWithCustomTheme(source: string, theme: Theme): LayerSpecification[] { + return nolabels_layers(source, theme); +} + +export function labelsWithCustomTheme(source: string, theme: Theme): LayerSpecification[] { + return labels_layers(source, theme); +} \ No newline at end of file diff --git a/styles/test/custom_themes.test.ts b/styles/test/custom_themes.test.ts new file mode 100644 index 00000000..06d6d7d9 --- /dev/null +++ b/styles/test/custom_themes.test.ts @@ -0,0 +1,41 @@ +import assert from "node:assert"; +import { test } from "node:test"; +import { validateStyleMin } from "@maplibre/maplibre-gl-style-spec"; +import { + labelsWithCustomTheme, + layersWithPartialCustomTheme, +} from "../src/index"; +import themes from "../src/themes"; + +const STUB = { + version: 8, + glyphs: "https://example.com/{fontstack}/{range}.pbf", + sources: { + sourcename: { + type: "vector", + }, + }, +}; + +test("validate custom themes", () => { + const customTheme = themes["dark"]; + STUB.layers = labelsWithCustomTheme("sourcename", customTheme); + const errors = validateStyleMin(STUB); + assert.deepStrictEqual([], errors); +}); + +test("validate layers with partial custom theme overrides", () => { + const customBackgroundColor = "#fff"; + const partialTheme = { background: customBackgroundColor }; + STUB.layers = layersWithPartialCustomTheme( + "sourcename", + "dark", + partialTheme + ); + const errors = validateStyleMin(STUB); + assert.deepStrictEqual([], errors); + assert.deepStrictEqual( + STUB.layers.find((l) => l.id == "background")["paint"], + { "background-color": customBackgroundColor } + ); +}); diff --git a/styles/test/index.test.ts b/styles/test/index.test.ts index 95b17572..786212c7 100644 --- a/styles/test/index.test.ts +++ b/styles/test/index.test.ts @@ -6,6 +6,7 @@ import themes from "../src/themes"; import "./base_layers.test"; import "./themes.test"; +import "./custom_themes.test" const STUB = { version: 8, From b6bcb6a26b07dc5ba3b6d0f7362a1c0b8fb05740 Mon Sep 17 00:00:00 2001 From: Eduard Gert Date: Tue, 9 Apr 2024 09:25:11 +0200 Subject: [PATCH 2/2] Apply biome lint fixes --- styles/src/index.ts | 27 +++++++++++++++++++++------ styles/test/custom_themes.test.ts | 11 +++++------ styles/test/index.test.ts | 2 +- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/styles/src/index.ts b/styles/src/index.ts index a32f6e7f..1dbd2669 100644 --- a/styles/src/index.ts +++ b/styles/src/index.ts @@ -17,19 +17,34 @@ export function labels(source: string, key: string): LayerSpecification[] { return labels_layers(source, theme); } -export function layersWithCustomTheme(source: string, theme: Theme): LayerSpecification[] { +export function layersWithCustomTheme( + source: string, + theme: Theme, +): LayerSpecification[] { return nolabels_layers(source, theme).concat(labels_layers(source, theme)); } -export function layersWithPartialCustomTheme(source: string, key: string, partialTheme: Partial): LayerSpecification[] { +export function layersWithPartialCustomTheme( + source: string, + key: string, + partialTheme: Partial, +): LayerSpecification[] { const mergedTheme = { ...themes[key], ...partialTheme }; - return nolabels_layers(source, mergedTheme).concat(labels_layers(source, mergedTheme)); + return nolabels_layers(source, mergedTheme).concat( + labels_layers(source, mergedTheme), + ); } -export function noLabelsWithCustomTheme(source: string, theme: Theme): LayerSpecification[] { +export function noLabelsWithCustomTheme( + source: string, + theme: Theme, +): LayerSpecification[] { return nolabels_layers(source, theme); } -export function labelsWithCustomTheme(source: string, theme: Theme): LayerSpecification[] { +export function labelsWithCustomTheme( + source: string, + theme: Theme, +): LayerSpecification[] { return labels_layers(source, theme); -} \ No newline at end of file +} diff --git a/styles/test/custom_themes.test.ts b/styles/test/custom_themes.test.ts index 06d6d7d9..56c2c39c 100644 --- a/styles/test/custom_themes.test.ts +++ b/styles/test/custom_themes.test.ts @@ -18,7 +18,7 @@ const STUB = { }; test("validate custom themes", () => { - const customTheme = themes["dark"]; + const customTheme = themes.dark; STUB.layers = labelsWithCustomTheme("sourcename", customTheme); const errors = validateStyleMin(STUB); assert.deepStrictEqual([], errors); @@ -30,12 +30,11 @@ test("validate layers with partial custom theme overrides", () => { STUB.layers = layersWithPartialCustomTheme( "sourcename", "dark", - partialTheme + partialTheme, ); const errors = validateStyleMin(STUB); assert.deepStrictEqual([], errors); - assert.deepStrictEqual( - STUB.layers.find((l) => l.id == "background")["paint"], - { "background-color": customBackgroundColor } - ); + assert.deepStrictEqual(STUB.layers.find((l) => l.id === "background").paint, { + "background-color": customBackgroundColor, + }); }); diff --git a/styles/test/index.test.ts b/styles/test/index.test.ts index 786212c7..212dff2f 100644 --- a/styles/test/index.test.ts +++ b/styles/test/index.test.ts @@ -5,8 +5,8 @@ import layers from "../src/index"; import themes from "../src/themes"; import "./base_layers.test"; +import "./custom_themes.test"; import "./themes.test"; -import "./custom_themes.test" const STUB = { version: 8,