@versatiles/style 3.5.0 → 3.5.2

package/README.MD

@@ -20,28 +20,16 @@ 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.
 
-## as Node.js module
-
-Install `versatiles-style` via NPM:
-```bash
-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));
-```
-
 ## in a web browser
 
 Download latest release:
+
 ```bash
 wget "https://github.com/versatiles-org/versatiles-style/releases/latest/download/versatiles-style.js"
 ```
 
 Use it in:
+
 ```html
 <div id="map"></div>
 <script src="maplibre-gl.js"></script>
@@ -59,39 +47,22 @@ Use it in:
 <script>
 ```
 
-## Generate styles
-
-`npm run build`
-
-## Add/edit styles
-
-* style definitions in `src/style/*.js`
-* shortbread layer definition in `src/lib/shortbread_layers.js`
-* style template in `src/lib/shortbread_template.json`
-
-## Licenses
-
-* Code: [Unlicense](LICENSE.md)
-* Styles: [CC0 1.0 Universal](https://creativecommons.org/publicdomain/zero/1.0/)
-
-# todo
-
-* [x] convert 'in' to '==' if only one element
-* [x] outlines for roads, buildings, boundaries
-* [x] :en labels
-* [x] links under other roads, sort by size
-* [x] waterway width
-* [x] rail colorscheme
-* [x] bridge semitransparent
-* [x] cycleways and bicycle-roads
-* [x] trams
-* [x] rail zooms 17+
-* [x] minor rails
-* [x] more sites and landcovers
-* [x] airports
-* [x] pois
-* [x] sprites and patterns, revisit sprites
-* [x] public transport signage
-* [x] road signage
-* [ ] labels for rivers, islands, places
-* [ ] aggregate layers with same filters and style for smaller result
+## as Node.js module
+
+Install `versatiles-style` via NPM:
+
+```bash
+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));
+```
+
+### Node.js API
+
+<!--- This chapter is generated automatically --->

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export type { MaplibreStyle } from './lib/style_builder.js';
+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';

package/dist/index.test.js

@@ -24,7 +24,6 @@ describe('Style Builders', () => {
             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');
-            // @ts-expect-error: Still Overwhelmed
             expect(style.sources['versatiles-shortbread'].tiles).toEqual(['https://example.org/tiles/osm/{z}/{x}/{y}']);
         });
     });

package/dist/lib/decorator.d.ts

@@ -1,3 +1,2 @@
-import type { MaplibreLayer } from './shortbread/layers.js';
-import type { StyleRules } from './style_builder.js';
+import type { MaplibreLayer, StyleRules } from './types.js';
 export declare function decorate(layers: MaplibreLayer[], rules: StyleRules): MaplibreLayer[];

package/dist/lib/decorator.test.js

@@ -2,8 +2,8 @@ import { decorate } from './decorator.js';
 import Color from 'color';
 describe('decorate function', () => {
     const mockLayers = [
-        { id: 'layer1', type: 'fill', layout: {}, paint: {} },
-        { id: 'layer2', type: 'line', layout: {}, paint: {} },
+        { id: 'layer1', type: 'fill', layout: {}, paint: {}, source: 'versatiles-shortbread' },
+        { id: 'layer2', type: 'line', layout: {}, paint: {}, source: 'versatiles-shortbread' },
     ];
     const mockRules = {
         'layer1': {

package/dist/lib/recolor.d.ts

@@ -1,13 +1,3 @@
-import type { StylemakerColorLookup } from './style_builder.js';
-export interface RecolorOptions {
-    invert?: boolean;
-    rotate?: number;
-    saturate?: number;
-    gamma?: number;
-    contrast?: number;
-    brightness?: number;
-    tint?: number;
-    tintColor?: string;
-}
+import type { RecolorOptions, StylemakerColorLookup } from './types.js';
 export declare function getDefaultRecolorFlags(): RecolorOptions;
 export declare function recolor(colors: StylemakerColorLookup, opt?: RecolorOptions): void;

package/dist/lib/shortbread/layers.d.ts

@@ -1,7 +1,4 @@
-import type { BackgroundLayer, FillLayer, LineLayer, SymbolLayer } from 'mapbox-gl';
-import type { LanguageSuffix } from '../style_builder.js';
-export type MaplibreLayer = BackgroundLayer | FillLayer | LineLayer | SymbolLayer;
-export type MaplibreFilter = unknown[];
+import type { LanguageSuffix, MaplibreLayerDefinition } from '../types.js';
 export default function getLayers(option: {
     readonly languageSuffix: LanguageSuffix;
-}): MaplibreLayer[];
+}): MaplibreLayerDefinition[];

package/dist/lib/shortbread/layers.js

@@ -108,7 +108,8 @@ export default function getLayers(option) {
         },
         // tunnel-, street-, bridges-bridge
         ...['tunnel', 'street', 'bridge'].flatMap((c) => {
-            let filter, prefix;
+            let filter;
+            let prefix;
             const results = [];
             switch (c) {
                 case 'tunnel':
@@ -139,8 +140,8 @@ export default function getLayers(option) {
                         type: 'fill',
                         'source-layer': 'street_polygons',
                         filter: ['all',
-                            ['==', 'kind', 'pedestrian'],
                             ...filter,
+                            ['==', 'kind', 'pedestrian'],
                         ],
                     });
                 // non-car streets
@@ -150,12 +151,13 @@ export default function getLayers(option) {
                         type: 'line',
                         'source-layer': 'streets',
                         filter: ['all',
-                            ['in', 'kind', t],
                             ...filter,
+                            ['in', 'kind', t],
                         ],
                     });
                 });
                 // no links
+                const noDrivewayExpression = ['!=', 'service', 'driveway'];
                 ['track', 'pedestrian', 'service', 'living_street', 'residential', 'unclassified'].forEach(t => {
                     results.push({
                         id: prefix + 'street-' + t.replace(/_/g, '') + suffix,
@@ -164,7 +166,7 @@ export default function getLayers(option) {
                         filter: ['all',
                             ['==', 'kind', t],
                             ...filter,
-                            ...(t === 'service') ? [['!=', 'service', 'driveway']] : [], // ignore driveways
+                            ...(t === 'service') ? [noDrivewayExpression] : [], // ignore driveways
                         ],
                     });
                 });
@@ -179,7 +181,7 @@ export default function getLayers(option) {
                                 ['==', 'kind', t],
                                 ['==', 'bicycle', 'designated'],
                                 ...filter,
-                                ...(t === 'service') ? [['!=', 'service', 'driveway']] : [], // ignore driveways
+                                ...(t === 'service') ? [noDrivewayExpression] : [], // ignore driveways
                             ],
                         });
                     });
@@ -190,9 +192,9 @@ export default function getLayers(option) {
                         type: 'line',
                         'source-layer': 'streets',
                         filter: ['all',
+                            ...filter,
                             ['in', 'kind', t],
                             ['==', 'link', true],
-                            ...filter,
                         ],
                     });
                 });
@@ -203,9 +205,9 @@ export default function getLayers(option) {
                         type: 'line',
                         'source-layer': 'streets',
                         filter: ['all',
+                            ...filter,
                             ['in', 'kind', t],
                             ['!=', 'link', true],
-                            ...filter,
                         ],
                     });
                 });
@@ -233,8 +235,8 @@ export default function getLayers(option) {
                             type: 'line',
                             'source-layer': 'aerialways',
                             filter: ['all',
-                                ['in', 'kind', t],
                                 ...filter,
+                                ['in', 'kind', t],
                             ],
                         });
                     });

package/dist/lib/shortbread/layers.test.js

@@ -22,6 +22,6 @@ describe('layers', () => {
         const layers = getLayers({ languageSuffix });
         const landLayer = layers.find((layer) => layer.id === 'land-agriculture');
         expect(landLayer).toBeDefined();
-        expect(landLayer?.filter).toEqual(['all', ['in', 'kind', 'brownfield', 'farmland', 'farmyard', 'greenfield', 'greenhouse_horticulture', 'orchard', 'plant_nursery', 'vineyard']]);
+        expect(landLayer.filter).toEqual(['all', ['in', 'kind', 'brownfield', 'farmland', 'farmyard', 'greenfield', 'greenhouse_horticulture', 'orchard', 'plant_nursery', 'vineyard']]);
     });
 });

package/dist/lib/shortbread/template.d.ts

@@ -1,2 +1,2 @@
-import type { MaplibreStyle } from '../style_builder.js';
-export default function getTemplate(): MaplibreStyle;
+import type { MaplibreStyleVector } from '../types.js';
+export default function getTemplate(): MaplibreStyleVector;

package/dist/lib/shortbread/template.test.js

@@ -39,8 +39,6 @@ describe('getTemplate', () => {
         expect(styleTemplate.sources).toBeDefined();
         const { vector_layers } = styleTemplate.sources['versatiles-shortbread'];
         expect(typeof vector_layers).toBe('object');
-        if (!vector_layers)
-            return;
         it('contains vector_layers with id and fields', () => {
             expect(Array.isArray(vector_layers)).toBeTruthy();
             vector_layers.forEach(layer => {

package/dist/lib/style_builder.d.ts

@@ -1,18 +1,5 @@
 import Color from 'color';
-import type { RecolorOptions } from './recolor.js';
-import type { Style } from 'mapbox-gl';
-export type MaplibreStyle = Style;
-export type StyleRuleValue = boolean | number | object | string;
-export type StyleRule = Record<string, StyleRuleValue>;
-export type StyleRules = Record<string, StyleRule>;
-export type StylemakerColorLookup = Record<string, Color>;
-export type StylemakerStringLookup = Record<string, string>;
-export type LanguageSuffix = '_de' | '_en' | '';
-export interface StyleRulesOptions {
-    colors: StylemakerColorLookup;
-    fonts: StylemakerStringLookup;
-    languageSuffix: string;
-}
+import type { LanguageSuffix, MaplibreStyle, RecolorOptions, StyleRules, StyleRulesOptions } from './types.js';
 export default abstract class StyleBuilder {
     #private;
     baseUrl: string;

package/dist/lib/style_builder.js

@@ -38,26 +38,26 @@ export default class StyleBuilder {
             languageSuffix: this.languageSuffix,
         });
         // get shortbread layers
-        let layers = getShortbreadLayers({ languageSuffix: this.languageSuffix });
-        // apply layer rules
-        layers = decorate(layers, layerStyleRules);
-        // hide labels, if wanted
-        if (this.hideLabels)
-            layers = layers.filter(l => l.type !== 'symbol');
-        // set source, if needed
-        layers.forEach(layer => {
+        const layerDefinitions = getShortbreadLayers({ languageSuffix: this.languageSuffix });
+        let layers = layerDefinitions.map(layer => {
             switch (layer.type) {
                 case 'background':
-                    delete layer.source;
-                    return;
+                    return layer;
                 case 'fill':
                 case 'line':
                 case 'symbol':
-                    layer.source = this.#sourceName;
-                    return;
+                    return {
+                        ...layer,
+                        source: this.#sourceName,
+                    };
             }
             throw Error('unknown layer type');
         });
+        // apply layer rules
+        layers = decorate(layers, layerStyleRules);
+        // hide labels, if wanted
+        if (this.hideLabels)
+            layers = layers.filter(l => l.type !== 'symbol');
         style.layers = layers;
         style.name = 'versatiles-' + this.name;
         style.glyphs = resolveUrl(this.baseUrl, this.glyphsUrl);

package/dist/lib/style_builder.test.js

@@ -68,8 +68,6 @@ describe('StyleBuilder', () => {
             expect(style.sprite).toBe('https://my.base.url/assets/sprites/sprites');
             const source = style.sources['versatiles-shortbread'];
             expect(source).toHaveProperty('tiles');
-            if (!source.tiles)
-                return;
             expect(source.tiles[0]).toBe('https://my.base.url/tiles/osm/{z}/{x}/{y}');
         });
     });

package/dist/lib/types.d.ts

@@ -0,0 +1,70 @@
+import type { BackgroundLayerSpecification, FillLayerSpecification, FilterSpecification, LineLayerSpecification, StyleSpecification, SymbolLayerSpecification } from '@maplibre/maplibre-gl-style-spec';
+import type Color from 'color';
+export type TileFormat = 'avif' | 'bin' | 'geojson' | 'jpg' | 'json' | 'pbf' | 'png' | 'svg' | 'topojson' | 'webp';
+export type MaplibreLayer = BackgroundLayerSpecification | FillLayerSpecification | LineLayerSpecification | SymbolLayerSpecification;
+export type MaplibreLayerDefinition = BackgroundLayerSpecification | Omit<FillLayerSpecification, 'source'> | Omit<LineLayerSpecification, 'source'> | Omit<SymbolLayerSpecification, 'source'>;
+export type MaplibreFilter = FilterSpecification;
+export interface VectorLayer {
+    id: string;
+    fields: Record<string, 'Boolean' | 'Number' | 'String'>;
+    description?: string;
+    minzoom?: number;
+    maxzoom?: number;
+}
+export interface TileJSONSpecificationRaster {
+    tilejson?: '3.0.0';
+    type: 'raster';
+    attribution?: string;
+    tiles: string[];
+    scheme?: 'tms' | 'xyz';
+    bounds?: [number, number, number, number];
+    center?: [number, number];
+    description?: string;
+    fillzoom?: number;
+    grids?: string[];
+    legend?: string;
+    minzoom?: number;
+    maxzoom?: number;
+    name?: string;
+    template?: string;
+    format: 'avif' | 'jpg' | 'png' | 'webp';
+}
+export interface TileJSONSpecificationVector extends Omit<TileJSONSpecificationRaster, 'format' | 'type'> {
+    vector_layers: VectorLayer[];
+    format: 'pbf';
+    type: 'vector';
+}
+export type TileJSONSpecification = TileJSONSpecificationRaster | TileJSONSpecificationVector;
+export type MaplibreStyleRaster = Omit<StyleSpecification, 'sources'> & {
+    'sources': {
+        [_: string]: TileJSONSpecificationRaster;
+    };
+};
+export type MaplibreStyleVector = Omit<StyleSpecification, 'sources'> & {
+    'sources': {
+        [_: string]: TileJSONSpecificationVector;
+    };
+};
+export type MaplibreStyle = MaplibreStyleRaster | MaplibreStyleVector;
+export type StyleRuleValue = boolean | number | object | string;
+export type StyleRule = Record<string, StyleRuleValue>;
+export type StyleRules = Record<string, StyleRule>;
+export type StylemakerColorLookup = Record<string, Color>;
+export type StylemakerStringLookup = Record<string, string>;
+export type LanguageSuffix = '_de' | '_en' | '';
+export interface StyleRulesOptions {
+    colors: StylemakerColorLookup;
+    fonts: StylemakerStringLookup;
+    languageSuffix: string;
+}
+export interface RecolorOptions {
+    invert?: boolean;
+    rotate?: number;
+    saturate?: number;
+    gamma?: number;
+    contrast?: number;
+    brightness?: number;
+    tint?: number;
+    tintColor?: string;
+}
+export declare function isTileJSONSpecification(obj: unknown): obj is TileJSONSpecification;

package/dist/lib/types.js

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
+export function isTileJSONSpecification(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        throw Error('spec must be an object');
+    }
+    const spec = obj;
+    // Common property validation
+    if (typeof spec.tilejson !== 'undefined' && spec.tilejson !== '3.0.0') {
+        throw Error('spec.tilejson must be "3.0.0" if present');
+    }
+    if (typeof spec.attribution !== 'undefined' && typeof spec.attribution !== 'string') {
+        throw Error('spec.attribution must be a string if present');
+    }
+    if (typeof spec.scheme !== 'undefined' && !['tms', 'xyz'].includes(spec.scheme)) {
+        throw Error('spec.scheme must be "tms" or "xyz" if present');
+    }
+    if (typeof spec.bounds !== 'undefined' && (!Array.isArray(spec.bounds) || spec.bounds.length !== 4 || spec.bounds.some(num => typeof num !== 'number'))) {
+        throw Error('spec.bounds must be an array of four numbers if present');
+    }
+    if (typeof spec.center !== 'undefined' && (!Array.isArray(spec.center) || spec.center.length !== 2 || spec.center.some(num => typeof num !== 'number'))) {
+        throw Error('spec.center must be an array of two numbers if present');
+    }
+    if (typeof spec.description !== 'undefined' && typeof spec.description !== 'string') {
+        throw Error('spec.description must be a string if present');
+    }
+    if (typeof spec.fillzoom !== 'undefined' && typeof spec.fillzoom !== 'number') {
+        throw Error('spec.fillzoom must be a number if present');
+    }
+    if (typeof spec.grids !== 'undefined' && (!Array.isArray(spec.grids) || spec.grids.some(url => typeof url !== 'string'))) {
+        throw Error('spec.grids must be an array of strings if present');
+    }
+    if (typeof spec.legend !== 'undefined' && typeof spec.legend !== 'string') {
+        throw Error('spec.legend must be a string if present');
+    }
+    if (typeof spec.minzoom !== 'undefined' && typeof spec.minzoom !== 'number') {
+        throw Error('spec.minzoom must be a number if present');
+    }
+    if (typeof spec.maxzoom !== 'undefined' && typeof spec.maxzoom !== 'number') {
+        throw Error('spec.maxzoom must be a number if present');
+    }
+    if (typeof spec.name !== 'undefined' && typeof spec.name !== 'string') {
+        throw Error('spec.name must be a string if present');
+    }
+    if (typeof spec.template !== 'undefined' && typeof spec.template !== 'string') {
+        throw Error('spec.template must be a string if present');
+    }
+    if (spec.type === 'raster') {
+        if (!['avif', 'jpg', 'png', 'webp'].includes(spec.format)) {
+            throw Error('spec.format must be "avif", "jpg", "png", or "webp"');
+        }
+        if (!Array.isArray(spec.tiles) || spec.tiles.some(url => typeof url !== 'string')) {
+            throw Error('spec.tiles must be an array of strings');
+        }
+    }
+    else if (spec.type === 'vector') {
+        if (spec.format !== 'pbf') {
+            throw Error('spec.format must be "pbf"');
+        }
+        if (!Array.isArray(spec.vector_layers) || spec.vector_layers.some(layer => !validateVectorLayer(layer))) {
+            throw Error('spec.vector_layers must be an array of VectorLayer');
+        }
+    }
+    else {
+        throw Error('spec.type must be "raster" or "vector"');
+    }
+    return true;
+}
+function validateVectorLayer(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        throw Error('layer must be an object');
+    }
+    const layer = obj;
+    if (typeof layer.id !== 'string') {
+        throw Error('layer.id must be a string');
+    }
+    if (typeof layer.fields !== 'object' || layer.fields === null || Object.values(layer.fields).some(type => !['Boolean', 'Number', 'String'].includes(type))) {
+        throw Error('layer.fields must be an object with values "Boolean", "Number", or "String"');
+    }
+    if (typeof layer.description !== 'undefined' && typeof layer.description !== 'string') {
+        throw Error('layer.description must be a string if present');
+    }
+    if (typeof layer.minzoom !== 'undefined' && (typeof layer.minzoom !== 'number' || layer.minzoom < 0)) {
+        throw Error('layer.minzoom must be a non-negative number if present');
+    }
+    if (typeof layer.maxzoom !== 'undefined' && (typeof layer.maxzoom !== 'number' || layer.maxzoom < 0)) {
+        throw Error('layer.maxzoom must be a non-negative number if present');
+    }
+    return true;
+}

package/dist/style/colorful.d.ts

@@ -1,5 +1,5 @@
 import StyleBuilder from '../lib/style_builder.js';
-import type { StyleRules, StyleRulesOptions } from '../lib/style_builder.js';
+import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
 export default class Colorful extends StyleBuilder {
     readonly name: string;
     fonts: {

package/dist/style/neutrino.d.ts

@@ -1,5 +1,5 @@
 import StyleBuilder from '../lib/style_builder.js';
-import type { StyleRules, StyleRulesOptions } from '../lib/style_builder.js';
+import type { StyleRules, StyleRulesOptions } from '../lib/types.js';
 export default class Neutrino extends StyleBuilder {
     readonly name: string;
     fonts: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@versatiles/style",
-  "version": "3.5.0",
+  "version": "3.5.2",
   "description": "Generate StyleJSON for MapLibre",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,9 +8,11 @@
     "check": "npm run lint && npm run build && npm run test",
     "build": "npm run build-browser && npm run build-node && npm run build-styles",
     "build-browser": "rollup -c=rollup.config.js",
-    "build-node": "rm -rf dist && tsc -p tsconfig.node.json",
+    "build-node": "rm -rf dist && tsc -p tsconfig.node.json && chmod +x dist/index.js",
     "build-styles": "tsx scripts/build-styles.ts",
-    "lint": "eslint .",
+    "doc": "vrt ts2md src/index.ts tsconfig.node.json | vrt insertmd README.md '### Node.js API'",
+    "lint": "eslint --color .",
+    "prepublish": "npm run build && npm run doc",
     "release": "tsx scripts/release.ts",
     "test": "npm run test-node && npm run test-coverage && npm run test-browser",
     "test-browser": "npm run build-browser && echo 'add browser test'",
@@ -27,7 +29,6 @@
   "type": "module",
   "dependencies": {
     "@types/color": "^3.0.6",
-    "@types/mapbox-gl": "^2.7.18",
     "brace-expansion": "^3.0.0",
     "color": "^4.2.3"
   },
@@ -44,19 +45,20 @@
     "@types/brace-expansion": "^1.1.2",
     "@types/inquirer": "^9.0.7",
     "@types/jest": "^29.5.8",
-    "@types/node": "^20.9.0",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "eslint": "^8.53.0",
+    "@types/node": "^20.9.2",
+    "@typescript-eslint/eslint-plugin": "^6.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
+    "@versatiles/release-tool": "^1.0.1",
+    "eslint": "^8.54.0",
     "inquirer": "^9.2.12",
     "jest": "^29.7.0",
     "jest-ts-webcompat-resolver": "^1.0.0",
-    "npm-check-updates": "^16.14.6",
-    "rollup": "^4.3.1",
+    "npm-check-updates": "^16.14.11",
+    "rollup": "^4.5.0",
     "rollup-plugin-dts": "^6.1.0",
     "ts-jest": "^29.1.1",
     "ts-node": "^10.9.1",
-    "tsx": "^4.1.1",
+    "tsx": "^4.1.4",
     "typescript": "^5.2.2"
   }
 }