Weird effect in "Lines" view with complex style rules #73
Description
Not sure how to describe this bug, but it looks like this:
Looks like the SVG shape is self-intersecting perhaps?
This is happening with a client stylesheet that is doing some very complicated line width calculation where I have a zoom interpolation with a case expression nested in each zoom level.
Here's a sanitized example where I removed any references to the client and extracted just one of the layers that causes this problem. To re-create, copy this content into a style.json, then drag it into chartographer.stamen.com and click the "Lines" view.
{
"version": 8,
"name": "test-style",
"center": [0, 0],
"zoom": 1,
"sources": {},
"sprite": "",
"glyphs": "",
"layers": [
{
"id": "bridge-road",
"type": "line",
"source": "openmaptiles",
"source-layer": "transportation",
"minzoom": 12,
"layout": {
"line-cap": "round",
"line-join": "round",
"line-sort-key": ["to-number", ["get", "lanes"]]
},
"paint": {
"line-color": [
"interpolate",
["linear"],
["zoom"],
16,
[
"match",
["get", "class"],
[
"primary",
"secondary",
"primary_link",
"secondary_link",
"residential"
],
"hsl(210, 12%, 85%)",
["motorway", "motorway_link", "tertiary_link", "tertiary"],
"hsl(210, 12%, 75%)",
"hsl(210, 12%, 85%)"
],
17,
"hsl(210, 12%, 60%)"
],
"line-width": [
"interpolate",
["exponential", 2],
["zoom"],
12,
[
"case",
["==", ["get", "lanes"], 1],
0.4,
["==", ["get", "lanes"], 2],
0.4,
["==", ["get", "lanes"], 3],
0.6,
["==", ["get", "lanes"], 4],
1,
["==", ["get", "lanes"], 5],
2.2,
["==", ["get", "lanes"], 6],
2.8,
["==", ["get", "lanes"], 7],
3.4,
1
],
13,
[
"case",
["==", ["get", "lanes"], 1],
0.5,
["==", ["get", "lanes"], 2],
0.8,
["==", ["get", "lanes"], 3],
2.5,
["==", ["get", "lanes"], 4],
3.5,
["==", ["get", "lanes"], 5],
4,
["==", ["get", "lanes"], 6],
4,
["==", ["get", "lanes"], 7],
4.5,
1.7
],
14,
[
"case",
["==", ["get", "lanes"], 1],
0.6,
["==", ["get", "lanes"], 2],
1.5,
["==", ["get", "lanes"], 3],
3.5,
["==", ["get", "lanes"], 4],
4,
["==", ["get", "lanes"], 5],
4,
["==", ["get", "lanes"], 6],
5,
["==", ["get", "lanes"], 7],
6,
2.3
],
15,
[
"case",
["==", ["get", "lanes"], 1],
1,
["==", ["get", "lanes"], 2],
3.5,
["==", ["get", "lanes"], 3],
6.5,
["==", ["get", "lanes"], 4],
7.5,
["==", ["get", "lanes"], 5],
9,
["==", ["get", "lanes"], 6],
11,
["==", ["get", "lanes"], 7],
13,
2.3
],
16,
[
"case",
["==", ["get", "lanes"], 1],
1.8,
["==", ["get", "lanes"], 2],
5,
["==", ["get", "lanes"], 3],
11,
["==", ["get", "lanes"], 4],
12,
["==", ["get", "lanes"], 5],
14,
["==", ["get", "lanes"], 6],
17,
["==", ["get", "lanes"], 7],
20,
3
],
18,
[
"case",
["==", ["get", "lanes"], 1],
15,
["==", ["get", "lanes"], 2],
27,
["==", ["get", "lanes"], 3],
34,
["==", ["get", "lanes"], 4],
40,
["==", ["get", "lanes"], 5],
50,
["==", ["get", "lanes"], 6],
60,
["==", ["get", "lanes"], 7],
70,
15
],
19,
[
"case",
["==", ["get", "lanes"], 1],
20,
["==", ["get", "lanes"], 2],
40,
["==", ["get", "lanes"], 3],
60,
["==", ["get", "lanes"], 4],
80,
["==", ["get", "lanes"], 5],
100,
["==", ["get", "lanes"], 6],
120,
["==", ["get", "lanes"], 7],
140,
20
],
22,
[
"case",
["==", ["get", "lanes"], 1],
160,
["==", ["get", "lanes"], 2],
320,
["==", ["get", "lanes"], 3],
480,
["==", ["get", "lanes"], 4],
640,
["==", ["get", "lanes"], 5],
800,
["==", ["get", "lanes"], 6],
960,
["==", ["get", "lanes"], 7],
1120,
160
]
]
}
}
],
"id": "none"
}