Merge pull request #549 from ZeLonewolf/clay-shield-halo-debug

Add debug variable to specify shield text halo color

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.
 

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,
 };

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,
 };

src/configs/config.maptiler.js

@@ -19,8 +19,15 @@ const ATTRIBUTION_LOGO = `
 const ATTRIBUTION_TEXT =
   '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a>';
 
+/*
+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,
 };

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);
   }