@versatiles/style 5.2.6 → 5.2.7

package/src/shortbread/properties.ts

@@ -0,0 +1,142 @@
+
+export interface ShortbreadProperty {
+	readonly key: string;
+	readonly parent: 'layer' | 'layout' | 'paint';
+	readonly valueType: 'array' | 'boolean' | 'color' | 'enum' | 'filter' | 'fonts' | 'formatted' | 'number' | 'padding' | 'resolvedImage' | 'variableAnchorOffsetCollection';
+}
+
+type ShortbreadPropertyDef = ShortbreadProperty & {
+	readonly types: string;
+	readonly short?: string;
+};
+
+const propertyLookup = new Map<string, ShortbreadProperty[]>();
+
+const propertyDefs: ShortbreadPropertyDef[] = [
+	{ parent: 'layer', types: 'background,fill,line,symbol', key: 'filter', valueType: 'filter' },
+	{ parent: 'layer', types: 'background,fill,line,symbol', key: 'maxzoom', valueType: 'number' },
+	{ parent: 'layer', types: 'background,fill,line,symbol', key: 'minzoom', valueType: 'number' },
+
+	{ parent: 'layout', types: 'background,fill,line,symbol', key: 'visibility', valueType: 'enum' },
+	{ parent: 'layout', types: 'fill', key: 'fill-sort-key', valueType: 'number' },
+	{ parent: 'layout', types: 'line', key: 'line-cap', valueType: 'enum' },
+	{ parent: 'layout', types: 'line', key: 'line-join', valueType: 'enum' },
+	{ parent: 'layout', types: 'line', key: 'line-miter-limit', valueType: 'number' },
+	{ parent: 'layout', types: 'line', key: 'line-round-limit', valueType: 'number' },
+	{ parent: 'layout', types: 'line', key: 'line-sort-key', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-allow-overlap', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-anchor', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-ignore-placement', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-image', short: 'image', valueType: 'resolvedImage' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-keep-upright', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-offset', valueType: 'array' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-optional', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-overlap', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-padding', valueType: 'padding' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-pitch-alignment', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-rotate', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-rotation-alignment', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-size', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-text-fit-padding', valueType: 'array' },
+	{ parent: 'layout', types: 'symbol', key: 'icon-text-fit', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'symbol-avoid-edges', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'symbol-placement', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'symbol-sort-key', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'symbol-spacing', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'symbol-z-order', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-allow-overlap', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'text-anchor', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-field', short: 'text', valueType: 'formatted' },
+	{ parent: 'layout', types: 'symbol', key: 'text-font', short: 'font', valueType: 'fonts' },
+	{ parent: 'layout', types: 'symbol', key: 'text-ignore-placement', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'text-justify', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-keep-upright', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'text-letter-spacing', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-line-height', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-max-angle', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-max-width', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-offset', valueType: 'array' },
+	{ parent: 'layout', types: 'symbol', key: 'text-optional', valueType: 'boolean' },
+	{ parent: 'layout', types: 'symbol', key: 'text-overlap', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-padding', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-pitch-alignment', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-radial-offset', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-rotate', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-rotation-alignment', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-size', short: 'size', valueType: 'number' },
+	{ parent: 'layout', types: 'symbol', key: 'text-transform', valueType: 'enum' },
+	{ parent: 'layout', types: 'symbol', key: 'text-variable-anchor-offset', valueType: 'variableAnchorOffsetCollection' },
+	{ parent: 'layout', types: 'symbol', key: 'text-variable-anchor', valueType: 'array' },
+	{ parent: 'layout', types: 'symbol', key: 'text-writing-mode', valueType: 'array' },
+
+	{ parent: 'paint', types: 'background', key: 'background-color', short: 'color', valueType: 'color' },
+	{ parent: 'paint', types: 'background', key: 'background-opacity', short: 'opacity', valueType: 'number' },
+	{ parent: 'paint', types: 'background', key: 'background-pattern', short: 'image', valueType: 'resolvedImage' },
+	{ parent: 'paint', types: 'fill', key: 'fill-antialias', valueType: 'boolean' },
+	{ parent: 'paint', types: 'fill', key: 'fill-color', short: 'color', valueType: 'color' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-base', valueType: 'number' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-color', valueType: 'color' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-height', valueType: 'number' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-opacity', valueType: 'number' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-pattern', valueType: 'resolvedImage' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-translate-anchor', valueType: 'enum' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-translate', valueType: 'array' },
+	{ parent: 'paint', types: 'fill', key: 'fill-extrusion-vertical-gradient', valueType: 'boolean' },
+	{ parent: 'paint', types: 'fill', key: 'fill-opacity', short: 'opacity', valueType: 'number' },
+	{ parent: 'paint', types: 'fill', key: 'fill-outline-color', valueType: 'color' },
+	{ parent: 'paint', types: 'fill', key: 'fill-pattern', short: 'image', valueType: 'resolvedImage' },
+	{ parent: 'paint', types: 'fill', key: 'fill-translate-anchor', valueType: 'enum' },
+	{ parent: 'paint', types: 'fill', key: 'fill-translate', valueType: 'array' },
+	{ parent: 'paint', types: 'line', key: 'line-blur', valueType: 'number' },
+	{ parent: 'paint', types: 'line', key: 'line-color', short: 'color', valueType: 'color' },
+	{ parent: 'paint', types: 'line', key: 'line-dasharray', valueType: 'array' },
+	{ parent: 'paint', types: 'line', key: 'line-gap-width', valueType: 'number' },
+	{ parent: 'paint', types: 'line', key: 'line-gradient', valueType: 'color' },
+	{ parent: 'paint', types: 'line', key: 'line-offset', valueType: 'number' },
+	{ parent: 'paint', types: 'line', key: 'line-opacity', short: 'opacity', valueType: 'number' },
+	{ parent: 'paint', types: 'line', key: 'line-pattern', short: 'image', valueType: 'resolvedImage' },
+	{ parent: 'paint', types: 'line', key: 'line-translate-anchor', valueType: 'enum' },
+	{ parent: 'paint', types: 'line', key: 'line-translate', valueType: 'array' },
+	{ parent: 'paint', types: 'line', key: 'line-width', short: 'size', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-color', short: 'color', valueType: 'color' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-halo-blur', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-halo-color', valueType: 'color' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-halo-width', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-opacity', short: 'opacity', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-translate-anchor', valueType: 'enum' },
+	{ parent: 'paint', types: 'symbol', key: 'icon-translate', valueType: 'array' },
+	{ parent: 'paint', types: 'symbol', key: 'text-color', short: 'color', valueType: 'color' },
+	{ parent: 'paint', types: 'symbol', key: 'text-halo-blur', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'text-halo-color', valueType: 'color' },
+	{ parent: 'paint', types: 'symbol', key: 'text-halo-width', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'text-opacity', short: 'opacity', valueType: 'number' },
+	{ parent: 'paint', types: 'symbol', key: 'text-translate-anchor', valueType: 'enum' },
+	{ parent: 'paint', types: 'symbol', key: 'text-translate', valueType: 'array' },
+];
+
+propertyDefs.forEach((propertyDef: ShortbreadPropertyDef) => {
+	const types: string = propertyDef.types;
+
+	types.split(',').forEach((type: string) => {
+
+		function add(propertyKey: string): void {
+			const key = type + '/' + propertyKey;
+			const property: ShortbreadProperty = {
+				key: propertyDef.key,
+				parent: propertyDef.parent,
+				valueType: propertyDef.valueType,
+			};
+			const propertyList: ShortbreadProperty[] | undefined = propertyLookup.get(key);
+			if (propertyList) {
+				propertyList.push(property);
+			} else {
+				propertyLookup.set(key, [property]);
+			}
+		}
+
+		add(propertyDef.key);
+		if (propertyDef.short != null) add(propertyDef.short);
+	});
+});
+
+export default propertyLookup;

package/src/shortbread/template.test.ts

@@ -0,0 +1,43 @@
+import { VectorSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+import { getShortbreadTemplate } from './template.js';
+
+describe('getShortbreadTemplate', () => {
+	const styleTemplate = getShortbreadTemplate();
+
+	it('returns a style object with the correct version', () => {
+		expect(styleTemplate).toHaveProperty('version', 8);
+	});
+
+	it('has the expected name for the style', () => {
+		expect(styleTemplate).toHaveProperty('name', 'versatiles');
+	});
+
+	it('contains metadata with expected properties', () => {
+		expect(styleTemplate).toHaveProperty('metadata');
+		expect(styleTemplate.metadata).toHaveProperty('license', 'https://creativecommons.org/publicdomain/zero/1.0/');
+	});
+
+	it('specifies glyphs and sprite URLs correctly', () => {
+		expect(styleTemplate).toHaveProperty('glyphs', 'https://tiles.versatiles.org/assets/glyphs/{fontstack}/{range}.pbf');
+		expect(styleTemplate).toHaveProperty('sprite', [{ id: 'basics', url: 'https://tiles.versatiles.org/assets/sprites/basics/sprites' }]);
+	});
+
+	it('defines sources with required properties', () => {
+		expect(styleTemplate).toHaveProperty('sources');
+		const sources = styleTemplate.sources['versatiles-shortbread'] as VectorSourceSpecification;
+		expect(sources).toHaveProperty('type', 'vector');
+		expect(sources).toHaveProperty('scheme', 'xyz');
+		expect(sources).toHaveProperty('tiles');
+		expect(sources.tiles).toContain('https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}');
+	});
+
+	it('sets bounds to the expected global extent', () => {
+		const expectedBounds = [-180, -85.0511287798066, 180, 85.0511287798066];
+		expect(styleTemplate.sources['versatiles-shortbread']).toHaveProperty('bounds', expectedBounds);
+	});
+
+	it('has layers array initialized as empty', () => {
+		expect(styleTemplate).toHaveProperty('layers');
+		expect(styleTemplate.layers).toEqual([]);
+	});
+});

package/src/shortbread/template.ts

@@ -0,0 +1,343 @@
+import { StyleSpecification } from "@maplibre/maplibre-gl-style-spec";
+import { VectorLayer } from "../types/vector_layer.js";
+
+const maxzoom = 14;
+
+export function getShortbreadTemplate(): StyleSpecification {
+	return {
+		version: 8,
+		name: 'versatiles',
+		metadata: {
+			license: 'https://creativecommons.org/publicdomain/zero/1.0/',
+		},
+		glyphs: 'https://tiles.versatiles.org/assets/glyphs/{fontstack}/{range}.pbf',
+		sprite: [{ id: 'basics', url: 'https://tiles.versatiles.org/assets/sprites/basics/sprites' }],
+		sources: {
+			'versatiles-shortbread': {
+				attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+				tiles: [
+					'https://tiles.versatiles.org/tiles/osm/{z}/{x}/{y}',
+				],
+				type: 'vector',
+				scheme: 'xyz',
+				bounds: [
+					-180,
+					-85.0511287798066,
+					180,
+					85.0511287798066,
+				],
+				minzoom: 0,
+				maxzoom
+			},
+		},
+		layers: [],
+	};
+}
+
+export function getShortbreadVectorLayers(): VectorLayer[] {
+	return [
+		{
+			id: 'place_labels',
+			fields: {
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				population: 'Number',
+			},
+			minzoom: 3,
+			maxzoom,
+		},
+		{
+			id: 'boundaries',
+			fields: {
+				admin_level: 'Number',
+				coastline: 'Boolean',
+				disputed: 'Boolean',
+				maritime: 'Boolean',
+			},
+			minzoom: 0,
+			maxzoom,
+		},
+		{
+			id: 'boundary_labels',
+			fields: {
+				admin_level: 'Number',
+				land_area: 'Number',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				name_single: 'String',
+				way_area: 'Number',
+			},
+			minzoom: 2,
+			maxzoom,
+		},
+		{
+			id: 'addresses',
+			fields: {
+				housename: 'String',
+				housenumber: 'String',
+			},
+			minzoom: 14,
+			maxzoom,
+		},
+		{
+			id: 'water_lines',
+			fields: {
+				bridge: 'Boolean',
+				kind: 'String',
+				tunnel: 'Boolean',
+			},
+			minzoom: 4,
+			maxzoom,
+		},
+		{
+			id: 'water_lines_labels',
+			fields: {
+				bridge: 'Boolean',
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				tunnel: 'Boolean',
+			},
+			minzoom: 4,
+			maxzoom,
+		},
+		{
+			id: 'dam_lines',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'dam_polygons',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'pier_lines',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'pier_polygons',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'bridges',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'street_polygons',
+			fields: {
+				bridge: 'Boolean',
+				kind: 'String',
+				rail: 'Boolean',
+				service: 'String',
+				surface: 'String',
+				tunnel: 'Boolean',
+			},
+			minzoom: 11,
+			maxzoom,
+		},
+		{
+			id: 'streets_polygons_labels',
+			fields: {
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+			},
+			minzoom: 14,
+			maxzoom,
+		},
+		{
+			id: 'ferries',
+			fields: {
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+			},
+			minzoom: 8,
+			maxzoom,
+		},
+		{
+			id: 'streets',
+			fields: {
+				bicycle: 'String',
+				bridge: 'Boolean',
+				horse: 'String',
+				kind: 'String',
+				link: 'Boolean',
+				oneway: 'Boolean',
+				oneway_reverse: 'Boolean',
+				rail: 'Boolean',
+				service: 'String',
+				surface: 'String',
+				tracktype: 'String',
+				tunnel: 'Boolean',
+			},
+			minzoom: 5,
+			maxzoom,
+		},
+		{
+			id: 'street_labels',
+			fields: {
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				ref: 'String',
+				ref_cols: 'Number',
+				ref_rows: 'Number',
+				tunnel: 'Boolean',
+			},
+			minzoom: 10,
+			maxzoom,
+		},
+		{
+			id: 'street_labels_points',
+			fields: {
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				ref: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'aerialways',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 12,
+			maxzoom,
+		},
+		{
+			id: 'public_transport',
+			fields: {
+				iata: 'String',
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				station: 'String',
+			},
+			minzoom: 11,
+			maxzoom,
+		},
+		{
+			id: 'buildings',
+			fields: {
+				amenity: 'String',
+				dummy: 'Number',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+			},
+			minzoom: 14,
+			maxzoom,
+		},
+		{
+			id: 'water_polygons',
+			fields: {
+				kind: 'String',
+				way_area: 'Number',
+			},
+			minzoom: 4,
+			maxzoom,
+		},
+		{
+			id: 'ocean',
+			fields: {
+				x: 'Number',
+				y: 'Number',
+			},
+			minzoom: 0,
+			maxzoom,
+		},
+		{
+			id: 'water_polygons_labels',
+			fields: {
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				way_area: 'Number',
+			},
+			minzoom: 14,
+			maxzoom,
+		},
+		{
+			id: 'land',
+			fields: {
+				kind: 'String',
+			},
+			minzoom: 7,
+			maxzoom,
+		},
+		{
+			id: 'sites',
+			fields: {
+				amenity: 'String',
+				kind: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+			},
+			minzoom: 14,
+			maxzoom,
+		},
+		{
+			id: 'pois',
+			fields: {
+				amenity: 'String',
+				atm: 'Boolean',
+				cuisine: 'String',
+				denomination: 'String',
+				emergency: 'String',
+				highway: 'String',
+				historic: 'String',
+				information: 'String',
+				leisure: 'String',
+				man_made: 'String',
+				name: 'String',
+				name_de: 'String',
+				name_en: 'String',
+				'recycling:clothes': 'Boolean',
+				'recycling:glass_bottles': 'Boolean',
+				'recycling:paper': 'Boolean',
+				'recycling:scrap_metal': 'Boolean',
+				religion: 'String',
+				shop: 'String',
+				sport: 'String',
+				tourism: 'String',
+				'tower:type': 'String',
+				vending: 'String',
+			},
+			minzoom: 14,
+			maxzoom,
+		},
+	]
+}

package/src/style_builder/decorator.test.ts

@@ -0,0 +1,67 @@
+import { decorate } from './decorator.js';
+import { Color } from '../color/index.js';
+import type { MaplibreLayer } from '../types/maplibre.js';
+import { CachedRecolor } from './recolor.js';
+
+describe('decorate function', () => {
+	const mockLayers: MaplibreLayer[] = [
+		{ id: 'layer1', type: 'fill', layout: {}, paint: {}, source: 'versatiles-shortbread' },
+		{ id: 'layer2', type: 'line', layout: {}, paint: {}, source: 'versatiles-shortbread' },
+	];
+
+	const mockRules = {
+		'layer1': {
+			color: '#ff0000',
+			visibility: 'none',
+		},
+		'layer2': {
+			color: 'rgba(0, 255, 0, 0.5)',
+			visibility: 'visible',
+		},
+	};
+
+	const noRecolor = new CachedRecolor();
+
+	it('should return an array of layers', () => {
+		const result = decorate(mockLayers, mockRules, noRecolor);
+		expect(Array.isArray(result)).toBe(true);
+	});
+
+	it('should apply styles from rules to the corresponding layers', () => {
+		const result = decorate(mockLayers, mockRules, noRecolor);
+
+		result.forEach(layer => {
+			if (layer.id === 'layer1') {
+				expect(layer.paint).toHaveProperty('fill-color', 'rgb(255,0,0)');
+				expect(layer.layout).toHaveProperty('visibility', 'none');
+			}
+			if (layer.id === 'layer2') {
+				expect(layer.paint).toHaveProperty('line-color', 'rgba(0,255,0,0.5)');
+				expect(layer.layout).toHaveProperty('visibility', 'visible');
+			}
+		});
+	});
+
+	it('should handle color conversion correctly', () => {
+		const colorRule = {
+			'layer1': {
+				paintColor: Color.parse('#ff0000'),
+			},
+		};
+		const result = decorate(mockLayers, colorRule, noRecolor);
+		const layer0: MaplibreLayer = result[0];
+
+		expect(layer0).toBeDefined();
+		if (typeof layer0 === 'undefined') return;
+
+		expect(layer0.paint).toBeDefined();
+		if (typeof layer0.paint === 'undefined') return;
+
+		expect(layer0.paint).toHaveProperty('fill-color', 'rgb(255,0,0)');
+	});
+
+	it('should discard layers that have no style rules applied', () => {
+		const result = decorate(mockLayers, {}, noRecolor);
+		expect(result.length).toBe(0);
+	});
+});