diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index edd94c3aa..c9b8db25e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -247,7 +247,9 @@ 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. -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. +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. Additionally, **`refsByWayName`** is an object mapping way names to text that can be superimposed on the background as a fallback for a missing `ref` value. (`refsByWayName` implies `notext`.) This temporary fallback is designed for use in [limited situations](https://wiki.openstreetmap.org/wiki/United_States/Unusual_highway_networks). In the future, it is expected that these initialisms will be encoded on the server side by processing appropriate tagging which holds the initialism in the database. diff --git a/src/configs/config.aws.js b/src/configs/config.aws.js index 64a3a1f31..300528763 100644 --- a/src/configs/config.aws.js +++ b/src/configs/config.aws.js @@ -6,6 +6,13 @@ Planetiler tile server, hosted at AWS const OPENMAPTILES_URL = "https://6ug7hetxl9.execute-api.us-east-2.amazonaws.com/data/v3.json"; +/* +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 = null; + export default { OPENMAPTILES_URL, + SHIELD_TEXT_HALO_COLOR_OVERRIDE, }; diff --git a/src/configs/config.localhost.js b/src/configs/config.localhost.js index 9d7eae87b..88085edb6 100644 --- a/src/configs/config.localhost.js +++ b/src/configs/config.localhost.js @@ -5,6 +5,13 @@ */ const OPENMAPTILES_URL = "http://localhost:8080/data/v3.json"; +/* +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 = null; + export default { OPENMAPTILES_URL, + SHIELD_TEXT_HALO_COLOR_OVERRIDE, }; diff --git a/src/configs/config.maptiler.js b/src/configs/config.maptiler.js index 74bc2e9fb..3b2c82d83 100644 --- a/src/configs/config.maptiler.js +++ b/src/configs/config.maptiler.js @@ -19,8 +19,15 @@ const ATTRIBUTION_LOGO = ` const ATTRIBUTION_TEXT = '© MapTiler'; +/* +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 = null; + export default { OPENMAPTILES_URL, ATTRIBUTION_LOGO, ATTRIBUTION_TEXT, + SHIELD_TEXT_HALO_COLOR_OVERRIDE, }; diff --git a/src/js/shield.js b/src/js/shield.js index bcd8a735b..3e8e42204 100644 --- a/src/js/shield.js +++ b/src/js/shield.js @@ -1,5 +1,7 @@ "use strict"; +import config from "../config.js"; + import * as ShieldDef from "./shield_defs.js"; import * as ShieldText from "./shield_text.js"; import * as ShieldDraw from "./shield_canvas_draw.js"; @@ -212,7 +214,10 @@ function drawShieldText(ctx, shieldDef, routeDef) { textLayout.yBaseline += bannerCount * ShieldDef.bannerSizeH + ShieldDef.topPadding; - if (shieldDef.textHaloColor) { + 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; ShieldText.drawShieldHaloText(ctx, routeDef.ref, textLayout); }