Allow data-driven styling for line-dasharray (#1100)

* Implement data-driven styling for line-dasharray

ref maplibre/maplibre-gl-js#1235

* Add dashes prop

* Fix linter errors

* Fix integration tests

* Update v8.json

* Update CHANGELOG.md

* Update v8.json

* Update docs

Author: lucaswoj

CHANGELOG.md

@@ -4,6 +4,8 @@
 - _...Add new stuff here..._
 - Add note regarding visual artifacts that can appear with large width/size/offset values on vector tile layers, highlight remediation options ([#4160](https://github.com/maplibre/maplibre-gl-js/issues/4160))
 
+- Implement data-driven styling support for `line-dasharray` ([#5812](https://github.com/mapbox/mapbox-gl-js/pull/5812))
+
 ### 🐞 Bug fixes
 - _...Add new stuff here..._
 - Replace additional spread operator (`...`) due to esbuild limitations ([#1297](https://github.com/maplibre/maplibre-style-spec/pull/1297))

src/expression/index.ts

@@ -51,6 +51,13 @@ export type Feature = {
             'max': string;
         };
     };
+    readonly dashes?: {
+        [_: string]: {
+            'min': string;
+            'mid': string;
+            'max': string;
+        };
+    };
     readonly geometry?: Array<Array<Point2D>>;
 };
 

src/reference/v8.json

@@ -566,7 +566,7 @@
           "android": "https://github.com/maplibre/maplibre-native/issues/2783"
         }
       }
-    },   
+    },
     "baseShift": {
       "type": "number",
       "default": 0.0,
@@ -578,7 +578,7 @@
           "android": "https://github.com/maplibre/maplibre-native/issues/2783"
         }
       }
-    },    
+    },
     "volatile": {
       "type": "boolean",
       "default": false,
@@ -5672,7 +5672,7 @@
     "type": {
       "type": "projectionDefinition",
       "doc": "The projection definition type. Can be specified as a string, a transition state, or an expression.",
-      "default": "mercator",   
+      "default": "mercator",
       "property-type": "data-constant",
       "transition": false,
       "expression": {
@@ -6346,7 +6346,7 @@
     "line-dasharray": {
       "type": "array",
       "value": "number",
-      "doc": "Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. Note that GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. Also note that zoom-dependent expressions will be evaluated only at integer zoom levels.",
+      "doc": "Specifies the lengths of the alternating dashes and gaps that form the dash pattern. The lengths are later scaled by the line width. To convert a dash length to pixels, multiply the length by the current line width. GeoJSON sources with `lineMetrics: true` specified won't render dashed lines to the expected scale. Zoom-dependent expressions will be evaluated only at integer zoom levels. The only way to create an array value is using `[\"literal\", [...]]`; arrays cannot be read from or derived from feature properties.",
       "minimum": 0,
       "transition": true,
       "units": "line widths",
@@ -6370,10 +6370,11 @@
       "expression": {
         "interpolated": false,
         "parameters": [
-          "zoom"
+          "zoom",
+          "feature"
         ]
       },
-      "property-type": "cross-faded"
+      "property-type": "cross-faded-data-driven"
     },
     "line-pattern": {
       "type": "resolvedImage",

test/integration/style-spec/tests/functions.input.json

@@ -934,15 +934,6 @@
         "fill-extrusion-opacity": ["get", "opacity"]
       }
     },
-    {
-      "id": "invalid expression - line-dasharray must use step interpolation",
-      "type": "line",
-      "source": "source",
-      "source-layer": "layer",
-      "paint": {
-        "line-dasharray": ["interpolate", ["linear"], ["zoom"], 0, ["literal", [1, 2]], 1, ["literal", [3, 4]]]
-      }
-    },
     {
       "id": "invalid expression - heatmap-color must be zoom constant",
       "type": "heatmap",

test/integration/style-spec/tests/functions.output.json

@@ -28,7 +28,7 @@
     "line": 75
   },
   {
-    "message": "layers[6].paint.line-dasharray.stops[0][0]: number expected, string found",
+    "message": "layers[6].paint.line-dasharray.stops[0][0]: number expected, string found\nIf you intended to use a categorical function, specify `\"type\": \"categorical\"`.",
     "line": 89
   },
   {
@@ -184,39 +184,35 @@
     "line": 934
   },
   {
-    "message": "layers[52].paint.line-dasharray: Type array<number> is not interpolatable.",
+    "message": "layers[52].paint.heatmap-color: zoom expressions not supported",
     "line": 943
   },
   {
-    "message": "layers[53].paint.heatmap-color: zoom expressions not supported",
-    "line": 952
+    "message": "layers[53].paint.heatmap-color: zoom functions not supported",
+    "line": 951
   },
   {
-    "message": "layers[54].paint.heatmap-color: zoom functions not supported",
-    "line": 960
+    "message": "layers[54].layout.line-join: \"feature-state\" data expressions are not supported with layout properties.",
+    "line": 959
   },
   {
-    "message": "layers[55].layout.line-join: \"feature-state\" data expressions are not supported with layout properties.",
-    "line": 968
+    "message": "layers[55].paint.line-width.stops[0][1]: expressions are not allowed in function stops.",
+    "line": 972
   },
   {
-    "message": "layers[56].paint.line-width.stops[0][1]: expressions are not allowed in function stops.",
-    "line": 981
+    "message": "layers[56]: layer \"invalid expression - color-relief-color must be zoom constant\" requires a raster-dem source",
+    "line": 983
   },
   {
-    "message": "layers[57]: layer \"invalid expression - color-relief-color must be zoom constant\" requires a raster-dem source",
-    "line": 992
+    "message": "layers[56].paint.color-relief-color: zoom expressions not supported",
+    "line": 986
   },
   {
-    "message": "layers[57].paint.color-relief-color: zoom expressions not supported",
-    "line": 995
+    "message": "layers[57]: layer \"invalid expression - color-relief-color must not be a function\" requires a raster-dem source",
+    "line": 991
   },
   {
-    "message": "layers[58]: layer \"invalid expression - color-relief-color must not be a function\" requires a raster-dem source",
-    "line": 1000
-  },
-  {
-    "message": "layers[58].paint.color-relief-color: zoom functions not supported",
-    "line": 1003
+    "message": "layers[57].paint.color-relief-color: zoom functions not supported",
+    "line": 994
   }
 ]