Rename debug variable and add comments

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.
 

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

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

src/configs/config.maptiler.js

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

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;