Shields of Kentucky (#119)

* Delimit image name parts by newlines * Added Kentucky state highway shield * Added AA Highway shield * Added Kentucky parkway shield The Kentucky parkway system has a standard shield that bears the entire official road name, but shields on a map should show the unsigned route ref, which is based on the official road name. Pull the way name into the image name and map it to a hard-coded ref. * Optimized Kentucky parkway SVG * Only add name to image name for Kentucky parkways * Map unabbreviated names to Kentucky parkway initialisms * Only use refsByWayName as fallback Ignore refsByWayName when there is a ref. * Documented shield definition properties * Apply suggestions from code review Co-authored-by: Brian Sperlongano <[email protected]> * Code formatting * Fixed typo in street name * Added FIXME about abbreviated names Co-authored-by: Brian Sperlongano <[email protected]>
osm-americana · Feb 17, 2022 · 9f9c767 · 9f9c767
1 parent 357c94b
commit 9f9c767
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 5 deletions.
diff --git a/style/CONTRIBUTE.md b/style/CONTRIBUTE.md
@@ -221,3 +221,23 @@ Shields should target 8-12px text actual-size character heights for readability:
 | <img src="../doc-img/10_px_text.svg" height=20 width=20 /> | 10px        |
 | <img src="../doc-img/8_px_text.svg" height=20 width=20 />  | 8px         |
 | <img src="../doc-img/6_px_text.svg" height=20 width=20 />  | 6px         |
+
+### Shield Definitions
+
+The `loadShields` function in style/js/shield_defs.js contains a definition object for each shield displayed on the map. A definition object can contain the following properties:
+
+- **`backgroundImage`** – A reference to the image file used as the shield background, based on the name of the file in style/icons/. To use a different image depending on the length of the inscribed text, specify an array of images.
+- **`colorLighten`** – Replace the black portions of the specified background image with this color via a "lighten" operation.
+- **`norefImage`** – A reference to an alternative image file used when there is no `ref`. This is appropriate if some routes in the network have a `ref` tag and others do not, and the routes with no ref need a special shield.
+- **`notext`** – By default, a relation missing a `ref` tag will not appear as a shield. Set this property to `true` to display a shield even if it has no `ref`. This is appropriate for one-off shield networks, which are common for toll roads and touristic routes.
+- **`padding`** – An object that specifies the amount of padding on each side of the inscribed text relative to the background image.
+- **`textColor`** – The color of the inscribed text to superimpose on the background.
+- **`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.
+
+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) that meet each of the following criteria:
+
+- Each route in a network has a distinct shield that is dominated by the road name as opposed to a glyph or logo.
+- Each shield in the network has a common thematic design, and differs by only the road name, not a number, initialism, or color.
+- Each route would be recognizable by an initialism, even though it is not signposted.
+
+`refsByWayName` only works if there is no `ref` tag and the expression in the `routeConcurrency` function in style/layer/highway_shield.js includes the `name` property in the image name. The network needs to be listed as an input value that causes the `match` expression to append `name` to the image name.
diff --git a/style/icons/shield40_us_ky_parkway.svg b/style/icons/shield40_us_ky_parkway.svg
diff --git a/style/js/shield.js b/style/js/shield.js
@@ -104,11 +104,12 @@ function textColor(shieldDef) {
   return "black";
 }
 
-function drawShield(network, ref) {
+function drawShield(network, ref, wayName) {
   var shieldDef = ShieldDef.shields[network];
   var ctx = null;
   var bannerCount = 0;
   var padding = null;
+  var shieldBounds = null;
 
   if (shieldDef == null) {
     if (ref == "") {
@@ -135,9 +136,12 @@ function drawShield(network, ref) {
     bannerCount = ShieldDef.getBannerCount(shieldDef);
     padding = shieldDef.padding;
 
+    if (ref === "" && shieldDef.refsByWayName) {
+      ref = shieldDef.refsByWayName[wayName];
+    }
+
     var shieldArtwork = getRasterShieldBlank(network, ref);
     var compoundBounds = null;
-    var shieldBounds = null;
 
     if (shieldArtwork == null) {
       if (typeof shieldDef.backgroundDraw != "undefined") {
@@ -213,14 +217,15 @@ export function missingIconLoader(map, e) {
     return;
   }
 
-  var network_ref = id.split("_")[1];
+  var network_ref = id.split("\n")[1];
   var network_ref_parts = network_ref.split("=");
   var network = network_ref_parts[0];
   var ref = network_ref_parts[1];
+  var wayName = id.split("\n")[2];
 
   var colorLighten = ShieldDef.shieldLighten(network, ref);
 
-  var ctx = drawShield(network, ref);
+  var ctx = drawShield(network, ref, wayName);
 
   if (ctx == null) {
     //Does not meet the criteria to draw a shield

diff --git a/style/js/shield_defs.js b/style/js/shield_defs.js
@@ -246,6 +246,41 @@ export function loadShields(shieldImages) {
   };
 
   shields["US:KY"] = roundedRectShield("white", "black", "black", 8, 1, null);
+  shields["US:KY:AA"] = {
+    backgroundImage: shieldImages.shield40_us_ky_parkway,
+    textColor: "#003f87",
+    padding: {
+      left: 2,
+      right: 2,
+      top: 2,
+      bottom: 6,
+    },
+  };
+  shields["US:KY:Parkway"] = Object.assign(
+    {
+      // FIXME: This object contains both spelled-out and abbreviated road
+      // names to accommodate both the abbreviated names from OpenMapTiles and
+      // the spelled-out names from Planetiler.
+      // https://github.com/onthegomap/planetiler/issues/14
+      refsByWayName: {
+        "Audubon Parkway": "AU",
+        "Bluegrass Parkway": "BG",
+        "Bluegrass Pkwy": "BG",
+        "Cumberland Parkway": "LN",
+        "Cumberland Pkwy": "LN",
+        "Hal Rogers Parkway": "HR",
+        "Hal Rogers Pkwy": "HR",
+        "Mountain Parkway": "MP",
+        "Mountain Pkwy": "MP",
+        "Purchase Parkway": "JC",
+        "Purchase Pkwy": "JC",
+        "Western Kentucky Parkway": "WK",
+        "Western Kentucky Pkwy": "WK",
+      },
+    },
+    shields["US:KY:AA"]
+  );
+
   shields["US:MI"] = diamondShield;
 
   shields["US:MN"] = {

diff --git a/style/layer/highway_shield.js b/style/layer/highway_shield.js
@@ -6,7 +6,21 @@ function routeConcurrency(num) {
   return [
     "case",
     ["!=", ["get", "route_" + num], null],
-    ["image", ["concat", "shield_", ["get", "route_" + num]]],
+    [
+      "image",
+      [
+        "concat",
+        "shield\n",
+        ["get", "route_" + num],
+        [
+          "match",
+          ["get", "route_" + num],
+          "US:KY:Parkway=",
+          ["concat", "\n", ["get", "name"]],
+          "",
+        ],
+      ],
+    ],
     ["literal", ""],
   ];
 }