Implement data-driven styling for line-dasharray #5812

lucaswoj · 2025-04-25T22:35:53Z

See also maplibre/maplibre-style-spec#1100

This PR resolves #1235 by making the line-dasharray property "data-driven", meaning it can now reference feature property values in expressions.

Due to limits in the expression system, dasharrays must be specified in the style using the ["literal", [...]] syntax. Feature properties cannot directly contain array values.

Example:

"paint": {
  "line-dasharray": [
    "case",
    ["==", ["get", "road_type"], "trail"], ["literal", [1, 1]],
    ["==", ["get", "road_type"], "highway"], ["literal", [4, 2]],
    ["literal", [2, 2]]
  ]
}

Benchmarks

$ npm run benchmark

> maplibre-gl@5.7.1 benchmark
> node --no-warnings --loader ts-node/esm test/bench/run-benchmarks.ts

Starting headless chrome at: http://localhost:9966/test/bench/versions/index.html
                                                     v5.7.1                           main  data-driven-dasharray 9778a15 
                        Paint                    4.8350 ms                      4.7819 ms                      4.8240 ms 
                   QueryPoint                  156.4884 ms                    154.7769 ms                    156.3121 ms 
                     QueryBox                  104.8300 ms                    104.8764 ms                    105.0493 ms 
                       Layout                   74.0651 ms                     74.0231 ms                     74.1744 ms 
                    Placement                    3.3104 ms                      3.4451 ms                      3.3704 ms 
                     Validate                    0.7733 ms                      0.7800 ms                      0.7660 ms 
             StyleLayerCreate                    0.7400 ms                      0.7240 ms                      0.7211 ms 
               FunctionCreate                    0.0117 ms                      0.0125 ms                      0.0125 ms 
             FunctionEvaluate                    0.0020 ms                      0.0020 ms                      0.0021 ms 
             ExpressionCreate                    0.1495 ms                      0.1479 ms                      0.1490 ms 
           ExpressionEvaluate                    0.0088 ms                      0.0088 ms                      0.0088 ms 
               WorkerTransfer                    3.9750 ms                      3.8574 ms                      4.1199 ms 
                  PaintStates                   32.9472 ms                     32.6724 ms                     32.5642 ms 
          PropertyLevelRemove                   31.9636 ms                     31.9730 ms                     31.9314 ms 
           FeatureLevelRemove                   31.8360 ms                     31.8835 ms                     31.9515 ms 
            SourceLevelRemove                   31.9842 ms                     31.9564 ms                     31.9443 ms 
              LayerBackground                    0.5388 ms                      0.5388 ms                      0.5415 ms 
                  LayerCircle                    0.0838 ms                      0.0884 ms                      0.0893 ms 
                    LayerFill                    0.1350 ms                      0.1415 ms                      0.1418 ms 
           LayerFillExtrusion                    0.0916 ms⚠️                     0.0981 ms⚠️                     0.0991 ms 
                 LayerHeatmap                    0.5595 ms☠️                     0.5651 ms☠️                     0.5520 ms 
               LayerHillshade                    0.0689 ms                      0.0691 ms                      0.0726 ms 
      LayerColorRelief2Colors                    5.5683 ms☠️                     5.9341 ms                      6.2106 ms 
    LayerColorRelief256Colors                    6.2341 ms                      6.0844 ms                      5.5985 ms 
                    LayerLine                    0.0849 ms                      0.0919 ms⚠️                     0.0886 ms 
                  LayerRaster                    0.6773 ms                      0.6917 ms                      0.6740 ms 
                  LayerSymbol                    0.4103 ms                      0.4109 ms⚠️                     0.4143 ms⚠️
         LayerSymbolWithIcons                    0.4243 ms⚠️                     0.4256 ms⚠️                     0.4213 ms⚠️
  LayerTextWithVariableAnchor                    7.1703 ms☠️                     7.2015 ms                      7.2197 ms 
       LayerSymbolWithSortKey                    0.0535 ms⚠️                     0.0524 ms⚠️                     0.0518 ms⚠️
                         Load                   16.8075 ms☠️                    16.6567 ms⚠️                    16.7000 ms 
          LoadMatchingFeature                    0.0004 ms                      0.0004 ms                      0.0004 ms 
                 SymbolLayout                    4.0526 ms                      4.0474 ms                      4.0546 ms 
                 FilterCreate                    0.1777 ms                      0.1752 ms                      0.1752 ms 
               FilterEvaluate                    0.2753 ms                      0.2789 ms                      0.2780 ms 
                HillshadeLoad                  320.4750 ms☠️                   318.5486 ms                    323.5206 ms 
              ColorReliefLoad                  324.0647 ms                    324.0647 ms                    324.4353 ms 
                  CustomLayer                    0.0088 ms                      0.0088 ms                      0.0089 ms 
                      MapIdle                  322.4229 ms                    324.3457 ms                    324.0026 ms 
           SymbolCollisionBox                    3.6000 ms                      3.5871 ms⚠️                     3.5723 ms 
      SymbolCollisionBoxGlobe                   13.1642 ms                     13.2435 ms                     13.2263 ms 
                    Subdivide                   14.7933 ms                     14.6061 ms                     14.6397 ms 
           CoveringTilesGlobe                   10.1184 ms                     10.1171 ms                     10.4978 ms 
    CoveringTilesGlobePitched                   15.1567 ms                     14.7786 ms                     14.7753 ms 
        CoveringTilesMercator                    2.6828 ms                      2.6613 ms                      2.7006 ms 
 CoveringTilesMercatorPitched                    5.0028 ms                      5.0668 ms                      5.0054 ms

See full results at all.pdf

Launch Checklist

Phase 1: Basic Functionality

Phase 2: Pre-Code Review

Phase 3: Code Review

Underway

Look into support for "interpolate" expressions with arrays. (link)
Look into support for mixing array literals and null in one expression. (link)
Test global-state expressions with array literals. (link)

Phase 4: Post Code Review

See #5768 for similar workflow

Merge Allow data-driven styling for line-dasharray maplibre-style-spec#1100
Publish new version of maplibre-style-spec
Remove postinstall script hack and update package.json to reference latest version of maplibre-style-spec
Merge this PR

1ec5 · 2025-04-26T02:10:41Z

Due to limits in the expression system, arrays must be specified in the style using the ["literal", [...]] syntax. Feature properties cannot directly contain array values.

This would be a good use case for being able to form arrays dynamically: maplibre/maplibre-style-spec#950.

src/data/bucket/line_dasharray_attributes.ts

src/data/program_configuration.ts

src/render/draw_line.ts

src/render/program/line_program.ts

…riven-dasharray # Conflicts: # package-lock.json # package.json

src/data/bucket.ts

src/data/bucket/line_bucket.ts

This reverts commit d382706.

…riven-dasharray

lucaswoj · 2025-09-26T16:24:05Z

I've done another round of code review changes. Again, I've left open any conversations that I wasn't able to obviously resolve.

src/data/bucket.ts

HarelM · 2025-09-27T10:59:34Z

.github/workflows/test-all.yml

          path: coverage-merged

      - name: Code Coverage Annotation
+        if: github.event.pull_request.head.repo.full_name == github.repository


This is probably the least problematic one as if all lines are covered this wouldn't fail, are you sure this creates problems?

I noticed that removing this if: condition in d382706 caused this step to fail.

Our code coverage reporting and enforcement step continues to work correctly.

The failure appears to be related to annotation permissions. Since this workflow is running from my fork, it doesn't have the necessary permissions to create annotations in the main MapLibre GL JS repository. The annotations are helpful but disabling them does not compromise our quality standards.

Regarding the four statements marked as uncovered: these are actually covered by our render tests. I verified this by commenting them out and watching the render tests fail. This type of coverage reporting discrepancy is something we've seen before with our test setup. Addressing it would be outside this PR's scope.

Based on these factors, keeping the if: condition seems like the right approach here.

src/data/bucket.ts

HarelM

Thanks! I'll go ahead and release the spec package.

HarelM · 2025-09-27T11:12:41Z

I've just released version 24.2.0 of the style-spec.

socket-security · 2025-09-27T11:55:08Z

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@maplibre/maplibre-gl-style-spec@24.1.1 ⏵ 24.2.0	⁺¹		⁺³	⁺⁵	⁺³¹

View full report

lucaswoj · 2025-09-27T12:14:49Z

I've done another round of revisions, including updating package.json to reference the newly released style spec version.

birkskyum · 2025-09-27T13:34:48Z

Is there a demo using this new feature anywhere?

lucaswoj · 2025-09-27T17:09:07Z

Is there a demo using this new feature anywhere?

I don't have anything up online. Sorry!

HarelM · 2025-09-27T17:56:28Z

I think the only thing left is the changelog. Can you please add to it and I'll merge this PR and release a new version.

…gl-js into data-driven-dasharray

lucaswoj · 2025-09-27T18:11:32Z

Done

* Add render test * Update line_sdf.vertex.glsl and line_program.ts * wip * Update program_configuration.ts * WIP * WIP * WIP * WIP * WIP * WIP * WIP * Point to dev version of style-spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Try another way to link dev style spec * Update program_configuration.ts * Update draw_line.ts * Update line_program.ts * Update style.json * Begin migrating to using standard property function pattern utils * Update program_configuration.ts * Update program_configuration.ts * WIP * WIP * wip * Update line_program.ts * Update draw_line.ts * BEGIN EXPERIMENT * wip * Update line_sdf.fragment.glsl * WIP * WIP * wip * WIP * test * WIP * WIP * Eliminate u_patternscale_a/b * Generalize ImagePosition * Add ImagePositionLike class * WIP * WIP * WIP * wip * Update line_sdf.fragment.glsl * multiply line pattern by 1024 * Got cross-worker line atlas management working * Self code review * Self PR review * Create separate BucketFeature#dashes property * Update bucket.ts * Make PopulateParameters#dasharrayDependencies and object * WIP * WIP * Run lint --fix * Update program_configuration.ts * Remove parameter from lineSDFUniformValues maplibre#5812 (comment) * Get rid of 1024 magic constant * Fix CI * Fix render tests * Fix tests * Remove TODO comment * Remove other TODO comment * Fix lint errors * Fix type error * Delete line-dasharray.html * Fix a couple render tests * Update program_configuration.ts * Revert "Update program_configuration.ts" This reverts commit 71efa53. * Hack to maybe make tests pass * Update line_program.ts * Factor out createBucketLineAtlas * Create entirely separate dasharray attribute s def WIP * Remove commented out code in line_sdf.fragment.glsl * Self code review * Update min.test.ts * Update worker_tile.ts * Fix tsc * Fix tests * Rename dasharray to dash * Rename dasharray to dash * Fix tests * Fix tests * Revert * Revert "Revert" This reverts commit 8e6f612. * Update 'expectedBytes' * Refactor * Refactor * Revert * Refactor CrossFadedConstantBinder#setUniform * Remove dash_pixel_ratio attributes * Factor dash logic out of pattern_bucket_features * Factor out CrossFadedBinder * Eliminate 'u_sdfgammaratio' * Update line_sdf.vertex.glsl * Update test-all.yml * Revert unnescessary changes * Update test-all.yml * Fix CI * Fix support for round line caps * Self code review * Self code review * Self code review * Keep dash position and image position separate * Remove bucket_line_atlas * Fully remove ImagePositionLike * Export DashEntry type for docs * Self code review * Self code review * Rename CrossFadedCompositeBinder to CrossFadedPatternBinder * Self code review * Self code review * Self code review * Self code review * Self code review * Self code review * Self code review * Self code review * Self code review * Update program_configuration.ts * Update line_bucket.test.ts * Add worker_tile test * Simplify worker_tile test * Simplify worker_tile test * Add style tests * Simplify line_bucket * Simplify CrossFadedBinder * Simplify GetDashesParameters redo tests * Respond to PR review * Rename Bucket#hasDependencies * Revert GH Action change * Use a for ... of loop per PR feedback * Use the Feature#dashes type as source of truth * Update line_bucket per PR review * Revert "Revert GH Action change" This reverts commit d382706. * Record * Bump style spec version * Update CHANGELOG.md * Update CHANGELOG.md --------- Co-authored-by: Claude <noreply@anthropic.com>

Add render test

ac6204e

lucaswoj changed the title ~~Allow data-driven line-dasharray~~ Implement data-driven styling for line-dash-array Apr 25, 2025

lucaswoj changed the title ~~Implement data-driven styling for line-dash-array~~ Implement data-driven styling for line-dasharray Apr 25, 2025

lucaswoj mentioned this pull request Apr 25, 2025

Allow data-driven styling for line-dasharray maplibre/maplibre-style-spec#1100

Merged

9 tasks

lucaswoj added 2 commits April 25, 2025 15:16

Update line_sdf.vertex.glsl and line_program.ts

c258b24

wip

d64cf24

lucaswoj added 8 commits April 28, 2025 09:27

Update program_configuration.ts

9f63afa

WIP

e4d7ef7

WIP

ba8db9c

WIP

2177da1

WIP

2062be6

WIP

91fb1ea

WIP

382a51d

WIP

58331f9

lucaswoj commented Apr 28, 2025

View reviewed changes

lucaswoj added 2 commits May 6, 2025 14:55

Point to dev version of style-spec

afcaf1e

Merge branch 'main' of github.com:maplibre/maplibre-gl-js into data-d…

b7ae6b9

…riven-dasharray # Conflicts: # package-lock.json # package.json

lucaswoj force-pushed the data-driven-dasharray branch from 1f161aa to b7ae6b9 Compare May 6, 2025 22:57

lucaswoj added 11 commits May 6, 2025 15:09

Try another way to link dev style spec

b591bab

Try another way to link dev style spec

650ed77

Try another way to link dev style spec

6728934

Try another way to link dev style spec

7d5f1b4

Try another way to link dev style spec

17a4945

Try another way to link dev style spec

7677c03

Try another way to link dev style spec

65fa4ea

Try another way to link dev style spec

5267ce2

Try another way to link dev style spec

1bfa47c

Try another way to link dev style spec

bdf1c0a

Try another way to link dev style spec

c2ae820

HarelM reviewed Sep 26, 2025

View reviewed changes

src/data/bucket.ts Outdated Show resolved Hide resolved

HarelM reviewed Sep 26, 2025

View reviewed changes

src/data/bucket/line_bucket.ts Outdated Show resolved Hide resolved

HarelM reviewed Sep 26, 2025

View reviewed changes

src/data/bucket/line_bucket.ts Outdated Show resolved Hide resolved

HarelM reviewed Sep 26, 2025

View reviewed changes

src/data/bucket/line_bucket.ts Outdated Show resolved Hide resolved

lucaswoj added 5 commits September 26, 2025 07:52

Use a for ... of loop per PR feedback

4a3c35a

Use the Feature#dashes type as source of truth

1b192ff

Update line_bucket per PR review

009ff73

Revert "Revert GH Action change"

a6883af

This reverts commit d382706.

Merge branch 'main' of github.com:maplibre/maplibre-gl-js into data-d…

d7cd749

…riven-dasharray

HarelM reviewed Sep 27, 2025

View reviewed changes

src/data/bucket.ts Show resolved Hide resolved

HarelM reviewed Sep 27, 2025

View reviewed changes

src/data/bucket.ts Outdated Show resolved Hide resolved

HarelM approved these changes Sep 27, 2025

View reviewed changes

lucaswoj added 2 commits September 27, 2025 03:12

Record

39af6cd

Bump style spec version

7b7ed7c

Merge branch 'main' into data-driven-dasharray

3208846

lucaswoj added 2 commits September 27, 2025 10:04

Update CHANGELOG.md

1762e48

Merge branch 'data-driven-dasharray' of github.com:lucaswoj/maplibre-…

e7e6913

…gl-js into data-driven-dasharray

Update CHANGELOG.md

0148af9

HarelM merged commit b9a2a99 into maplibre:main Sep 28, 2025
26 checks passed

lucaswoj mentioned this pull request Oct 13, 2025

Dashed lines have blurry rounded caps #6554

Merged

8 tasks

Uh oh!

Implement data-driven styling for line-dasharray #5812

Implement data-driven styling for line-dasharray #5812

Uh oh!

Conversation

lucaswoj commented Apr 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Benchmarks

Launch Checklist

Phase 1: Basic Functionality

Phase 2: Pre-Code Review

Phase 3: Code Review

Phase 4: Post Code Review

Uh oh!

1ec5 commented Apr 26, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

lucaswoj commented Sep 26, 2025

Uh oh!

Uh oh!

HarelM Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

lucaswoj Sep 27, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

HarelM left a comment

Choose a reason for hiding this comment

Uh oh!

HarelM commented Sep 27, 2025

Uh oh!

socket-security bot commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lucaswoj commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

birkskyum commented Sep 27, 2025

Uh oh!

lucaswoj commented Sep 27, 2025

Uh oh!

HarelM commented Sep 27, 2025

Uh oh!

lucaswoj commented Sep 27, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

lucaswoj commented Apr 25, 2025 •

edited

Loading

socket-security bot commented Sep 27, 2025 •

edited

Loading

lucaswoj commented Sep 27, 2025 •

edited

Loading