Limited Precision with line-gradient and line-progress linear interpolation

[aspindlerT]

mapbox-gl-js version: v1.10.1

browser: Chrome 81

Steps to Trigger Behavior

1. Use the line-gradient paint property on a line with linear interpolation for line-progress
2. Make the step between two points for interpolation very close together, within 0.001 of each other
3. Now make the difference even smaller, like 0.0001 within each other. There will be no difference in the output line created. However the gradient should start much closer to the first point.

For example, if you have the following layer definition:

{
    type: 'line',
    source: 'line',
    id: 'line',
    paint: {
        'line-color': '#F50057',
        'line-width': 7,
        'line-opacity': 0.6,
        'line-gradient': [
            'interpolate',
            ['linear'],
            ['line-progress'],
            0,
            'red',
            0.001,
            'blue',
            1,
            'green',
        ]
}
        

Then changing the 0.001 to a smaller number will not have an effect on the output. It seems that this is the maximum precision of the line gradient which is unfortunate because if you have a line that goes across the entire US and want a gradient with steps around the size of a house lot then its impossible.

Link to Demonstration

https://jsbin.com/dasusuqopu/1/edit?html,css,js,output

In the above demo change the 0.001 in the layer definition to something like 0.0001 to see that it has no effect.

Expected Behavior

Any precision should work for the steps between line gradients.

Actual Behavior

The precision only goes to around 0.001.

[asheemmamoowala]

@aspindlerT #9694 has a fix for this exact issue. Want to try it out and let us know if it solves the precision issue you have reported here?

[aspindlerT]

@asheemmamoowala Is there an easy way for me to get a build of that branch? Or will I need to build it myself?

[asheemmamoowala]

@aspindlerT You'll have to build it yourself. We don't have builds from branches/PRs. The contributing docs will help you get started if you haven't built GL-JS from source before.