diff --git a/packages/viz/__tests__/styles/SizeCategoriesStyle.spec.ts b/packages/viz/__tests__/styles/SizeCategoriesStyle.spec.ts index 815b2282..c2ec8450 100644 --- a/packages/viz/__tests__/styles/SizeCategoriesStyle.spec.ts +++ b/packages/viz/__tests__/styles/SizeCategoriesStyle.spec.ts @@ -4,6 +4,7 @@ import { sizeCategoriesStyle } from '../../src/lib/style'; import { CARTOSource } from '../../src'; import { defaultStyles } from '../../src/lib/style/default-styles'; import { CartoStylingError } from '../../src/lib/errors/styling-error'; +import { getDefaultSizeRange } from '../../src/lib/style/helpers/size-categories-style'; const FIELD_NAME = 'category'; const mapStats = mapsResponse.metadata.layers[0].meta.stats; @@ -47,8 +48,7 @@ describe('SizeCategoriesStyle', () => { expect(response).toHaveProperty('radiusUnits', 'pixels'); expect(response).toHaveProperty('pointRadiusMinPixels'); expect(response).toHaveProperty('pointRadiusMaxPixels'); - const minSize = defaultStyles.Point.sizeRange[0]; - const maxSize = defaultStyles.Point.sizeRange[1]; + const [minSize, maxSize] = getDefaultSizeRange('Point', {}); expect(response.pointRadiusMinPixels).toBeGreaterThanOrEqual(minSize); expect(response.pointRadiusMaxPixels).toBeLessThanOrEqual(maxSize); }); @@ -178,7 +178,7 @@ describe('SizeCategoriesStyle', () => { r = getRadius({ properties: { [FIELD_NAME]: opts.categories[2] } }); - expect(r).toEqual(4.4); + expect(r).toEqual(5.6); }); }); }); diff --git a/packages/viz/src/lib/layer/Layer.ts b/packages/viz/src/lib/layer/Layer.ts index c4bd8429..cf82d79a 100644 --- a/packages/viz/src/lib/layer/Layer.ts +++ b/packages/viz/src/lib/layer/Layer.ts @@ -298,7 +298,7 @@ export class Layer extends WithEvents implements StyledLayer { ...events }; - return layerProps; + return ensureProperPropStyles(layerProps); } /** @@ -446,3 +446,21 @@ function buildSource(source: string | Source) { function buildStyle(style: Style | StyleProperties) { return style instanceof Style ? style : new Style(style); } + +// eslint-disable-next-line @typescript-eslint/no-explicit-any +function ensureProperPropStyles(layerProps: any) { + const layerPropsValidated = layerProps; + + if (layerPropsValidated.pointRadiusScale) { + layerPropsValidated.pointRadiusMaxPixels *= + layerPropsValidated.pointRadiusScale; + layerPropsValidated.pointRadiusMinPixels *= + layerPropsValidated.pointRadiusScale; + } + + if (layerPropsValidated.getLineWidth === 0) { + layerPropsValidated.stroked = false; + } + + return layerPropsValidated; +} diff --git a/packages/viz/src/lib/style/helpers/size-categories-style.ts b/packages/viz/src/lib/style/helpers/size-categories-style.ts index 05851ee2..d755b87e 100644 --- a/packages/viz/src/lib/style/helpers/size-categories-style.ts +++ b/packages/viz/src/lib/style/helpers/size-categories-style.ts @@ -30,7 +30,7 @@ function defaultOptions( return { top: 11, categories: [], - sizeRange: getStyleValue('sizeRange', geometryType, options), + sizeRange: getDefaultSizeRange(geometryType, options), nullSize: getStyleValue('nullSize', geometryType, options), ...options }; @@ -198,3 +198,14 @@ function validateParameters( ); } } + +export function getDefaultSizeRange( + geometryType: GeometryType, + options: Partial +) { + if (geometryType === 'Point') { + return options.sizeRange || [2, 20]; + } + + return getStyleValue('sizeRange', geometryType, options); +}