Merge pull request #137 from CartoDB/getting-some-improvements-from-#128

improvements for stroke and points size

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);
     });
   });
 });

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;
+}

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<SizeCategoriesOptionsStyle>
+) {
+  if (geometryType === 'Point') {
+    return options.sizeRange || [2, 20];
+  }
+
+  return getStyleValue('sizeRange', geometryType, options);
+}