diff --git a/examples/_debug/styles/function-style.html b/examples/_debug/styles/function-style.html new file mode 100644 index 00000000..f1919471 --- /dev/null +++ b/examples/_debug/styles/function-style.html @@ -0,0 +1,77 @@ + + + + + + Add a CARTO Layer + + + + + + + + + +
+
+
+ +
+ + +
+
+

Function style

+

+ Use a style property as a function +

+
+
+
+
+ + + + + + + + diff --git a/src/lib/viz/style/deck-styles.ts b/src/lib/viz/style/deck-styles.ts index c4892e10..29d13f47 100644 --- a/src/lib/viz/style/deck-styles.ts +++ b/src/lib/viz/style/deck-styles.ts @@ -1,5 +1,5 @@ +import { hexToRgb, isFunction } from './helpers/utils'; import { GeometryType } from '@/viz/source'; -import { hexToRgb } from './helpers/utils'; import { defaultStyles } from './default-styles'; import { colorValidation } from './validators'; import { CartoStylingError, stylingErrorTypes } from '../errors/styling-error'; @@ -36,18 +36,28 @@ function lineStyles(opts: any) { } function polygonStyles(opts: any) { - return { + const styles: any = { opacity: getStyleValue('opacity', 'Polygon', opts), - getFillColor: hexToRgb(getStyleValue('color', 'Polygon', opts)), + getFillColor: isFunction(opts.color) ? opts.color : hexToRgb(getStyleValue('color', 'Polygon', opts)), filled: true, stroked: true, - getLineColor: hexToRgb(getStyleValue('strokeColor', 'Polygon', opts)), + getLineColor: isFunction(opts.strokeColor) ? opts.strokeColor : hexToRgb(getStyleValue('strokeColor', 'Polygon', opts)), getLineWidth: getStyleValue('strokeWidth', 'Polygon', opts), - lineWidthMinPixels: 0, - lineWidthUnits: 'pixels' + lineWidthScale: getStyleValue('strokeWidthScale', 'Polygon', opts), + lineWidthMinPixels: getStyleValue('strokeWidthMin', 'Polygon', opts), + lineWidthMaxPixels: getStyleValue('strokeWidthMax', 'Polygon', opts), + lineWidthUnits: 'pixels', + maxZoom: getStyleValue('maxZoom', 'Polygon', opts), + minZoom: getStyleValue('minZoom', 'Polygon', opts) }; + /* eslint-disable no-param-reassign */ + return Object.keys(styles).filter((k: string) => styles[k] !== undefined && styles[k] !== null).reduce((total: any, k: string) => { + total[k] = styles[k]; + return total; + }, {}); + /* eslint-enable no-param-reassign */ } export function getStyleValue(variable: string, geometryType: GeometryType, options: any) { @@ -93,7 +103,7 @@ export function getStyles(geometryType: GeometryType, options: Partial) { - if (options.color && !colorValidation(options.color)) { + if (options.color && !isFunction(options.color) && !colorValidation(options.color)) { throw new CartoStylingError( `color '${options.color}' is not valid`, stylingErrorTypes.PROPERTY_MISMATCH @@ -114,7 +124,7 @@ function validateBasicParameters(options: Partial) { ); } - if (options.strokeColor && !colorValidation(options.strokeColor)) { + if (options.strokeColor && !isFunction(options.strokeColor) && !colorValidation(options.strokeColor)) { throw new CartoStylingError( `strokeColor '${options.strokeColor}' is not valid`, stylingErrorTypes.PROPERTY_MISMATCH diff --git a/src/lib/viz/style/helpers/utils.ts b/src/lib/viz/style/helpers/utils.ts index ef9cae8c..be2e3f0c 100644 --- a/src/lib/viz/style/helpers/utils.ts +++ b/src/lib/viz/style/helpers/utils.ts @@ -92,3 +92,7 @@ export function calculateSizeBins(nBreaks: number, sizeRange: number[]) { }; return [sizeRange[0], ...new Classifier(classObj).breaks(nBreaks - 1, 'equal'), sizeRange[1]]; } + +export function isFunction(fun: any) { + return typeof fun === 'function'; +}