@versatiles/style 3.5.2 → 3.6.1

package/README.MD

@@ -7,20 +7,20 @@ Programatically generates StyleJSON for MapLibre.
 
 ![Example: Colorful Style](docs/colorful.png)
 
-## Styles
+# Styles
 
 * Colorful - colorful, full featured map
 * Neutrino - light basemap
 * Graybeard - gray basemap
 
-## Download
+# Download styles for versatiles.org
 
 You can download the latest StyleJSONs from the [latest release](https://github.com/versatiles-org/versatiles-style/releases/latest/).
 We provide each style with and without labels, and also in multiple languages.
 
 Be aware that styles already include `tiles.versatiles.org` as source for tiles, fonts (glyphs) and icons (sprites). So you might want to update the URLs in the JSON.
 
-## in a web browser
+# Create styles in the frontend (web browser)
 
 Download latest release:
 
@@ -35,19 +35,17 @@ Use it in:
 <script src="maplibre-gl.js"></script>
 <script src="versatiles-style.js"></script>
 <script>
-	const baseUrl = new URL('/', window.location.href).href;
+	const styleBuilder = new VersaTilesStyle.Colorful();
+  styleBuilder.tilesUrl = ['tiles/{z}/{x}/{y}'];
+
 	const map = new maplibregl.Map({
 		container: 'map',
-		style: versatiles_style.colorful({
-			glyphsUrl: baseUrl + 'fonts/{fontstack}/{range}.pbf',
-			spriteUrl: baseUrl + 'sprites/sprites',
-			tilesUrl: [baseUrl + 'tiles/{z}/{x}/{y}'],
-		})
+		style: styleBuilder.build()
 	});
 <script>
 ```
 
-## as Node.js module
+# Create styles in the backend (Node.js)
 
 Install `versatiles-style` via NPM:
 
@@ -58,11 +56,109 @@ npm install versatiles-style
 Use it in Node.js:
 
 ```javascript
-import { colorful } from 'versatiles-style';
-let style = colorful({language:'de'});
-writeFileSync('style.json', JSON.stringify(style));
+import { Colorful } from 'versatiles-style';
+let style = new Colorful();
+style.language = 'de';
+writeFileSync('style.json', JSON.stringify(style.build()));
 ```
 
-### Node.js API
+# API
 
 <!--- This chapter is generated automatically --->
+
+## Interfaces
+
+### Interface: `TileJSONSpecificationRaster`<a id="interface_tilejsonspecificationraster"></a>
+
+```typescript
+interface {
+  attribution?: string;
+  bounds?: [number, number, number, number];
+  center?: [number, number];
+  description?: string;
+  fillzoom?: number;
+  format: "avif" | "jpg" | "png" | "webp";
+  grids?: string[];
+  legend?: string;
+  maxzoom?: number;
+  minzoom?: number;
+  name?: string;
+  scheme?: "xyz" | "tms";
+  template?: string;
+  tilejson?: "3.0.0";
+  tiles: string[];
+  type: "raster";
+}
+```
+
+### Interface: `TileJSONSpecificationVector`<a id="interface_tilejsonspecificationvector"></a>
+
+```typescript
+interface {
+  attribution?: string;
+  bounds?: [number, number, number, number];
+  center?: [number, number];
+  description?: string;
+  fillzoom?: number;
+  format: "pbf";
+  grids?: string[];
+  legend?: string;
+  maxzoom?: number;
+  minzoom?: number;
+  name?: string;
+  scheme?: "xyz" | "tms";
+  template?: string;
+  tilejson?: "3.0.0";
+  tiles: string[];
+  type: "vector";
+  vector_layers: VectorLayer[];
+}
+```
+
+## Type Aliases
+
+### Type: `TileJSONSpecification`<a id="type_tilejsonspecification"></a>
+
+**Type:** <code>[TileJSONSpecificationRaster](#interface_tilejsonspecificationraster) | [TileJSONSpecificationVector](#interface_tilejsonspecificationvector)</code>
+
+## Functions
+
+### Method: `colorful(options)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/index.ts#L4">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>options: StylemakerOptions<default></code> (optional)
+
+**Returns:** <code>MaplibreStyle</code>
+
+### Method: `graybeard(options)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/index.ts#L9">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>options: StylemakerOptions<default></code> (optional)
+
+**Returns:** <code>MaplibreStyle</code>
+
+### Method: `guessStyle(spec)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/lib/style_guesser.ts#L12">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>spec: TileJSONOption</code>
+
+**Returns:** <code>MaplibreStyle</code>
+
+### Method: `neutrino(options)`
+
+<sup><a href="https://github.com/versatiles-org/versatiles-style/blob/516812e/src/index.ts#L14">\[src]</a></sup>
+
+**Parameters:**
+
+* <code>options: StylemakerOptions<default></code> (optional)
+
+**Returns:** <code>MaplibreStyle</code>

package/dist/index.d.ts

@@ -1,4 +1,9 @@
-export type { MaplibreStyle } from './lib/types.js';
-export { default as Colorful } from './style/colorful.js';
-export { default as Graybeard } from './style/graybeard.js';
-export { default as Neutrino } from './style/neutrino.js';
+import type { MaplibreStyle, StylemakerOptions } from './lib/types.js';
+import Colorful from './style/colorful.js';
+export declare function colorful(options?: StylemakerOptions<Colorful>): MaplibreStyle;
+import Graybeard from './style/graybeard.js';
+export declare function graybeard(options?: StylemakerOptions<Graybeard>): MaplibreStyle;
+import Neutrino from './style/neutrino.js';
+export declare function neutrino(options?: StylemakerOptions<Neutrino>): MaplibreStyle;
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './lib/types.js';
+export { default as guessStyle } from './lib/style_guesser.js';

package/dist/index.js

@@ -1,3 +1,13 @@
-export { default as Colorful } from './style/colorful.js';
-export { default as Graybeard } from './style/graybeard.js';
-export { default as Neutrino } from './style/neutrino.js';
+import Colorful from './style/colorful.js';
+export function colorful(options) {
+    return new Colorful().build(options);
+}
+import Graybeard from './style/graybeard.js';
+export function graybeard(options) {
+    return new Graybeard().build(options);
+}
+import Neutrino from './style/neutrino.js';
+export function neutrino(options) {
+    return new Neutrino().build(options);
+}
+export { default as guessStyle } from './lib/style_guesser.js';

package/dist/index.test.js

@@ -1,26 +1,17 @@
-import { Colorful } from './index.js';
-import * as builderClasses from './index.js';
-import StyleBuilder from './lib/style_builder.js';
+/* eslint-disable @typescript-eslint/naming-convention */
+import * as builders from './index.js';
 describe('Style Builders', () => {
-    const styleNames = [
-        'Colorful',
-        'Graybeard',
-        'Neutrino',
+    const styles = [
+        { name: 'Colorful', builder: builders.colorful },
+        { name: 'Graybeard', builder: builders.graybeard },
+        { name: 'Neutrino', builder: builders.neutrino },
     ];
-    it(`should have the correct ${styleNames.length} styles`, () => {
-        const keys1 = Array.from(Object.keys(builderClasses)).sort();
-        const keys2 = styleNames.sort();
-        expect(keys1).toEqual(keys2);
-    });
-    Object.entries(builderClasses).forEach(([styleName, builderClass]) => {
-        it(`should create and test an instance of ${styleName}`, () => {
-            const builder = new builderClass();
-            expect(builder).toBeInstanceOf(StyleBuilder);
-            expect(typeof builder.name).toBe('string');
-            builder.baseUrl = 'https://example.org';
-            const style = builder.build();
+    styles.forEach(({ name, builder }) => {
+        it(`should create and test an instance of ${name}`, () => {
+            expect(typeof builder).toBe('function');
+            const style = builder({ baseUrl: 'https://example.org' });
             expect(JSON.stringify(style).length).toBeGreaterThan(50000);
-            expect(style.name).toBe('versatiles-' + styleName.toLowerCase());
+            expect(style.name).toBe('versatiles-' + name.toLowerCase());
             expect(style.glyphs).toBe('https://example.org/assets/fonts/{fontstack}/{range}.pbf');
             expect(style.sprite).toBe('https://example.org/assets/sprites/sprites');
             expect(Object.keys(style.sources).join(',')).toBe('versatiles-shortbread');
@@ -29,9 +20,49 @@ describe('Style Builders', () => {
     });
 });
 describe('Colorful', () => {
-    const colorful = new Colorful();
-    colorful.baseUrl = 'https://dev.null';
-    colorful.colors.commercial = '#f00';
-    const style = colorful.build();
+    const style = builders.colorful({
+        baseUrl: 'https://dev.null',
+        colors: { commercial: '#f00' },
+    });
     expect(style.glyphs).toBe('https://dev.null/assets/fonts/{fontstack}/{range}.pbf');
+    const paint = style.layers.find(l => l.id === 'land-commercial')?.paint;
+    expect(paint).toBeDefined();
+    if (paint == null)
+        throw Error();
+    expect(paint).toHaveProperty('fill-color');
+    if (!('fill-color' in paint))
+        throw Error();
+    expect(paint['fill-color']).toBe('#ff0000');
+});
+describe('guessStyle', () => {
+    const tiles = ['https://fancy.map/tiles/{z}/{x}/{y}'];
+    const vector_layers = [{ id: 'hallo', fields: { label: 'String' } }];
+    it('should build raster styles', () => {
+        const style = builders.guessStyle({
+            tiles,
+            format: 'png',
+        });
+        expect(style).toStrictEqual({
+            layers: [{ id: 'raster', source: 'rasterSource', type: 'raster' }],
+            sources: { rasterSource: { format: 'png', tilejson: '3.0.0', tiles, type: 'raster' } },
+            version: 8,
+        });
+    });
+    it('should build vector styles', () => {
+        const style = builders.guessStyle({
+            tiles,
+            format: 'pbf',
+            vector_layers,
+        });
+        expect(style).toStrictEqual({
+            layers: [
+                { id: 'background', paint: { 'background-color': '#fff' }, type: 'background' },
+                { id: 'vectorSource-hallo-fill', filter: ['==', '$type', 'Polygon'], paint: { 'fill-antialias': true, 'fill-color': 'hsla(14,50%,52%,0.6)', 'fill-opacity': 0.3, 'fill-outline-color': 'hsla(14,50%,52%,0.6)' }, source: 'vectorSource', 'source-layer': 'hallo', type: 'fill' },
+                { id: 'vectorSource-hallo-line', filter: ['==', '$type', 'LineString'], layout: { 'line-cap': 'round', 'line-join': 'round' }, paint: { 'line-color': 'hsla(14,50%,52%,0.6)' }, source: 'vectorSource', 'source-layer': 'hallo', type: 'line' },
+                { id: 'vectorSource-hallo-circle', filter: ['==', '$type', 'Point'], paint: { 'circle-color': 'hsla(14,50%,52%,0.6)', 'circle-radius': 2 }, source: 'vectorSource', 'source-layer': 'hallo', type: 'circle' },
+            ],
+            sources: { vectorSource: { format: 'pbf', tilejson: '3.0.0', tiles, type: 'vector', vector_layers } },
+            'version': 8,
+        });
+    });
 });

package/dist/lib/decorator.js

@@ -9,6 +9,8 @@ export function decorate(layers, rules) {
     const layerStyles = new Map();
     // Iterate through the generated layer style rules
     Object.entries(rules).forEach(([idDef, layerStyle]) => {
+        if (layerStyle == null)
+            return;
         // Expand any braces in IDs and filter them through a RegExp if necessary
         const ids = expandBraces(idDef).flatMap(id => {
             if (!id.includes('*'))
@@ -41,6 +43,8 @@ export function decorate(layers, rules) {
 // Function to process each style attribute for the layer
 function processStyling(layer, styleRule) {
     for (const [ruleKeyCamelCase, ruleValue] of Object.entries(styleRule)) {
+        if (ruleValue == null)
+            continue;
         // CamelCase to not-camel-case
         const ruleKey = ruleKeyCamelCase.replace(/[A-Z]/g, c => '-' + c.toLowerCase());
         const propertyDefs = maplibreProperties.get(layer.type + '/' + ruleKey);

package/dist/lib/random_color.d.ts

@@ -0,0 +1,9 @@
+export interface RandomColorOptions {
+    seed?: string;
+    hue?: number | string;
+    opacity?: number;
+    luminosity?: number | string;
+    saturation?: number | string;
+}
+export type RandomColorFunction = (options?: RandomColorOptions) => string;
+export default function randomColorGenerator(startSeed?: number | string): RandomColorFunction;

package/dist/lib/random_color.js

@@ -0,0 +1,150 @@
+export default function randomColorGenerator(startSeed) {
+    let seed = inputToSeed(startSeed);
+    const colorDictionary = initColorDictionary();
+    return randomColor;
+    function randomColor(options) {
+        options ??= {};
+        if (options.seed != null) {
+            seed = inputToSeed(options.seed);
+        }
+        options.opacity ??= 1;
+        const H = pickHue(options);
+        const S = pickSaturation(H, options);
+        const V = pickBrightness(H, S, options);
+        const hsl = HSVtoHSL([H, S, V]).map(v => v.toFixed(0));
+        if (options.opacity === 1) {
+            return `hsl(${hsl[0]},${hsl[1]}%,${hsl[2]}%)`;
+        }
+        else {
+            return `hsla(${hsl[0]},${hsl[1]}%,${hsl[2]}%,${options.opacity})`;
+        }
+    }
+    function pickHue(options) {
+        let hue = randomWithin(getHueRange(options.hue));
+        if (hue < 0)
+            hue = 360 + hue;
+        return hue;
+    }
+    function pickSaturation(hue, options) {
+        if (options.hue === 'monochrome')
+            return 0;
+        if (options.luminosity === 'random')
+            return randomWithin([0, 100]);
+        const { saturationRange } = getColorInfo(hue);
+        let [sMin, sMax] = saturationRange;
+        if (options.saturation === 'strong')
+            return sMax;
+        switch (options.luminosity) {
+            case 'bright':
+                sMin = 55;
+                break;
+            case 'dark':
+                sMin = sMax - 10;
+                break;
+            case 'light':
+                sMax = 55;
+                break;
+            default:
+        }
+        return randomWithin([sMin, sMax]);
+    }
+    function pickBrightness(h, s, options) {
+        let bMin = getMinimumBrightness(h, s), bMax = 100;
+        switch (options.luminosity) {
+            case 'dark':
+                bMax = Math.min(100, bMin + 20);
+                break;
+            case 'light':
+                bMin = (bMax + bMin) / 2;
+                break;
+            case 'random':
+                bMin = 0;
+                bMax = 100;
+                break;
+            default:
+        }
+        return randomWithin([bMin, bMax]);
+    }
+    function getMinimumBrightness(h, s) {
+        const { lowerBounds } = getColorInfo(h);
+        for (let i = 0; i < lowerBounds.length - 1; i++) {
+            const [s1, v1] = lowerBounds[i];
+            const [s2, v2] = lowerBounds[i + 1];
+            if (s >= s1 && s <= s2) {
+                const m = (v2 - v1) / (s2 - s1), b = v1 - m * s1;
+                return m * s + b;
+            }
+        }
+        return 0;
+    }
+    function getHueRange(hue) {
+        if (typeof hue === 'number') {
+            if (hue < 360 && hue > 0)
+                return [hue, hue];
+        }
+        if (typeof hue === 'string') {
+            const color = colorDictionary[hue];
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+            if (color?.hueRange)
+                return color.hueRange;
+        }
+        return [0, 360];
+    }
+    function getColorInfo(hue) {
+        // Maps red colors to make picking hue easier
+        if (hue >= 334 && hue <= 360)
+            hue -= 360;
+        for (const colorName in colorDictionary) {
+            const color = colorDictionary[colorName];
+            if (color.hueRange && hue >= color.hueRange[0] && hue <= color.hueRange[1]) {
+                return colorDictionary[colorName];
+            }
+        }
+        throw Error('Color not found');
+    }
+    function randomWithin(range) {
+        //Seeded random algorithm from http://indiegamr.com/generate-repeatable-random-numbers-in-js/
+        const max = range[1] || 1;
+        const min = range[0] || 0;
+        seed = (seed * 9301 + 49297) % 233280;
+        const rnd = seed / 233280.0;
+        return Math.floor(min + rnd * (max - min));
+    }
+    function initColorDictionary() {
+        const dic = {};
+        const defineColor = (name, hueRange, lowerBounds) => {
+            const [greyest] = lowerBounds;
+            const colorful = lowerBounds[lowerBounds.length - 1];
+            dic[name] = {
+                hueRange,
+                lowerBounds,
+                saturationRange: [greyest[0], colorful[0]],
+                brightnessRange: [colorful[1], greyest[1]],
+            };
+        };
+        defineColor('monochrome', null, [[0, 0], [100, 0]]);
+        defineColor('red', [-26, 18], [[20, 100], [30, 92], [40, 89], [50, 85], [60, 78], [70, 70], [80, 60], [90, 55], [100, 50]]);
+        defineColor('orange', [18, 46], [[20, 100], [30, 93], [40, 88], [50, 86], [60, 85], [70, 70], [100, 70]]);
+        defineColor('yellow', [46, 62], [[25, 100], [40, 94], [50, 89], [60, 86], [70, 84], [80, 82], [90, 80], [100, 75]]);
+        defineColor('green', [62, 178], [[30, 100], [40, 90], [50, 85], [60, 81], [70, 74], [80, 64], [90, 50], [100, 40]]);
+        defineColor('blue', [178, 257], [[20, 100], [30, 86], [40, 80], [50, 74], [60, 60], [70, 52], [80, 44], [90, 39], [100, 35]]);
+        defineColor('purple', [257, 282], [[20, 100], [30, 87], [40, 79], [50, 70], [60, 65], [70, 59], [80, 52], [90, 45], [100, 42]]);
+        defineColor('pink', [282, 334], [[20, 100], [30, 90], [40, 86], [60, 84], [80, 80], [90, 75], [100, 73]]);
+        return dic;
+    }
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    function HSVtoHSL(hsv) {
+        const s = hsv[1] / 100, v = hsv[2] / 100, k = (2 - s) * v;
+        return [hsv[0], 100 * s * v / (k < 1 ? k : 2 - k), 100 * k / 2];
+    }
+    function inputToSeed(input) {
+        if (input == null)
+            return 0;
+        if (typeof input === 'number')
+            return input;
+        let i = 0;
+        for (let p = 0; p < input.length; p++)
+            i = (i * 0x101 + input.charCodeAt(p)) % 0x100000000;
+        return i;
+    }
+}

package/dist/lib/random_color.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/random_color.test.js

@@ -0,0 +1,68 @@
+import randomColorGenerator from './random_color.js';
+describe('RandomColor', () => {
+    let randomColor;
+    beforeEach(() => {
+        randomColor = randomColorGenerator();
+    });
+    test('constructor initializes without errors', () => {
+        expect(randomColor).toBeDefined();
+    });
+    describe('randomColor method', () => {
+        test('returns a valid color string', () => {
+            const color = randomColor();
+            expect(isValidHSLA(color)).toBeTruthy();
+        });
+        test('returns correct color string for some test cases', () => {
+            expect(randomColor({ hue: 'red' })).toBe('hsl(343,65%,51%)');
+            expect(randomColor({ hue: 120 })).toBe('hsl(120,77%,32%)');
+            expect(randomColor({ luminosity: 'dark' })).toBe('hsl(135,96%,31%)');
+            expect(randomColor({ saturation: 'strong' })).toBe('hsl(193,100%,24%)');
+            expect(randomColor({ opacity: 0.5 })).toBe('hsla(242,55%,42%,0.5)');
+            expect(randomColor({ seed: 'testSeed' })).toBe('hsl(185,90%,23%)');
+        });
+        test('consistent color generation with a seed', () => {
+            const options = { seed: 'consistentSeed' };
+            const color1 = randomColor(options);
+            const color2 = randomColor(options);
+            expect(color1).toBe(color2);
+        });
+        test('different color generation without a seed', () => {
+            const color1 = randomColor();
+            const color2 = randomColor();
+            expect(color1).not.toBe(color2);
+        });
+    });
+});
+function isValidHSLA(textColor) {
+    let match, h, s, l, a;
+    if (textColor.startsWith('hsla')) {
+        match = /^hsla\((\d+),(\d+)%,(\d+)%,([.0-9]+)\)$/.exec(textColor);
+        if (match == null)
+            return false;
+        [, h, s, l, a] = match;
+    }
+    else {
+        match = /^hsl\((\d+),(\d+)%,(\d+)%\)$/.exec(textColor);
+        if (match == null)
+            return false;
+        [, h, s, l] = match;
+        a = '1';
+    }
+    if (!check(h, 0, 360))
+        return false;
+    if (!check(s, 0, 100))
+        return false;
+    if (!check(l, 0, 100))
+        return false;
+    if (!check(a, 0, 1))
+        return false;
+    return true;
+    function check(textNumber, min, max) {
+        const value = parseFloat(textNumber);
+        if (value < min)
+            return false;
+        if (value > max)
+            return false;
+        return true;
+    }
+}

package/dist/lib/recolor.d.ts

@@ -1,3 +1,4 @@
-import type { RecolorOptions, StylemakerColorLookup } from './types.js';
+import type { RecolorOptions, StylemakerColors } from './types.js';
+import type StyleBuilder from './style_builder.ts';
 export declare function getDefaultRecolorFlags(): RecolorOptions;
-export declare function recolor(colors: StylemakerColorLookup, opt?: RecolorOptions): void;
+export declare function recolor<Subclass extends StyleBuilder<Subclass>>(colors: StylemakerColors<Subclass>, opt?: RecolorOptions): void;

package/dist/lib/recolor.js

@@ -29,7 +29,8 @@ export function recolor(colors, opt) {
     if ((opt.tint !== undefined) && (opt.tintColor !== undefined) && (opt.tint !== 0))
         tint(opt.tint, Color(opt.tintColor));
     function forEachColor(callback) {
-        Object.entries(colors).forEach(([k, c]) => colors[k] = callback(c));
+        for (const k in colors)
+            colors[k] = callback(colors[k]);
     }
     function invert() {
         forEachColor(c => c.negate());

package/dist/lib/recolor.test.d.ts

@@ -1 +1,13 @@
-export {};
+import type { StyleRules, StyleRulesOptions } from './types.js';
+import StyleBuilder from './style_builder.js';
+export default class TestStyle extends StyleBuilder<TestStyle> {
+    readonly name: string;
+    defaultFonts: {};
+    defaultColors: {
+        c0: string;
+        c1: string;
+        c2: string;
+        c3: string;
+    };
+    protected getStyleRules(_options: StyleRulesOptions<TestStyle>): StyleRules;
+}

package/dist/lib/recolor.test.js

@@ -1,5 +1,5 @@
 import { getDefaultRecolorFlags, recolor } from './recolor.js';
-import Color from 'color';
+import StyleBuilder from './style_builder.js';
 describe('colorTransformer', () => {
     describe('getDefaultRecolorFlags', () => {
         it('should return the default color transformer flags', () => {
@@ -163,17 +163,30 @@ describe('colorTransformer', () => {
         });
     });
 });
-function string2colors(colorList) {
-    return Object.fromEntries(colorList.split(',')
-        .map((value, index) => ['color' + index, Color('#' + value)]));
-}
 function colors2string(colors) {
-    const colorArray = [];
-    for (let i = 0; ('color' + i) in colors; i++) {
-        colorArray.push(colors['color' + i].hexa().slice(1));
+    const colorArray = [
+        colors.c0,
+        colors.c1,
+        colors.c2,
+        colors.c3,
+    ];
+    return colorArray.map(c => c.hexa().slice(1)).join(',');
+}
+export default class TestStyle extends StyleBuilder {
+    name = 'teststyle';
+    defaultFonts = {};
+    defaultColors = {
+        c0: '#FFAA5500',
+        c1: '#00FFAA55',
+        c2: '#5500FFAA',
+        c3: '#AA5500FF',
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    getStyleRules(_options) {
+        throw new Error('Method not implemented.');
     }
-    return colorArray.join(',');
 }
 function getDefaultColors() {
-    return string2colors('FFAA5500,00FFAA55,5500FFAA,AA5500FF');
+    const style = new TestStyle();
+    return style.getColors(style.defaultColors);
 }

package/dist/lib/shortbread/layers.js

@@ -316,7 +316,7 @@ export default function getLayers(option) {
         {
             id: 'label-motorway-exit',
             type: 'symbol',
-            'source-layer': 'street_labels_points',
+            'source-layer': 'street_labels_points', // docs say `streets_labels_points`, but layer is actually called `street_labels_points`
             filter: ['==', 'kind', 'motorway_junction'],
             layout: { 'text-field': '{ref}' },
             // FIXME shield
@@ -394,7 +394,7 @@ export default function getLayers(option) {
         },
         // marking
         {
-            id: 'marking-oneway',
+            id: 'marking-oneway', // streets → oneway
             type: 'symbol',
             'source-layer': 'streets',
             filter: ['all',
@@ -411,7 +411,7 @@ export default function getLayers(option) {
             },
         },
         {
-            id: 'marking-oneway-reverse',
+            id: 'marking-oneway-reverse', // oneway_reverse
             type: 'symbol',
             'source-layer': 'streets',
             filter: ['all',
@@ -428,7 +428,7 @@ export default function getLayers(option) {
             },
         },
         {
-            id: 'marking-bicycle',
+            id: 'marking-bicycle', // bicycle=designated or kind=cycleway
             type: 'symbol',
             'source-layer': 'streets',
             filter: ['all',