diff --git a/components/src/maplibre/MapStyle/components/Roads.ts b/components/src/maplibre/MapStyle/components/Roads.ts
index 04124afb..4d483444 100644
--- a/components/src/maplibre/MapStyle/components/Roads.ts
+++ b/components/src/maplibre/MapStyle/components/Roads.ts
@@ -67,9 +67,8 @@ const street_primary = {
line_width: {
stops: [
[8, 0],
- [10, 1],
- [12, 2],
- [14, 3],
+ [13, 1],
+ [15, 2],
[16, 10],
[18, 34],
[19, 70],
@@ -87,9 +86,9 @@ const street_primary_case = {
line_color: tokens.street_primary_case,
line_width: {
stops: [
- [11, 0],
- [12, 2],
- [14, 5],
+ [8, 0],
+ [13, 2],
+ [15, 4],
[16, 12],
[18, 36],
[19, 74],
@@ -105,11 +104,12 @@ const street_primary_case = {
};
const street_secondary = {
+ line_color: tokens.street_secondary,
line_width: {
stops: [
- [11, 1],
- [14, 4],
- [16, 6],
+ [12, 1],
+ [14, 2],
+ [16, 8],
[18, 28],
[19, 64],
[20, 130]
@@ -119,10 +119,11 @@ const street_secondary = {
const street_secondary_case = {
line_width: {
stops: [
- [12, 2],
- [14, 5],
- [16, 7],
- [18, 14],
+ [12, 0],
+ [14, 3],
+ [16, 10],
+ [18, 30],
+ [19, 66],
[20, 40]
]
}
@@ -1227,8 +1228,8 @@ export default function makeRoads() {
},
'line-opacity': {
stops: [
- [12, 0],
- [13, 1]
+ [13, 0],
+ [14, 1]
]
}
},
@@ -1271,8 +1272,8 @@ export default function makeRoads() {
},
'line-opacity': {
stops: [
- [12, 0],
- [13, 1]
+ [13, 0],
+ [14, 1]
]
}
},
@@ -1478,7 +1479,7 @@ export default function makeRoads() {
['!=', 'service', 'driveway']
],
paint: {
- 'line-color': 'hsl(0,0%,100%)',
+ 'line-color': street_residential.line_color,
'line-width': {
stops: [
[14, 1],
@@ -1536,7 +1537,7 @@ export default function makeRoads() {
['!=', 'tunnel', true]
],
paint: {
- 'line-color': 'hsl(0,0%,100%)',
+ 'line-color': street_secondary.line_color,
'line-width': {
stops: [
[12, 1],
diff --git a/components/src/maplibre/MapStyle/components/Walking.ts b/components/src/maplibre/MapStyle/components/Walking.ts
index c2e99ccd..292385d1 100644
--- a/components/src/maplibre/MapStyle/components/Walking.ts
+++ b/components/src/maplibre/MapStyle/components/Walking.ts
@@ -491,23 +491,6 @@ export default function makeWalking(): any {
});
const walkingSurface: Layer[] = [
- {
- id: 'street-pedestrian-zone',
- type: 'fill',
- 'source-layer': 'street_polygons',
- filter: ['all', ['!=', 'bridge', true], ['!=', 'tunnel', true], ['==', 'kind', 'pedestrian']],
- paint: {
- 'fill-color': 'rgba(245,245,245,0.25)',
- 'fill-opacity': {
- stops: [
- [12, 0],
- [13, 1],
- [14, 0],
- [15, 1]
- ]
- }
- }
- },
{
id: 'way-footway:case',
type: 'line',
@@ -630,7 +613,7 @@ export default function makeWalking(): any {
'source-layer': 'streets',
filter: ['all', ['==', 'kind', 'pedestrian'], ['!=', 'bridge', true], ['!=', 'tunnel', true]],
paint: {
- 'line-color': 'hsl(36,0%,80%)',
+ 'line-color': tokens.street_tertiary_case,
'line-width': {
stops: [
[12, 2],
@@ -643,15 +626,12 @@ export default function makeWalking(): any {
},
'line-opacity': {
stops: [
- [12, 0],
- [13, 1]
+ [14, 0],
+ [15, 1]
]
}
},
- layout: {
- 'line-join': 'round',
- 'line-cap': 'round'
- }
+ layout: street_layout
},
{
id: 'way-footway',
@@ -764,10 +744,7 @@ export default function makeWalking(): any {
]
}
},
- layout: {
- 'line-join': 'round',
- 'line-cap': 'round'
- }
+ layout: street_layout
},
{
id: 'street-pedestrian',
@@ -788,16 +765,12 @@ export default function makeWalking(): any {
},
'line-opacity': {
stops: [
- [12, 0],
[13, 0],
[14, 1]
]
}
},
- layout: {
- 'line-join': 'round',
- 'line-cap': 'round'
- }
+ layout: street_layout
},
{
id: 'street-track-bicycle',
@@ -813,10 +786,7 @@ export default function makeWalking(): any {
paint: {
'line-color': 'hsl(0,0%,100%)'
},
- layout: {
- 'line-join': 'round',
- 'line-cap': 'round'
- }
+ layout: street_layout
},
{
id: 'street-pedestrian-bicycle',
@@ -865,10 +835,7 @@ export default function makeWalking(): any {
paint: {
'line-color': 'hsl(0,0%,100%)'
},
- layout: {
- 'line-join': 'round',
- 'line-cap': 'round'
- }
+ layout: street_layout
},
{
id: 'street-livingstreet-bicycle',
diff --git a/components/src/maplibre/MapStyle/tokens.ts b/components/src/maplibre/MapStyle/tokens.ts
index 148ea8a3..fdf8d125 100644
--- a/components/src/maplibre/MapStyle/tokens.ts
+++ b/components/src/maplibre/MapStyle/tokens.ts
@@ -7,14 +7,14 @@ const tokens = {
water_light: 'hsl(210, 41%, 90%)',
water_ocean: 'hsl(210, 25%, 96%)',
marsh: 'hsl(200, 14%, 97%)',
- grass: 'hsl(149, 37%, 97%)',
- grass_dark: 'hsl(149, 37%, 93%)',
- street_primary: 'hsl(0, 0%, 95%)',
- street_primary_case: 'hsla(0, 0%, 0%, 20%)',
+ grass: 'hsl(140, 27%, 96%)',
+ grass_dark: 'hsl(148, 52%, 94%)',
+ street_primary: 'hsl(0, 0%, 96%)',
+ street_primary_case: 'hsl(0, 0%, 75%)',
street_secondary: 'hsl(0, 0%, 95%)',
street_secondary_case: 'hsl(0, 0%, 50%)',
street_tertiary: 'hsl(0, 0%, 95%)',
- street_tertiary_case: 'hsl(0, 0%, 50%)',
+ street_tertiary_case: 'hsl(0, 0%, 70%)',
label_primary: 'hsl(240, 5%, 10%)',
label_secondary: 'hsl(240, 2%, 30%)',
label_tertiary: 'hsl(240, 2%, 50%)',