From a5c492a92c7064682991636fd8dd7a26f8528fc8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Sat, 29 Jan 2022 17:07:35 -0800 Subject: [PATCH 01/13] Delimit image name parts by newlines --- style/js/shield.js | 2 +- style/layer/highway_shield.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/style/js/shield.js b/style/js/shield.js index 3f11be0ce..a2b3871d6 100644 --- a/style/js/shield.js +++ b/style/js/shield.js @@ -227,7 +227,7 @@ 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]; diff --git a/style/layer/highway_shield.js b/style/layer/highway_shield.js index f097c0820..5eff78b9f 100644 --- a/style/layer/highway_shield.js +++ b/style/layer/highway_shield.js @@ -6,7 +6,7 @@ function routeConcurrency(num) { return [ "case", ["!=", ["get", "route_" + num], null], - ["image", ["concat", "shield_", ["get", "route_" + num]]], + ["image", ["concat", "shield\n", ["get", "route_" + num]]], ["literal", ""], ]; } From 7fe0d0e33d2adf92546b4340a01f9b43fe762047 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Sat, 29 Jan 2022 17:10:04 -0800 Subject: [PATCH 02/13] Added Kentucky state highway shield --- style/js/shield_defs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/style/js/shield_defs.js b/style/js/shield_defs.js index 77dec023a..f053b8a4c 100644 --- a/style/js/shield_defs.js +++ b/style/js/shield_defs.js @@ -183,6 +183,8 @@ export function loadShields(shieldImages) { }, }; + shields["US:KY"] = circleShield("white", "black"); + shields["US:MI"] = diamondShield; shields["US:MN"] = { From c0c18c77b91cef70082fe192a8a3f188bfb3843b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Sat, 29 Jan 2022 17:11:04 -0800 Subject: [PATCH 03/13] Added AA Highway shield --- style/icons/shield40_us_ky_parkway.svg | 65 ++++++++++++++++++++++++++ style/js/shield_defs.js | 10 ++++ 2 files changed, 75 insertions(+) create mode 100644 style/icons/shield40_us_ky_parkway.svg diff --git a/style/icons/shield40_us_ky_parkway.svg b/style/icons/shield40_us_ky_parkway.svg new file mode 100644 index 000000000..9100989fc --- /dev/null +++ b/style/icons/shield40_us_ky_parkway.svg @@ -0,0 +1,65 @@ + + + + + + + + diff --git a/style/js/shield_defs.js b/style/js/shield_defs.js index f053b8a4c..4c4fba1f9 100644 --- a/style/js/shield_defs.js +++ b/style/js/shield_defs.js @@ -184,6 +184,16 @@ export function loadShields(shieldImages) { }; shields["US:KY"] = circleShield("white", "black"); + shields["US:KY:AA"] = { + backgroundImage: shieldImages.shield40_us_ky_parkway, + textColor: "#003f87", + padding: { + left: 2, + right: 2, + top: 2, + bottom: 6, + }, + }; shields["US:MI"] = diamondShield; From 5161ae8892aeebc77338537bc316ff45cae8b5c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Sat, 29 Jan 2022 17:16:50 -0800 Subject: [PATCH 04/13] 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. --- style/js/shield.js | 9 +++++++-- style/js/shield_defs.js | 14 ++++++++++++++ style/layer/highway_shield.js | 5 ++++- 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/style/js/shield.js b/style/js/shield.js index a2b3871d6..9e7428fce 100644 --- a/style/js/shield.js +++ b/style/js/shield.js @@ -109,7 +109,7 @@ 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; @@ -137,6 +137,10 @@ function drawShield(network, ref) { bannerCount = ShieldDef.getBannerCount(shieldDef); padding = shieldDef.padding; + if (shieldDef.refsByWayName) { + ref = shieldDef.refsByWayName[wayName]; + } + var shieldArtwork = getRasterShieldBlank(network, ref); var compoundBounds = null; var shieldBounds = null; @@ -231,10 +235,11 @@ export function missingIconLoader(map, e) { 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 index 4c4fba1f9..47933e083 100644 --- a/style/js/shield_defs.js +++ b/style/js/shield_defs.js @@ -194,6 +194,20 @@ export function loadShields(shieldImages) { bottom: 6, }, }; + shields["US:KY:Parkway"] = Object.assign( + { + refsByWayName: { + "Audobon Parkway": "AU", + "Bluegrass Pkwy": "BG", + "Cumberland Pkwy": "LN", + "Hal Rogers Pkwy": "HR", + "Mountain Pkwy": "MP", + "Purchase Pkwy": "JC", + "Western Kentucky Pkwy": "WK", + }, + }, + shields["US:KY:AA"] + ); shields["US:MI"] = diamondShield; diff --git a/style/layer/highway_shield.js b/style/layer/highway_shield.js index 5eff78b9f..cdb0b4419 100644 --- a/style/layer/highway_shield.js +++ b/style/layer/highway_shield.js @@ -6,7 +6,10 @@ function routeConcurrency(num) { return [ "case", ["!=", ["get", "route_" + num], null], - ["image", ["concat", "shield\n", ["get", "route_" + num]]], + [ + "image", + ["concat", "shield\n", ["get", "route_" + num], "\n", ["get", "name"]], + ], ["literal", ""], ]; } From 25787bdb7d099a7cb6d502f5957088b92a7d29fd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Sat, 29 Jan 2022 18:14:08 -0800 Subject: [PATCH 05/13] Optimized Kentucky parkway SVG --- style/icons/shield40_us_ky_parkway.svg | 69 ++------------------------ 1 file changed, 5 insertions(+), 64 deletions(-) diff --git a/style/icons/shield40_us_ky_parkway.svg b/style/icons/shield40_us_ky_parkway.svg index 9100989fc..5104d9339 100644 --- a/style/icons/shield40_us_ky_parkway.svg +++ b/style/icons/shield40_us_ky_parkway.svg @@ -1,65 +1,6 @@ - - - - - - - + + + + + From 25ea00ed7742dd794ad2aec83126ca12c742071a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Sat, 29 Jan 2022 18:15:51 -0800 Subject: [PATCH 06/13] Only add name to image name for Kentucky parkways --- style/layer/highway_shield.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/style/layer/highway_shield.js b/style/layer/highway_shield.js index cdb0b4419..e98fecb4d 100644 --- a/style/layer/highway_shield.js +++ b/style/layer/highway_shield.js @@ -8,7 +8,18 @@ function routeConcurrency(num) { ["!=", ["get", "route_" + num], null], [ "image", - ["concat", "shield\n", ["get", "route_" + num], "\n", ["get", "name"]], + [ + "concat", + "shield\n", + ["get", "route_" + num], + [ + "match", + ["get", "route_" + num], + "US:KY:Parkway=", + ["concat", "\n", ["get", "name"]], + "", + ], + ], ], ["literal", ""], ]; From 4a9f1067a7e0ac8dddd8042b0925bb19f1f879c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 05:00:41 -0800 Subject: [PATCH 07/13] Map unabbreviated names to Kentucky parkway initialisms --- style/js/shield_defs.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/style/js/shield_defs.js b/style/js/shield_defs.js index 2ecdfcf02..533f155ae 100644 --- a/style/js/shield_defs.js +++ b/style/js/shield_defs.js @@ -258,11 +258,17 @@ export function loadShields(shieldImages) { { refsByWayName: { "Audobon 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", }, }, From f15438e653eb430ddc6a894b73ed346461312183 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 05:01:26 -0800 Subject: [PATCH 08/13] Only use refsByWayName as fallback Ignore refsByWayName when there is a ref. --- style/js/shield.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/style/js/shield.js b/style/js/shield.js index b532488bd..b4f07a2e7 100644 --- a/style/js/shield.js +++ b/style/js/shield.js @@ -109,6 +109,7 @@ function drawShield(network, ref, wayName) { var ctx = null; var bannerCount = 0; var padding = null; + var shieldBounds = null; if (shieldDef == null) { if (ref == "") { @@ -135,13 +136,12 @@ function drawShield(network, ref, wayName) { bannerCount = ShieldDef.getBannerCount(shieldDef); padding = shieldDef.padding; - if (shieldDef.refsByWayName) { + 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") { From 2c4d7e03d07fa7522f622da2eb22ff235fffb6d1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 05:01:50 -0800 Subject: [PATCH 09/13] Documented shield definition properties --- style/CONTRIBUTE.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/style/CONTRIBUTE.md b/style/CONTRIBUTE.md index d088db3ed..73f3e2c78 100644 --- a/style/CONTRIBUTE.md +++ b/style/CONTRIBUTE.md @@ -221,3 +221,23 @@ Shields should target 8-12px text actual-size character heights for readability: | | 10px | | | 8px | | | 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`** – The color to recolor the background image by. +- **`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. +- **`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. + +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 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. From 45a9192a6751b4ead2b454ae24aa0cab0bc6682b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 17:40:11 -0800 Subject: [PATCH 10/13] Apply suggestions from code review Co-authored-by: Brian Sperlongano --- style/CONTRIBUTE.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/style/CONTRIBUTE.md b/style/CONTRIBUTE.md index 73f3e2c78..187a25ba4 100644 --- a/style/CONTRIBUTE.md +++ b/style/CONTRIBUTE.md @@ -227,17 +227,17 @@ Shields should target 8-12px text actual-size character heights for readability: 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`** – The color to recolor the background image by. -- **`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. +- **`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. +- **`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 differs by only the road name, not a number, initialism, or color. +- 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. From 212942b6c1393c5fde24c29eb7b2342278427450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 17:42:09 -0800 Subject: [PATCH 11/13] Code formatting --- style/CONTRIBUTE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/CONTRIBUTE.md b/style/CONTRIBUTE.md index 187a25ba4..cded16985 100644 --- a/style/CONTRIBUTE.md +++ b/style/CONTRIBUTE.md @@ -232,7 +232,7 @@ The `loadShields` function in style/js/shield_defs.js contains a definition obje - **`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. +- **`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: From c3ee2fc0aa5e2fb417eba457ebb1f5939d3cf310 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 17:42:57 -0800 Subject: [PATCH 12/13] Fixed typo in street name --- style/js/shield_defs.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/style/js/shield_defs.js b/style/js/shield_defs.js index 533f155ae..6645111e3 100644 --- a/style/js/shield_defs.js +++ b/style/js/shield_defs.js @@ -257,7 +257,7 @@ export function loadShields(shieldImages) { shields["US:KY:Parkway"] = Object.assign( { refsByWayName: { - "Audobon Parkway": "AU", + "Audubon Parkway": "AU", "Bluegrass Parkway": "BG", "Bluegrass Pkwy": "BG", "Cumberland Parkway": "LN", From 700da78b7e3ad7a4a0148d527ff8ec82fc7dda6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Minh=20Nguy=E1=BB=85n?= Date: Wed, 16 Feb 2022 17:44:54 -0800 Subject: [PATCH 13/13] Added FIXME about abbreviated names --- style/js/shield_defs.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/style/js/shield_defs.js b/style/js/shield_defs.js index 6645111e3..9f088dfd5 100644 --- a/style/js/shield_defs.js +++ b/style/js/shield_defs.js @@ -256,6 +256,10 @@ export function loadShields(shieldImages) { }; 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",