@versatiles/style 5.8.2 → 5.8.4

package/src/guess_style/guess_style.ts

@@ -1,7 +1,22 @@
-import type { TileJSONSpecification, TileJSONSpecificationRaster, TileJSONSpecificationVector, VectorLayer } from '../types/index.js';
+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 type {
+	BackgroundLayerSpecification,
+	CircleLayerSpecification,
+	FillLayerSpecification,
+	LineLayerSpecification,
+	RasterSourceSpecification,
+	SourceSpecification,
+	SpriteSpecification,
+	StyleSpecification,
+	VectorSourceSpecification,
+} from '@maplibre/maplibre-gl-style-spec';
 import { colorful } from '../styles/index.js';
 import { isRasterTileJSONSpecification } from '../types/tilejson.js';
 import randomColor from '../color/random.js';
@@ -40,7 +55,7 @@ export function guessStyle(tileJSON: TileJSONSpecification, options?: GuessStyle
 
 	if (options && options.baseUrl) {
 		const { baseUrl } = options;
-		tileJSON.tiles = tileJSON.tiles.map(url => resolveUrl(baseUrl, url));
+		tileJSON.tiles = tileJSON.tiles.map((url) => resolveUrl(baseUrl, url));
 	}
 
 	if (!isTileJSONSpecification(tileJSON)) throw Error('Invalid TileJSON specification');
@@ -68,13 +83,42 @@ function isShortbread(spec: TileJSONSpecificationVector): boolean {
 	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));
+	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 {
+function getShortbreadStyle(
+	spec: TileJSONSpecificationVector,
+	builderOption: { baseUrl?: string; glyphs?: string; sprite?: SpriteSpecification }
+): StyleSpecification {
 	return colorful({
 		tiles: spec.tiles,
 		baseUrl: builderOption.baseUrl,
@@ -110,10 +154,12 @@ function getInspectorStyle(spec: TileJSONSpecificationVector): StyleSpecificatio
 		fill: FillLayerSpecification[];
 	} = { background: [], circle: [], line: [], fill: [] };
 
-	layers.background.push({ 'id': 'background', 'type': 'background', 'paint': { 'background-color': '#fff' } });
+	layers.background.push({ id: 'background', type: 'background', paint: { 'background-color': '#fff' } });
 
 	spec.vector_layers.forEach((vector_layer: VectorLayer) => {
-		let luminosity = 'bright', saturation, hue;
+		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';
@@ -170,12 +216,7 @@ function getInspectorStyle(spec: TileJSONSpecificationVector): StyleSpecificatio
 		sources: {
 			[sourceName]: sourceFromSpec(spec, 'vector'),
 		},
-		layers: [
-			...layers.background,
-			...layers.fill,
-			...layers.line,
-			...layers.circle,
-		],
+		layers: [...layers.background, ...layers.fill, ...layers.line, ...layers.circle],
 	};
 }
 
@@ -186,11 +227,13 @@ function getRasterStyle(spec: TileJSONSpecificationRaster): StyleSpecification {
 		sources: {
 			[sourceName]: sourceFromSpec(spec, 'raster'),
 		},
-		layers: [{
-			id: 'raster',
-			type: 'raster',
-			source: sourceName,
-		}],
+		layers: [
+			{
+				id: 'raster',
+				type: 'raster',
+				source: sourceName,
+			},
+		],
 	};
 }
 

package/src/guess_style/index.ts

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

package/src/index.test.ts

@@ -18,7 +18,7 @@ describe('styles', () => {
 
 			const style = builder({ baseUrl: 'https://example.org' });
 
-			const minSize = (name === 'empty') ? 4000 : 50000;
+			const minSize = name === 'empty' ? 4000 : 50000;
 			expect(JSON.stringify(style).length).toBeGreaterThan(minSize);
 
 			expect(style.name).toBe('versatiles-' + name);
@@ -39,7 +39,7 @@ describe('Colorful', () => {
 			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;
+		const paint = style.layers.find((l) => l.id === 'land-commercial')?.paint;
 
 		expect(paint).toBeDefined();
 		if (paint == null) throw Error();
@@ -69,12 +69,39 @@ describe('guessStyle', () => {
 		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' },
+				{
+					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,
+			version: 8,
 		});
 	});
 });
@@ -101,4 +128,4 @@ describe('exports', () => {
 		expect(typeof lib.Color.HSV.randomColor).toBe('function');
 		expect(typeof lib.Color.RGB).toBe('function');
 	});
-})
+});

package/src/index.ts

@@ -1,6 +1,6 @@
 /**
  * This library provides everything you need to build a map style.
- * 
+ *
  * You can use it in the browser:
  * ```html
  * <html>
@@ -16,7 +16,7 @@
  *   </body>
  * </html>
  * ```
- * 
+ *
  * or in Node.js:
  * ```shell
  * npm i @versatiles/style
@@ -26,22 +26,22 @@
  * // OR: const { colorful } = require('@versatiles/style');
  * const style = colorful();
  * ```
- * 
+ *
  * You probably want to use one of the following functions:
- * 
+ *
  * ---
- * 
+ *
  * ## Generate a style for OpenStreetMap data:
- * 
+ *
  * To generate a style from scratch you can use on of the prepared style functions:
  * - {@link colorful}
  * - {@link eclipse}
  * - {@link graybeard}
  * - {@link neutrino}
  * - {@link shadow}
- * 
+ *
  * Each function accepts optional {@link StyleBuilderOptions} as argument to customize the style.
- * 
+ *
  * Example:
  * ```
  * import { colorful } from 'versatiles-style';
@@ -53,11 +53,11 @@
  *   }
  * });
  * ```
- * 
+ *
  * ---
- * 
+ *
  * ## Guess a style based on a TileJSON:
- * 
+ *
  * To guess a style from a TileJSON you can use {@link guessStyle}.
  * This function needs a {@link TileJSONSpecification} and an optional {@link GuessStyleOptions} object.
  * Example:
@@ -65,18 +65,18 @@
  * import { guessStyle } from 'versatiles-style';
  * const style = guessStyle(tilejson);
  * ```
- * 
+ *
  * ---
- * 
+ *
  * ## Please help us to improve this library:
- * 
+ *
  * This library is used in quite some projects of the VersaTiles ecosystem but it is still in an early stage.
  * We are always looking for feedback, contributions, ideas, bug reports and help with the documentation.
- * 
+ *
  * If you have any suggestions, please [open an issue](https://github.com/versatiles-org/versatiles-style/issues) or a pull request on [GitHub](https://github.com/versatiles-org/versatiles-style).
- * 
+ *
  * If you want to know more about the VersaTiles project, please visit [versatiles.org](https://versatiles.org).
- * 
+ *
  * @module
  */
 
@@ -92,9 +92,19 @@ export const styles = {
 
 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 {
+	TileJSONSpecification,
+	TileJSONSpecificationRaster,
+	TileJSONSpecificationVector,
+} from './types/tilejson.js';
 export type { VectorLayer } from './types/index.js';
-export type { StyleBuilderOptions, Language, StyleBuilderColors, StyleBuilderColorKey, StyleBuilderFonts } from './style_builder/types.js';
+export type {
+	StyleBuilderOptions,
+	Language,
+	StyleBuilderColors,
+	StyleBuilderColorKey,
+	StyleBuilderFonts,
+} from './style_builder/types.js';
 export type { RecolorOptions } from './style_builder/recolor.js';
 
 export { guessStyle } from './guess_style/index.js';

package/src/lib/utils.test.ts

@@ -98,14 +98,14 @@ describe('deepMerge', () => {
 	});
 
 	it('merges nested objects correctly', () => {
-		const target = { a: { d: 4, e: 3 }, b: 2 } as { a: { d?: number, e: number }, b: number };
+		const target = { a: { d: 4, e: 3 }, b: 2 } as { a: { d?: number; e: number }; b: number };
 		const source = { a: { e: 5 }, b: 3 };
 		const result = deepMerge(target, source);
 		expect(result).toEqual({ a: { d: 4, e: 5 }, b: 3 });
 	});
 
 	it('overrides primitives with objects', () => {
-		const target = { a: 1, b: 2 } as { a: object | number, b: object | number };
+		const target = { a: 1, b: 2 } as { a: object | number; b: object | number };
 		const source = { a: { d: 4 }, b: { e: 5 } };
 		const result = deepMerge(target, source);
 		expect(result).toEqual({ a: { d: 4 }, b: { e: 5 } });

package/src/lib/utils.ts

@@ -10,7 +10,8 @@ export function deepClone<T>(obj: T): T {
 			case 'string':
 			case 'undefined':
 				return obj;
-			default: throw new Error(`Not implemented yet: "${type}" case`);
+			default:
+				throw new Error(`Not implemented yet: "${type}" case`);
 		}
 	}
 

package/src/shortbread/index.ts

@@ -1,3 +1,2 @@
-
 export { getShortbreadTemplate } from './template.js';
 export { getShortbreadLayers } from './layers.js';

package/src/shortbread/layers.test.ts

@@ -34,7 +34,8 @@ describe('layers', () => {
 		expect(labelLayer).toBeDefined();
 
 		expect(labelLayer.layout?.['text-field']).toStrictEqual([
-			"coalesce",
+			'case',
+			['to-boolean', ['get', 'name_en']],
 			['get', 'name_en'],
 			['get', 'name'],
 		]);
@@ -48,7 +49,8 @@ describe('layers', () => {
 		expect(labelLayer).toBeDefined();
 
 		expect(labelLayer.layout?.['text-field']).toStrictEqual([
-			"coalesce",
+			'case',
+			['to-boolean', ['get', 'name_fr']],
 			['get', 'name_fr'],
 			['get', 'name'],
 		]);
@@ -60,6 +62,20 @@ describe('layers', () => {
 		const landLayer = layers.find((layer) => layer.id === 'land-agriculture') as FillLayerSpecification;
 
 		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',
+			],
+		]);
 	});
 });