@versatiles/style 5.2.6 → 5.2.7

package/src/color/utils.test.ts

@@ -0,0 +1,86 @@
+import { clamp, formatFloat, mod } from './utils.js';
+
+describe('clamp function', () => {
+	test('returns the number itself if within the range', () => {
+		expect(clamp(5, 0, 10)).toBe(5);
+		expect(clamp(0, -10, 10)).toBe(0);
+		expect(clamp(-5, -10, 0)).toBe(-5);
+	});
+
+	test('returns the minimum value if number is below range', () => {
+		expect(clamp(-5, 0, 10)).toBe(0);
+		expect(clamp(-15, -10, 10)).toBe(-10);
+	});
+
+	test('returns the maximum value if number is above range', () => {
+		expect(clamp(15, 0, 10)).toBe(10);
+		expect(clamp(20, -10, 10)).toBe(10);
+	});
+
+	test('handles edge cases with boundaries', () => {
+		expect(clamp(0, 0, 10)).toBe(0);
+		expect(clamp(10, 0, 10)).toBe(10);
+	});
+});
+
+describe('mod function', () => {
+	test('returns the correct modulus for positive numbers', () => {
+		expect(mod(10, 3)).toBe(1);
+		expect(mod(15, 4)).toBe(3);
+	});
+
+	test('handles negative numbers correctly', () => {
+		expect(mod(-10, 3)).toBe(2);
+		expect(mod(-15, 4)).toBe(1);
+	});
+
+	test('returns 0 for numbers that are exact multiples of max', () => {
+		expect(mod(9, 3)).toBe(0);
+		expect(mod(20, 5)).toBe(0);
+	});
+
+	test('returns 0 for zero input with positive max', () => {
+		expect(mod(0, 5)).toBe(0);
+	});
+
+	test('handles edge cases with 1 as max', () => {
+		expect(mod(10, 1)).toBe(0);
+		expect(mod(-10, 1)).toBe(0);
+	});
+});
+describe('formatFloat function', () => {
+	test('formats numbers with specified precision correctly', () => {
+		expect(formatFloat(123.4567, 2)).toBe('123.46');
+		expect(formatFloat(123.4, 2)).toBe('123.4');
+		expect(formatFloat(123.0, 2)).toBe('123');
+	});
+
+	test('handles trailing zeros correctly', () => {
+		expect(formatFloat(0.000123, 6)).toBe('0.000123');
+		expect(formatFloat(0.000100, 6)).toBe('0.0001');
+		expect(formatFloat(10.0, 1)).toBe('10');
+	});
+
+	test('handles edge cases with small numbers and high precision', () => {
+		expect(formatFloat(0.0000001234, 10)).toBe('0.0000001234');
+		expect(formatFloat(0.0000001234, 5)).toBe('0');
+	});
+
+	test('handles large numbers correctly', () => {
+		expect(formatFloat(123456789.123456, 3)).toBe('123456789.123');
+		expect(formatFloat(123456789.0, 5)).toBe('123456789');
+	});
+
+	test('handles zero and negative numbers correctly', () => {
+		expect(formatFloat(0, 2)).toBe('0');
+		expect(formatFloat(-123.456, 1)).toBe('-123.5');
+		expect(formatFloat(-0.000123, 6)).toBe('-0.000123');
+	});
+
+	test('handles no unnecessary decimal points', () => {
+		expect(formatFloat(10.000, 3)).toBe('10');
+		expect(formatFloat(10.010, 3)).toBe('10.01');
+	});
+})
+
+

package/src/color/utils.ts

@@ -0,0 +1,13 @@
+
+
+export function clamp(num: number, min: number, max: number): number {
+	return Math.min(Math.max(min, num), max);
+}
+
+export function mod(num: number, max: number): number {
+	return ((num % max) + max) % max;
+}
+
+export function formatFloat(num: number, precision: number): string {
+	return num.toFixed(precision).replace(/0+$/, '').replace(/\.$/, '');
+}

package/src/guess_style/guess_style.test.ts

@@ -0,0 +1,134 @@
+
+import type { TileJSONSpecification, VectorLayer } from '../types/index.js';
+import { guessStyle } from './guess_style.js';
+import { getShortbreadVectorLayers } from '../shortbread/template.js';
+import { SourceSpecification, StyleSpecification, VectorSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+
+describe('guessStyle', () => {
+	const tiles = ['https://example.com/tiles/{z}/{x}/{y}'];
+	const vectorLayersSomething: VectorLayer[] = [{ id: 'geometry', fields: { label: 'String', height: 'Number' } }];
+	const vectorLayersShortbread: VectorLayer[] = getShortbreadVectorLayers();
+
+	it('should build raster styles', () => {
+		expect(guessStyle({ tiles }))
+			.toStrictEqual({
+				version: 8,
+				sources: { rasterSource: { tiles, type: 'raster' } },
+				layers: [{ id: 'raster', source: 'rasterSource', type: 'raster' }],
+			});
+	});
+
+	it('should build vector inspector styles', () => {
+		expect(guessStyle({ tiles, vector_layers: vectorLayersSomething }))
+			.toStrictEqual({
+				version: 8,
+				sources: { vectorSource: { tiles, type: 'vector' } },
+				layers: [
+					{
+						id: 'background',
+						type: 'background',
+						paint: { 'background-color': '#fff' },
+					},
+					{
+						id: 'vectorSource-geometry-fill',
+						type: 'fill',
+						source: 'vectorSource',
+						'source-layer': 'geometry',
+						filter: ['==', '$type', 'Polygon'],
+						paint: { 'fill-antialias': true, 'fill-color': 'hsla(7,57%,56%,0.6)', 'fill-opacity': 0.3, 'fill-outline-color': 'hsla(7,57%,56%,0.6)' },
+					},
+					{
+						id: 'vectorSource-geometry-line',
+						type: 'line',
+						source: 'vectorSource',
+						'source-layer': 'geometry',
+						filter: ['==', '$type', 'LineString'],
+						layout: { 'line-cap': 'round', 'line-join': 'round' },
+						paint: { 'line-color': 'hsla(7,57%,56%,0.6)' },
+					},
+					{
+						id: 'vectorSource-geometry-circle',
+						type: 'circle',
+						source: 'vectorSource',
+						'source-layer': 'geometry',
+						filter: ['==', '$type', 'Point'],
+						paint: { 'circle-color': 'hsla(7,57%,56%,0.6)', 'circle-radius': 2 },
+					},
+				],
+			});
+	});
+
+	it('should build shortbread vector styles', () => {
+		const style = guessStyle({ tiles, vector_layers: vectorLayersShortbread }, { baseUrl: 'http://example.com' });
+
+		expect(style.layers.length).toBe(297);
+		style.layers = [];
+
+		expect(style).toStrictEqual({
+			glyphs: 'http://example.com/assets/glyphs/{fontstack}/{range}.pbf',
+			metadata: {
+				license: 'https://creativecommons.org/publicdomain/zero/1.0/',
+			},
+			name: 'versatiles-colorful',
+			sprite: [{ id: 'basics', url: 'http://example.com/assets/sprites/basics/sprites' }],
+			layers: [],
+			sources: {
+				'versatiles-shortbread': {
+					attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
+					bounds: [-180, -85.0511287798066, 180, 85.0511287798066],
+					maxzoom: 14,
+					minzoom: 0,
+					scheme: 'xyz',
+					tiles,
+					type: 'vector',
+				},
+			},
+			version: 8,
+		});
+	});
+
+	const cases: { type: string; tilejson: TileJSONSpecification }[] = [
+		{ type: 'image', tilejson: { tiles } },
+		{ type: 'inspector', tilejson: { tiles, vector_layers: vectorLayersSomething } },
+	];
+
+	function getSource(style: StyleSpecification): SourceSpecification {
+		return Object.values(style.sources)[0];
+	}
+
+	describe('minzoom sets minzoom', () => {
+		cases.forEach(({ type, tilejson }) => {
+			it(type, () => {
+				expect(getSource(guessStyle({ ...tilejson, minzoom: 5 }))).toHaveProperty('minzoom', 5);
+			});
+		});
+	});
+
+	describe('maxzoom sets maxzoom', () => {
+		cases.forEach(({ type, tilejson }) => {
+			it(type, () => {
+				expect(getSource(guessStyle({ ...tilejson, maxzoom: 5 }))).toHaveProperty('maxzoom', 5);
+			});
+		});
+	});
+
+	describe('absolute tile urls override baseUrl', () => {
+		cases.forEach(({ type, tilejson }) => {
+			it(type, () => {
+				const style = guessStyle({ ...tilejson, tiles: ['https://example1.org/tiles/{z}/{x}/{y}'] }, { baseUrl: 'https://example2.org/' });
+				const source = Object.values(style.sources)[0] as VectorSourceSpecification;
+				expect(source.tiles).toEqual(['https://example1.org/tiles/{z}/{x}/{y}']);
+			});
+		});
+	});
+
+	describe('relative tile urls are resolved with baseUrl', () => {
+		cases.forEach(({ type, tilejson }) => {
+			it(type, () => {
+				const style = guessStyle({ ...tilejson, tiles: ['./{z}/{x}/{y}'] }, { baseUrl: 'https://example2.org/tiles/' });
+				const source = Object.values(style.sources)[0] as VectorSourceSpecification;
+				expect(source.tiles).toEqual(['https://example2.org/tiles/{z}/{x}/{y}']);
+			});
+		});
+	});
+});

package/src/guess_style/guess_style.ts

@@ -0,0 +1,166 @@
+import type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector, VectorLayer } from '../types/index.js';
+import { isTileJSONSpecification } from '../types/index.js';
+import { deepClone, resolveUrl } from '../lib/utils.js';
+import type { BackgroundLayerSpecification, CircleLayerSpecification, FillLayerSpecification, LineLayerSpecification, RasterSourceSpecification, SourceSpecification, SpriteSpecification, StyleSpecification, VectorSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+import { colorful } from '../styles/index.js';
+import { Color } from '../color/index.js';
+import { isRasterTileJSONSpecification } from '../types/tilejson.js';
+
+export interface GuessStyleOptions {
+	baseUrl?: string;
+	glyphs?: string;
+	sprite?: SpriteSpecification;
+}
+
+export function guessStyle(tileJSON: TileJSONSpecification, options?: GuessStyleOptions): StyleSpecification {
+	tileJSON = deepClone(tileJSON);
+
+	if (options && options.baseUrl) {
+		const { baseUrl } = options;
+		tileJSON.tiles = tileJSON.tiles.map(url => resolveUrl(baseUrl, url));
+	}
+
+	if (!isTileJSONSpecification(tileJSON)) throw Error('Invalid TileJSON specification');
+
+	let style: StyleSpecification;
+	if (isRasterTileJSONSpecification(tileJSON)) {
+		style = getRasterStyle(tileJSON);
+	} else {
+		if (isShortbread(tileJSON)) {
+			style = getShortbreadStyle(tileJSON, {
+				baseUrl: options?.baseUrl,
+				glyphs: options?.glyphs,
+				sprite: options?.sprite,
+			});
+		} else {
+			style = getInspectorStyle(tileJSON);
+		}
+	}
+
+	return style;
+}
+
+function isShortbread(spec: TileJSONSpecificationVector): boolean {
+	if (typeof spec !== 'object') return false;
+	if (!('vector_layers' in spec)) return false;
+	if (!Array.isArray(spec.vector_layers)) return false;
+
+
+	const layerIds = new Set(spec.vector_layers.map(l => String(l.id)));
+	const shortbreadIds = ['place_labels', 'boundaries', 'boundary_labels', 'addresses', 'water_lines', 'water_lines_labels', 'dam_lines', 'dam_polygons', 'pier_lines', 'pier_polygons', 'bridges', 'street_polygons', 'streets_polygons_labels', 'ferries', 'streets', 'street_labels', 'street_labels_points', 'aerialways', 'public_transport', 'buildings', 'water_polygons', 'ocean', 'water_polygons_labels', 'land', 'sites', 'pois'];
+	return shortbreadIds.every(id => layerIds.has(id));
+}
+
+function getShortbreadStyle(spec: TileJSONSpecificationVector, builderOption: { baseUrl?: string; glyphs?: string; sprite?: SpriteSpecification }): StyleSpecification {
+	return colorful({
+		tiles: spec.tiles,
+		baseUrl: builderOption.baseUrl,
+		glyphs: builderOption.glyphs,
+		sprite: builderOption.sprite,
+	});
+}
+
+function getInspectorStyle(spec: TileJSONSpecificationVector): StyleSpecification {
+	const sourceName = 'vectorSource';
+
+	const layers: {
+		background: BackgroundLayerSpecification[];
+		circle: CircleLayerSpecification[];
+		line: LineLayerSpecification[];
+		fill: FillLayerSpecification[];
+	} = { background: [], circle: [], line: [], fill: [] };
+
+	layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
+
+	spec.vector_layers.forEach((vector_layer: VectorLayer) => {
+		let luminosity = 'bright', saturation, hue;
+
+		if (/water|ocean|lake|sea|river/.test(vector_layer.id)) hue = 'blue';
+		if (/state|country|place/.test(vector_layer.id)) hue = 'pink';
+		if (/road|highway|transport|streets/.test(vector_layer.id)) hue = 'orange';
+		if (/contour|building/.test(vector_layer.id)) hue = 'monochrome';
+		if (vector_layer.id.includes('building')) luminosity = 'dark';
+		if (/contour|landuse/.test(vector_layer.id)) hue = 'yellow';
+		if (/wood|forest|park|landcover|land/.test(vector_layer.id)) hue = 'green';
+
+		if (vector_layer.id.includes('point')) {
+			saturation = 'strong';
+			luminosity = 'light';
+		}
+
+		const color = Color.random({
+			hue,
+			luminosity,
+			saturation,
+			seed: vector_layer.id,
+			opacity: 0.6,
+		}).asString();
+
+		layers.circle.push({
+			id: `${sourceName}-${vector_layer.id}-circle`,
+			'source-layer': vector_layer.id,
+			source: sourceName,
+			type: 'circle',
+			filter: ['==', '$type', 'Point'],
+			paint: { 'circle-color': color, 'circle-radius': 2 },
+		});
+
+		layers.line.push({
+			id: `${sourceName}-${vector_layer.id}-line`,
+			'source-layer': vector_layer.id,
+			source: sourceName,
+			type: 'line',
+			filter: ['==', '$type', 'LineString'],
+			layout: { 'line-join': 'round', 'line-cap': 'round' },
+			paint: { 'line-color': color },
+		});
+
+		layers.fill.push({
+			id: `${sourceName}-${vector_layer.id}-fill`,
+			'source-layer': vector_layer.id,
+			source: sourceName,
+			type: 'fill',
+			filter: ['==', '$type', 'Polygon'],
+			paint: { 'fill-color': color, 'fill-opacity': 0.3, 'fill-antialias': true, 'fill-outline-color': color },
+		});
+	});
+
+	return {
+		version: 8,
+		sources: {
+			[sourceName]: sourceFromSpec(spec, 'vector'),
+		},
+		layers: [
+			...layers.background,
+			...layers.fill,
+			...layers.line,
+			...layers.circle,
+		],
+	};
+}
+
+function getRasterStyle(spec: TileJSONSpecificationRaster): StyleSpecification {
+	const sourceName = 'rasterSource';
+	return {
+		version: 8,
+		sources: {
+			[sourceName]: sourceFromSpec(spec, 'raster'),
+		},
+		layers: [{
+			id: 'raster',
+			type: 'raster',
+			source: sourceName,
+		}],
+	};
+}
+
+function sourceFromSpec(spec: TileJSONSpecification, type: 'raster' | 'vector'): SourceSpecification {
+	const source: RasterSourceSpecification | VectorSourceSpecification = { tiles: spec.tiles, type };
+
+	if (spec.minzoom != null) source.minzoom = spec.minzoom;
+	if (spec.maxzoom != null) source.maxzoom = spec.maxzoom;
+	if (spec.attribution != null) source.attribution = spec.attribution;
+	if (spec.scheme != null) source.scheme = spec.scheme;
+
+	return source;
+}

package/{dist/guess_style/index.d.ts → src/guess_style/index.ts}

@@ -1,2 +1,3 @@
+
 export type { GuessStyleOptions } from './guess_style.js';
 export { guessStyle } from './guess_style.js';

package/src/index.test.ts

@@ -0,0 +1,77 @@
+
+import { VectorSourceSpecification } from '@maplibre/maplibre-gl-style-spec';
+import type { VectorLayer } from './index.js';
+import { guessStyle, styles } from './index.js';
+
+const { colorful, eclipse, graybeard, neutrino } = styles;
+
+describe('styles', () => {
+	[
+		{ name: 'colorful', builder: colorful },
+		{ name: 'eclipse', builder: eclipse },
+		{ name: 'graybeard', builder: graybeard },
+		{ name: 'neutrino', builder: neutrino },
+	].forEach(({ name, builder }) => {
+		it(`should create and test an instance of ${name}`, () => {
+			expect(typeof builder).toBe('function');
+
+			const style = builder({ baseUrl: 'https://example.org' });
+
+			const minSize = (name === 'empty') ? 4000 : 50000;
+			expect(JSON.stringify(style).length).toBeGreaterThan(minSize);
+
+			expect(style.name).toBe('versatiles-' + name);
+			expect(style.glyphs).toBe('https://example.org/assets/glyphs/{fontstack}/{range}.pbf');
+			expect(style.sprite).toStrictEqual([{ id: 'basics', url: 'https://example.org/assets/sprites/basics/sprites' }]);
+			expect(Object.keys(style.sources).join(',')).toBe('versatiles-shortbread');
+
+			const source = style.sources['versatiles-shortbread'] as VectorSourceSpecification;
+			expect(source.tiles).toEqual(['https://example.org/tiles/osm/{z}/{x}/{y}']);
+		});
+	});
+});
+
+describe('Colorful', () => {
+	const style = colorful({
+		baseUrl: 'https://dev.null',
+		colors: { commercial: '#f00' },
+	});
+	expect(style.glyphs).toBe('https://dev.null/assets/glyphs/{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('rgb(255,0,0)');
+});
+
+describe('guessStyle', () => {
+	const tiles = ['https://fancy.map/tiles/{z}/{x}/{y}'];
+	const vector_layers: VectorLayer[] = [{ id: 'hallo', fields: { label: 'String' } }];
+
+	it('should build raster styles', () => {
+		const style = guessStyle({ tiles });
+		expect(style).toStrictEqual({
+			layers: [{ id: 'raster', source: 'rasterSource', type: 'raster' }],
+			sources: { rasterSource: { tiles, type: 'raster' } },
+			version: 8,
+		});
+	});
+
+	it('should build vector styles', () => {
+		const style = guessStyle({ tiles, 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: { tiles, type: 'vector' } },
+			'version': 8,
+		});
+	});
+});

package/src/index.ts

@@ -0,0 +1,18 @@
+export { colorful, eclipse, graybeard, neutrino, type StyleBuilderFunction } from './styles/index.js';
+import { colorful, eclipse, graybeard, neutrino } from './styles/index.js';
+export const styles = {
+	colorful,
+	eclipse,
+	graybeard,
+	neutrino,
+};
+
+export type { GuessStyleOptions } from './guess_style/index.js';
+export type { RGB, HSL, HSV, RandomColorOptions } from './color/index.js';
+export type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector } from './types/tilejson.js';
+export type { VectorLayer } from './types/index.js';
+export type { StyleBuilderOptions, Language, StyleBuilderColors, StyleBuilderColorsEnsured, StyleBuilderFonts } from './style_builder/types.js';
+export type { RecolorOptions } from './style_builder/recolor.js';
+
+export { guessStyle } from './guess_style/index.js';
+export { Color } from './color/index.js';