From 144da90629de9435c3139430d736807a525bb6a1 Mon Sep 17 00:00:00 2001 From: Clay Smalley Date: Thu, 8 Sep 2022 22:03:00 -0400 Subject: [PATCH] Rename debug variable and add comments --- CONTRIBUTING.md | 2 +- src/configs/config.aws.js | 9 +++++++-- src/configs/config.localhost.js | 9 +++++++-- src/configs/config.maptiler.js | 9 +++++++-- src/js/shield.js | 4 ++-- 5 files changed, 24 insertions(+), 9 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 03eeccd2d..c9b8db25e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -247,7 +247,7 @@ The `loadShields` function in js/shield_defs.js contains a definition object for - **`textLayoutConstraint`** – A strategy for constraining the text within the background image, useful for shields of certain shapes. By default, the text will expand to fill a rectangle bounded by the specified padding while maintaining the same aspect ratio. - **`verticalReflect`** – Set this property to `true` to draw the shield image upside-down. -In addition to `textHaloColor`, the config variable **`SHIELD_TEXT_HALO_COLOR`** can be used to override the text halo color on all shields. This can be helpful to avoid collisions with other design features when determining padding values. For example, set `SHIELD_TEXT_HALO_COLOR` in src/config.js to `"magenta"` to display a magenta halo around all shield text. +In addition to `textHaloColor`, the config variable **`SHIELD_TEXT_HALO_COLOR_OVERRIDE`** can be used to override the text halo color on all shields. This can be helpful to avoid collisions with other design features when determining padding values. For example, set `SHIELD_TEXT_HALO_COLOR_OVERRIDE` in src/config.js to `"magenta"` to display a magenta halo around all shield text. If special code is necessary to style a specific `ref` in a particular network, **`overrideByRef`** can be used to define and override any of the above properties. `overrideByRef` is an object mapping `ref` values to partial shield definition objects, containing whichever properties are to be overridden for that particular `ref` value. If necessary, this can be used to override the entire shield definition. diff --git a/src/configs/config.aws.js b/src/configs/config.aws.js index c0208db8b..09fc0256b 100644 --- a/src/configs/config.aws.js +++ b/src/configs/config.aws.js @@ -5,9 +5,14 @@ Planetiler tile server, hosted at AWS */ const OPENMAPTILES_URL = "https://6ug7hetxl9.execute-api.us-east-2.amazonaws.com/data/v3.json"; -const SHIELD_TEXT_HALO_COLOR = null; + +/* +Uncomment this variable to override the shield text halo color. Useful while testing shield design changes. +Accepts an HTML color name, hex code, or other CSS color value. +*/ +//const SHIELD_TEXT_HALO_COLOR_OVERRIDE = "magenta"; export default { OPENMAPTILES_URL, - SHIELD_TEXT_HALO_COLOR, + //SHIELD_TEXT_HALO_COLOR_OVERRIDE, }; diff --git a/src/configs/config.localhost.js b/src/configs/config.localhost.js index 3cb20b658..c4d5a2d18 100644 --- a/src/configs/config.localhost.js +++ b/src/configs/config.localhost.js @@ -4,9 +4,14 @@ Locally-run openmaptiles build */ const OPENMAPTILES_URL = "http://localhost:8080/data/v3.json"; -const SHIELD_TEXT_HALO_COLOR = null; + +/* +Uncomment this variable to override the shield text halo color. Useful while testing shield design changes. +Accepts an HTML color name, hex code, or other CSS color value. +*/ +//const SHIELD_TEXT_HALO_COLOR_OVERRIDE = "magenta"; export default { OPENMAPTILES_URL, - SHIELD_TEXT_HALO_COLOR, + //SHIELD_TEXT_HALO_COLOR_OVERRIDE, }; diff --git a/src/configs/config.maptiler.js b/src/configs/config.maptiler.js index cb7709105..757f1d577 100644 --- a/src/configs/config.maptiler.js +++ b/src/configs/config.maptiler.js @@ -18,11 +18,16 @@ const ATTRIBUTION_LOGO = ` `; const ATTRIBUTION_TEXT = '© MapTiler'; -const SHIELD_TEXT_HALO_COLOR = null; + +/* +Uncomment this variable to override the shield text halo color. Useful while testing shield design changes. +Accepts an HTML color name, hex code, or other CSS color value. +*/ +//const SHIELD_TEXT_HALO_COLOR_OVERRIDE = "magenta"; export default { OPENMAPTILES_URL, ATTRIBUTION_LOGO, ATTRIBUTION_TEXT, - SHIELD_TEXT_HALO_COLOR, + //SHIELD_TEXT_HALO_COLOR_OVERRIDE, }; diff --git a/src/js/shield.js b/src/js/shield.js index 78b08dc71..3e8e42204 100644 --- a/src/js/shield.js +++ b/src/js/shield.js @@ -214,8 +214,8 @@ function drawShieldText(ctx, shieldDef, routeDef) { textLayout.yBaseline += bannerCount * ShieldDef.bannerSizeH + ShieldDef.topPadding; - if (config.SHIELD_TEXT_HALO_COLOR) { - ctx.strokeStyle = config.SHIELD_TEXT_HALO_COLOR; + if (config.SHIELD_TEXT_HALO_COLOR_OVERRIDE) { + ctx.strokeStyle = config.SHIELD_TEXT_HALO_COLOR_OVERRIDE; ShieldText.drawShieldHaloText(ctx, routeDef.ref, textLayout); } else if (shieldDef.textHaloColor) { ctx.strokeStyle = shieldDef.textHaloColor;