Skip to content

Commit

Permalink
Merge pull request #184 from ZeLonewolf/road-disambiguation
Browse files Browse the repository at this point in the history 
This PR disambiguates highway levels (fixes #84) by always showing primary and lower highways with either dark or light treatments rather than a mix of both. The current dark/light switch happens at z15, but it could be changed earlier or later.

Additionally, the dark treatment from highways changes from from using the fill layer to draw "strokes" (without a casing layer) to always drawing both the casing and fill layers, but using a light casing with dark fill and a dark casing with light fill at the different zooms of primary and down. This partially or fully addresses #169 by allowing the the dark treatment's lighter casing to disambiguate between junctions and bridges/overpasses.
  • Loading branch information
@adamfranco
adamfranco authored Feb 22, 2022
2 parents 14ea673 + 1a834a3 commit 9cf8039
Showing 1 changed file with 152 additions and 32 deletions.
184 changes: 152 additions & 32 deletions style/layer/road.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,8 +260,9 @@ let trunkFillWidth = [
[20, 18],
];
let trunkCasingWidth = [
[9, 1],
[12, 4],
[4, 0.5],
[9, 1.2],
[12, 5],
[20, 22],
];

Expand All @@ -274,13 +275,24 @@ class Trunk extends Road {
this.hue = 0;

this.minZoomFill = 5;
this.minZoomCasing = 15;
this.minZoomCasing = 5;

this.fillWidth = trunkFillWidth;
this.casingWidth = trunkCasingWidth;

this.fillColor = `hsl(${this.hue}, 77%, 50%)`;
this.casingColor = `hsl(${this.hue}, 70%, 18%)`;
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
5,
`hsl(${this.hue}, 77%, 50%)`,
9,
`hsl(${this.hue}, 77%, 50%)`,
15,
`hsl(${this.hue}, 70%, 18%)`,
];

this.surfaceColor = `hsl(${this.hue}, 95%, 80%)`;

this.constraints = ["!=", "expressway", 1];
Expand Down Expand Up @@ -325,24 +337,41 @@ class Primary extends Road {
this.link = false;
this.hue = 0;

this.minZoomFill = 14;
this.minZoomFill = 7;
this.minZoomCasing = 7;

this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.9);
this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.9);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
// Casing color gets interpolated as a fade from light to dark between this
// Fill color gets interpolated as a fade from light to dark between this
// level's introduction and next road-level introduction.
this.casingColor = [
// It then switches at z15 from dark to light with the casing switching as
// well.
this.fillColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
7,
`hsl(${this.hue}, 0%, 75%)`,
9,
`hsl(${this.hue}, 0%, 23%)`,
14.9999,
`hsl(${this.hue}, 0%, 23%)`,
15,
`hsl(${this.hue}, 100%, 100%)`,
];
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
7,
`hsl(${this.hue}, 0%, 90%)`,
14.9999,
`hsl(${this.hue}, 0%, 90%)`,
15,
`hsl(${this.hue}, 0%, 23%)`,
];

this.surfaceColor = `hsl(${this.hue}, 0%, 80%)`;

this.constraints = ["!=", "expressway", 1];
Expand All @@ -353,11 +382,20 @@ class PrimaryExpressway extends Primary {
constructor() {
super();

this.minZoomFill = 7;

this.fillWidth = Util.zoomMultiply(trunkExpresswayFillWidth, 1.0);
this.casingWidth = Util.zoomMultiply(trunkExpresswayCasingWidth, 0.9);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
7,
`hsl(${this.hue}, 0%, 75%)`,
9,
`hsl(${this.hue}, 0%, 23%)`,
];

this.constraints = ["==", "expressway", 1];
}
}
Expand All @@ -370,24 +408,41 @@ class Secondary extends Road {
this.link = false;
this.hue = 0;

this.minZoomFill = 15;
this.minZoomFill = 9;
this.minZoomCasing = 9;

this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.6);
this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.6);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
// Casing color gets interpolated as a fade from light to dark between this
// Fill color gets interpolated as a fade from light to dark between this
// level's introduction and next road-level introduction.
this.casingColor = [
// It then switches at z15 from dark to light with the casing switching as
// well.
this.fillColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
9,
`hsl(${this.hue}, 0%, 75%)`,
11,
`hsl(${this.hue}, 0%, 23%)`,
14.9999,
`hsl(${this.hue}, 0%, 23%)`,
15,
`hsl(${this.hue}, 100%, 100%)`,
];
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
9,
`hsl(${this.hue}, 0%, 90%)`,
14.9999,
`hsl(${this.hue}, 0%, 90%)`,
15,
`hsl(${this.hue}, 0%, 23%)`,
];

this.surfaceColor = `hsl(${this.hue}, 0%, 80%)`;

this.constraints = ["!=", "expressway", 1];
Expand All @@ -398,11 +453,20 @@ class SecondaryExpressway extends Secondary {
constructor() {
super();

this.minZoomFill = 9;

this.fillWidth = Util.zoomMultiply(trunkExpresswayFillWidth, 0.7);
this.casingWidth = Util.zoomMultiply(trunkExpresswayCasingWidth, 0.7);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
9,
`hsl(${this.hue}, 0%, 75%)`,
11,
`hsl(${this.hue}, 0%, 23%)`,
];

this.constraints = ["==", "expressway", 1];
}
}
Expand All @@ -415,24 +479,41 @@ class Tertiary extends Road {
this.link = false;
this.hue = 0;

this.minZoomFill = 16;
this.minZoomFill = 11;
this.minZoomCasing = 11;

this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.5);
this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.5);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
// Casing color gets interpolated as a fade from light to dark between this
// Fill color gets interpolated as a fade from light to dark between this
// level's introduction and next road-level introduction.
this.casingColor = [
// It then switches at z15 from dark to light with the casing switching as
// well.
this.fillColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
11,
`hsl(${this.hue}, 0%, 75%)`,
13,
`hsl(${this.hue}, 0%, 23%)`,
14.9999,
`hsl(${this.hue}, 0%, 23%)`,
15,
`hsl(${this.hue}, 100%, 100%)`,
];
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
11,
`hsl(${this.hue}, 0%, 90%)`,
14.9999,
`hsl(${this.hue}, 0%, 90%)`,
15,
`hsl(${this.hue}, 0%, 23%)`,
];

this.surfaceColor = `hsl(${this.hue}, 0%, 80%)`;

this.constraints = ["!=", "expressway", 1];
Expand All @@ -443,11 +524,20 @@ class TertiaryExpressway extends Tertiary {
constructor() {
super();

this.minZoomFill = 11;

this.fillWidth = Util.zoomMultiply(trunkExpresswayFillWidth, 0.5);
this.casingWidth = Util.zoomMultiply(trunkExpresswayCasingWidth, 0.5);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
11,
`hsl(${this.hue}, 0%, 75%)`,
13,
`hsl(${this.hue}, 0%, 23%)`,
];

this.constraints = ["==", "expressway", 1];
}
}
Expand All @@ -460,24 +550,39 @@ class Minor extends Road {
this.link = false;
this.hue = 0;

this.minZoomFill = 16;
this.minZoomFill = 12;
this.minZoomCasing = 12;

this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.3);
this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.3);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
// Casing color gets interpolated as a fade from light to dark between this
// Fill color gets interpolated as a fade from light to dark between this
// level's introduction and next road-level introduction.
// It then switches at z15 from dark to light with the casing switching as
// well.
this.fillColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
12,
`hsl(${this.hue}, 0%, 75%)`,
14.9999,
`hsl(${this.hue}, 0%, 23%)`,
15,
`hsl(${this.hue}, 100%, 100%)`,
];
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
12,
`hsl(${this.hue}, 0%, 65%)`,
`hsl(${this.hue}, 0%, 90%)`,
14.9999,
`hsl(${this.hue}, 0%, 90%)`,
15,
`hsl(${this.hue}, 0%, 23%)`,
];

this.surfaceColor = `hsl(${this.hue}, 0%, 80%)`;
}
}
Expand All @@ -490,24 +595,39 @@ class Service extends Road {
this.link = false;
this.hue = 0;

this.minZoomFill = 16;
this.minZoomFill = 13;
this.minZoomCasing = 13;

this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.2);
this.casingWidth = Util.zoomMultiply(trunkCasingWidth, 0.2);

this.fillColor = `hsl(${this.hue}, 100%, 100%)`;
// Casing color gets interpolated as a fade from light to dark between this
// Fill color gets interpolated as a fade from light to dark between this
// level's introduction and next road-level introduction.
this.casingColor = [
// It then switches at z15 from dark to light with the casing switching as
// well.
this.fillColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
13,
`hsl(${this.hue}, 0%, 65%)`,
18,
14.9999,
`hsl(${this.hue}, 0%, 23%)`,
15,
`hsl(${this.hue}, 100%, 100%)`,
];
this.casingColor = [
"interpolate",
["exponential", roadExp],
["zoom"],
13,
`hsl(${this.hue}, 0%, 90%)`,
14.9999,
`hsl(${this.hue}, 0%, 90%)`,
15,
`hsl(${this.hue}, 0%, 23%)`,
];

this.surfaceColor = `hsl(${this.hue}, 0%, 80%)`;

this.constraints = ["!in", "service", "parking_aisle", "driveway"];
Expand All @@ -518,7 +638,7 @@ class SmallService extends Service {
constructor() {
super();

this.minZoomFill = 16;
this.minZoomFill = 15;
this.minZoomCasing = 15;

this.fillWidth = Util.zoomMultiply(trunkFillWidth, 0.15);
Expand Down

0 comments on commit 9cf8039

Please sign in to comment.