CartoDB · Clebal · Jun 24, 2020 · Jun 24, 2020 · Jun 24, 2020 · Jun 29, 2020
diff --git a/examples/_debug/styles/function-style.html b/examples/_debug/styles/function-style.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+        <title>Add a CARTO Layer</title>
+
+        <link
+                rel="stylesheet"
+                type="text/css"
+                href="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.css"
+        />
+
+        <link
+                rel="stylesheet"
+                type="text/css"
+                href="https://libs.cartocdn.com/airship-style/v2.3/airship.css"
+        />
+
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+            }
+
+            #map {
+                width: 100vw;
+                height: 100vh;
+            }
+        </style>
+    </head>
+
+    <body class="as-app-body as-app">
+        <div class="as-content">
+            <main class="as-main">
+                <div class="as-map-area">
+                    <!-- map -->
+                    <div id="map"></div>
+
+                    <!-- panel -->
+                    <div class="as-panel as-panel--top as-panel--right as-bg--ui-01">
+                        <div class="as-panel__element as-p--16 as-body">
+                            <h1 class="as-title">Function style</h1>
+                            <h4 class="as-subheader as-mb--12">
+                                Use a style property as a function
+                            </h4>
+                        </div>
+                    </div>
+            </main>
+        </div>
+
+        <script src="https://api.tiles.mapbox.com/mapbox-gl-js/v1.10.0/mapbox-gl.js"></script>
+        <script src="https://unpkg.com/[email protected]/dist.min.js"></script>
+        <script src="/dist/umd/index.min.js"></script>
+
+        <script>
+          function initialize() {
+            carto.setDefaultCredentials({ username: 'public' });
+            const deckMap = carto.viz.createMap();
+            const countriesLayerStyle = new carto.viz.basicStyle({
+              strokeColor() { // feature is passed as argument
+                const r = Math.floor(Math.random()*256);
+                const g = Math.floor(Math.random()*256);
+                const b = Math.floor(Math.random()*256);
+                return [r, g, b];
+              },
+              strokeWidthMin: 4,
+              strokeWidthMax: 7
+            })
+            const countriesLayer = new carto.viz.Layer('ne_50m_admin_0_countries', countriesLayerStyle);
+            countriesLayer.addTo(deckMap);
+          }
+
+          initialize();
+        </script>
+    </body>
+</html>
diff --git 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<BasicOpti
 }
 
 function validateBasicParameters(options: Partial<BasicOptionsStyle>) {
-  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<BasicOptionsStyle>) {
     );
   }
 
-  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
@@ -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';
+}