From d8454674ac46d53fd0f8db6fbae67a298ef30f14 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 5 Jun 2024 18:25:43 -0400 Subject: [PATCH 1/2] Refactor boundary casing --- src/layer/boundary.js | 193 ++++++++++++++---------------------------- src/layer/index.js | 5 +- 2 files changed, 64 insertions(+), 134 deletions(-) diff --git a/src/layer/boundary.js b/src/layer/boundary.js index b36d6eeec..a8c3469ed 100644 --- a/src/layer/boundary.js +++ b/src/layer/boundary.js @@ -3,22 +3,57 @@ import * as Color from "../constants/color.js"; import * as Label from "../constants/label.js"; -export const city = { - id: "boundary_city", +export const boundaryCasing = { + id: "boundary_casing", type: "line", paint: { - "line-color": Color.border, - "line-dasharray": [2, 4], - "line-width": 1, - "line-offset": 0, + "line-color": [ + "match", + ["get", "admin_level"], + 2, `hsl(${Color.hueBorderCasing}, 35%, 86%)`, + [3, 4], `hsl(${Color.hueBorderCasing}, 30%, 90%)`, + 5, Color.borderCasing, + 6, Color.borderCasing, + Color.borderCasing + ], + "line-width": [ + "interpolate", + ["linear"], + ["zoom"], + 2, [ + "match", + ["get", "admin_level"], + 2, 4, + [3, 4], 4, + 5, 5, + 6, 5, + 1 + ], + 12, [ + "match", + ["get", "admin_level"], + 2, 25, + [3, 4], 20, + 5, 6, + 6, 6, + 1 + ], + 16, [ + "match", + ["get", "admin_level"], + 2, 50, + [3, 4], 30, + 1 + ] + ] }, filter: [ "all", - ["==", ["get", "admin_level"], 8], + ["in", ["get", "admin_level"], ["literal", [2, 3, 4, 5, 6]]], ["==", ["get", "disputed"], 0], ["==", ["get", "maritime"], 0], ], - minzoom: 11, + minzoom: 2, layout: { "line-join": "round", visibility: "visible", @@ -27,21 +62,18 @@ export const city = { "source-layer": "boundary", }; -export const countyCasing = { - id: "boundary_county_casing", +export const city = { + id: "boundary_city", type: "line", paint: { - "line-color": Color.borderCasing, - "line-width": { - stops: [ - [11, 5], - [12, 6], - ], - }, + "line-color": Color.border, + "line-dasharray": [2, 4], + "line-width": 1, + "line-offset": 0, }, filter: [ "all", - ["==", ["get", "admin_level"], 6], + ["==", ["get", "admin_level"], 8], ["==", ["get", "disputed"], 0], ["==", ["get", "maritime"], 0], ], @@ -78,33 +110,6 @@ export const county = { "source-layer": "boundary", }; -export const regionCasing = { - id: "boundary_region_casing", - type: "line", - paint: { - "line-color": Color.borderCasing, - "line-width": { - stops: [ - [8, 5], - [9, 6], - ], - }, - }, - filter: [ - "all", - ["==", ["get", "admin_level"], 5], - ["==", ["get", "disputed"], 0], - ["==", ["get", "maritime"], 0], - ], - minzoom: 8, - layout: { - "line-join": "round", - visibility: "visible", - }, - source: "openmaptiles", - "source-layer": "boundary", -}; - export const region = { id: "boundary_region", type: "line", @@ -129,41 +134,6 @@ export const region = { "source-layer": "boundary", }; -export const stateCasing = { - id: "boundary_state_casing", - type: "line", - paint: { - "line-color": { - base: 1.2, - stops: [ - [3, `hsl(${Color.hueBorderCasing - 30}, 25%, 94%)`], - [7, `hsl(${Color.hueBorderCasing}, 30%, 90%)`], - ], - }, - "line-width": { - base: 1.2, - stops: [ - [3, 4], - [12, 20], - [16, 30], - ], - }, - }, - filter: [ - "all", - ["in", ["get", "admin_level"], ["literal", [3, 4]]], - ["==", ["get", "maritime"], 0], - ], - minzoom: 3, - layout: { - "line-join": "round", - "line-cap": "round", - visibility: "visible", - }, - source: "openmaptiles", - "source-layer": "boundary", -}; - export const state = { id: "boundary_state", type: "line", @@ -206,48 +176,6 @@ export const state = { "source-layer": "boundary", }; -export const countryCasing = { - id: "boundary_country_casing", - type: "line", - paint: { - "line-color": { - base: 1.2, - stops: [ - [3, `hsl(${Color.hueBorderCasing - 30}, 35%, 86%)`], - [7, `hsl(${Color.hueBorderCasing}, 35%, 86%)`], - ], - }, - "line-opacity": { - base: 1, - stops: [ - [0, 0.4], - [4, 1], - ], - }, - "line-width": { - base: 1.2, - stops: [ - [2, 4], - [12, 25], - [16, 50], - ], - }, - }, - filter: [ - "all", - ["==", ["get", "admin_level"], 2], - ["==", ["get", "maritime"], 0], - ], - minzoom: 2, - layout: { - "line-cap": "round", - "line-join": "round", - visibility: "visible", - }, - source: "openmaptiles", - "source-layer": "boundary", -}; - export const country = { id: "boundary_country", type: "line", @@ -363,27 +291,32 @@ export const countryLabelRight = { export const legendEntries = [ { description: "Country or dependency", - layers: [country.id, countryCasing.id], + layers: [boundaryCasing.id], + filter: ["==", ["get", "admin_level"], 2], }, { description: "State or province", - layers: [state.id, stateCasing.id], + layers: [boundaryCasing.id], + filter: ["==", ["get", "admin_level"], 4], }, { - description: "County or county-equivalent", - layers: [county.id, countyCasing.id], + description: "Region", + layers: [boundaryCasing.id], + filter: ["==", ["get", "admin_level"], 5], }, { - description: "Region", - layers: [region.id, regionCasing.id], + description: "County or county-equivalent", + layers: [boundaryCasing.id], + filter: ["==", ["get", "admin_level"], 6], }, { description: "City, town, or village", - layers: [city.id], + layers: [boundaryCasing.id], + filter: ["in", ["get", "admin_level"], ["literal", [7, 8, 9]]], }, { description: "Disputed border", - layers: [countryCasing.id, stateCasing.id, countyCasing.id], + layers: [boundaryCasing.id], filter: ["==", ["get", "disputed"], 1], }, ]; diff --git a/src/layer/index.js b/src/layer/index.js index 740eb6061..2f37cf91d 100644 --- a/src/layer/index.js +++ b/src/layer/index.js @@ -36,10 +36,7 @@ export function build(locales) { lyrAeroway.fill, lyrPark.parkFill, - lyrBoundary.countyCasing, - lyrBoundary.regionCasing, - lyrBoundary.stateCasing, - lyrBoundary.countryCasing, + lyrBoundary.boundaryCasing, lyrWater.waterLine, lyrWater.waterLineIntermittent, From 5137283a0416264a0e033f22328d0dfb3333289d Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 5 Jun 2024 22:06:56 -0400 Subject: [PATCH 2/2] Prettier --- src/layer/boundary.js | 47 +++++++++++++++---------------------------- 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/src/layer/boundary.js b/src/layer/boundary.js index a8c3469ed..638f077a8 100644 --- a/src/layer/boundary.js +++ b/src/layer/boundary.js @@ -10,42 +10,27 @@ export const boundaryCasing = { "line-color": [ "match", ["get", "admin_level"], - 2, `hsl(${Color.hueBorderCasing}, 35%, 86%)`, - [3, 4], `hsl(${Color.hueBorderCasing}, 30%, 90%)`, - 5, Color.borderCasing, - 6, Color.borderCasing, - Color.borderCasing + 2, + `hsl(${Color.hueBorderCasing}, 35%, 86%)`, + [3, 4], + `hsl(${Color.hueBorderCasing}, 30%, 90%)`, + 5, + Color.borderCasing, + 6, + Color.borderCasing, + Color.borderCasing, ], "line-width": [ "interpolate", ["linear"], ["zoom"], - 2, [ - "match", - ["get", "admin_level"], - 2, 4, - [3, 4], 4, - 5, 5, - 6, 5, - 1 - ], - 12, [ - "match", - ["get", "admin_level"], - 2, 25, - [3, 4], 20, - 5, 6, - 6, 6, - 1 - ], - 16, [ - "match", - ["get", "admin_level"], - 2, 50, - [3, 4], 30, - 1 - ] - ] + 2, + ["match", ["get", "admin_level"], 2, 4, [3, 4], 4, 5, 5, 6, 5, 1], + 12, + ["match", ["get", "admin_level"], 2, 25, [3, 4], 20, 5, 6, 6, 6, 1], + 16, + ["match", ["get", "admin_level"], 2, 50, [3, 4], 30, 1], + ], }, filter: [ "all",