@carto/api-client 0.5.31 → 0.5.32-alpha.307c0b4.122

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- feat(fetchMap): Support line & polygon stroke dash styles (#297)
+
 ### 0.5.31
 
 - feat(sources): rename `featureBbox` source option to `prepareLabels` (Maps API `featureBbox` param unchanged)

package/build/api-client.cjs

@@ -176,6 +176,7 @@ __export(src_exports, {
   getIconUrlAccessor: () => getIconUrlAccessor,
   getLayerDescriptor: () => getLayerDescriptor,
   getLayerProps: () => getLayerProps,
+  getLineStyleAccessor: () => getLineStyleAccessor,
   getMaxMarkerSize: () => getMaxMarkerSize,
   getSizeAccessor: () => getSizeAccessor,
   getSorter: () => getSorter,
@@ -10150,6 +10151,19 @@ function getIconUrlAccessor(field, range, {
   };
   return normalizeAccessor(accessor, data);
 }
+function getLineStyleAccessor(field, range, data) {
+  const fallback = range.othersDashArray ?? [0, 0];
+  const mapping = {};
+  for (const { value, dashArray } of range.dashArrayMap) {
+    mapping[value] = dashArray;
+  }
+  const accessor = (properties) => mapping[properties[field.name]] ?? fallback;
+  return {
+    accessor: normalizeAccessor(accessor, data),
+    domain: range.dashArrayMap.map(({ value }) => value),
+    range: range.dashArrayMap.map(({ dashArray }) => dashArray)
+  };
+}
 function getMaxMarkerSize(visConfig, visualChannels) {
   const { radiusRange, radius, sizeMaxPixels } = visConfig;
   const { radiusField, sizeField } = visualChannels;
@@ -10863,6 +10877,10 @@ function createChannelProps(id, layerType, config2, visualChannels, data, datase
   const result = {};
   const updateTriggers = {};
   const scales = {};
+  const isVectorTile = layerType === "mvt" || layerType === "tileset";
+  const geometry = data.tilestats?.layers?.[0]?.geometry;
+  const isLine = geometry === "Line" || geometry === "LineString" || geometry === "MultiLineString";
+  const isPolygon = geometry === "Polygon" || geometry === "MultiPolygon";
   {
     const { colorField, colorScale } = visualChannels;
     const { colorRange } = visConfig;
@@ -11023,6 +11041,43 @@ function createChannelProps(id, layerType, config2, visualChannels, data, datase
       };
     }
   }
+  {
+    const strokeVisible = isLine || isPolygon && Boolean(visConfig.stroked);
+    if (isVectorTile && strokeVisible) {
+      const { lineStyleField, lineStyleScale } = visualChannels;
+      const { lineStyleRange } = visConfig;
+      if (visConfig.lineStyle && visConfig.lineStyle !== "solid") {
+        if (visConfig.lineStyle === "dotted") {
+          result.lineCapRounded = true;
+        }
+        result.lineStyle = visConfig.lineStyle;
+        if (visConfig.dashArray) {
+          result.dashArray = visConfig.dashArray;
+          result.getDashArray = visConfig.dashArray;
+        }
+      }
+      if (lineStyleField && lineStyleScale && lineStyleRange) {
+        const { accessor, ...scaleProps } = getLineStyleAccessor(
+          lineStyleField,
+          lineStyleRange,
+          data
+        );
+        result.getDashArray = accessor;
+        scales.lineStyle = updateTriggers.getDashArray = {
+          field: lineStyleField,
+          type: lineStyleScale,
+          ...scaleProps
+        };
+        const dashArrays = [
+          ...lineStyleRange.dashArrayMap.map(({ dashArray }) => dashArray),
+          ...lineStyleRange.othersDashArray ? [lineStyleRange.othersDashArray] : []
+        ];
+        if (dashArrays.some(([dash]) => dash === 0)) {
+          result.lineCapRounded = true;
+        }
+      }
+    }
+  }
   {
     const { heightField, heightScale } = visualChannels;
     const { enable3d, heightRange } = visConfig;
@@ -11151,9 +11206,7 @@ function createChannelProps(id, layerType, config2, visualChannels, data, datase
     } = secondaryLabel || {};
     result.getText = mainLabel.field && getTextAccessor(mainLabel.field, data);
     const getSecondaryText = secondaryField && getTextAccessor(secondaryField, data);
-    const geometry = data.tilestats?.layers?.[0]?.geometry;
-    const isLineOrPolygon = geometry === "Polygon" || geometry === "MultiPolygon" || geometry === "Line" || geometry === "LineString" || geometry === "MultiLineString";
-    if (isLineOrPolygon && (layerType === "tileset" || layerType === "mvt")) {
+    if ((isLine || isPolygon) && isVectorTile) {
       const uniqueIdProperty = visConfig.textLabelUniqueIdField;
       result.autoLabels = uniqueIdProperty ? { uniqueIdProperty } : true;
       result.pointType = "text";
@@ -11939,6 +11992,7 @@ function hashBuckets(initialCount) {
   getIconUrlAccessor,
   getLayerDescriptor,
   getLayerProps,
+  getLineStyleAccessor,
   getMaxMarkerSize,
   getSizeAccessor,
   getSorter,