From 6b7bb439de6df3619f8d91e5c216ae40fc17d9eb Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Mon, 18 Dec 2023 18:42:32 -0500 Subject: [PATCH 01/24] typing --- shieldlib/src/shield_text.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/shieldlib/src/shield_text.ts b/shieldlib/src/shield_text.ts index 350f7f02c..36ae645fb 100644 --- a/shieldlib/src/shield_text.ts +++ b/shieldlib/src/shield_text.ts @@ -170,15 +170,15 @@ export function layoutShieldText( ctx.textAlign = "center"; ctx.textBaseline = "top"; - var metrics = ctx.measureText(text); + var metrics: TextMetrics = ctx.measureText(text); - var textWidth = metrics.width; - var textHeight = metrics.actualBoundingBoxDescent; + var textWidth: number = metrics.width; + var textHeight: number = metrics.actualBoundingBoxDescent; - var availHeight = bounds.height - padTop - padBot; - var availWidth = bounds.width - padLeft - padRight; + var availHeight: number = bounds.height - padTop - padBot; + var availWidth: number = bounds.width - padLeft - padRight; - var xBaseline = padLeft + availWidth / 2; + var xBaseline: number = padLeft + availWidth / 2; let textLayoutFunc = drawTextFunctions[textLayoutDef.constraintFunc]; From 7a7b88cd0c3f3065d496d6a56a70b956b4fb2486 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Mon, 18 Dec 2023 23:07:10 -0500 Subject: [PATCH 02/24] Cross-browser compatibility --- shieldlib/src/shield.js | 12 ++++--- shieldlib/src/shield_banner.ts | 6 ++-- shieldlib/src/shield_text.ts | 65 +++++++++++++++++++++++----------- 3 files changed, 55 insertions(+), 28 deletions(-) diff --git a/shieldlib/src/shield.js b/shieldlib/src/shield.js index f8d3c342d..a5cbe1ce6 100644 --- a/shieldlib/src/shield.js +++ b/shieldlib/src/shield.js @@ -100,7 +100,8 @@ function drawShieldText(r, ctx, shieldDef, routeDef) { var shieldBounds = null; var shieldArtwork = getRasterShieldBlank(r, shieldDef, routeDef); - let yOffset = bannerCount * r.px(r.options.bannerHeight); + let yOffset = + bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding); if (shieldArtwork == null) { ctx.translate(0, yOffset); @@ -132,7 +133,8 @@ function drawShieldText(r, ctx, shieldDef, routeDef) { shieldBounds ); - textLayout.yBaseline += bannerCount * r.px(r.options.bannerHeight); + textLayout.yBaseline += + bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding); if (typeof r.options.SHIELD_TEXT_HALO_COLOR_OVERRIDE !== "undefined") { ctx.strokeStyle = options.SHIELD_TEXT_HALO_COLOR_OVERRIDE; @@ -150,7 +152,7 @@ function drawShieldText(r, ctx, shieldDef, routeDef) { ctx.lineWidth = r.px(1); ctx.strokeRect( r.px(shieldDef.padding.left - 0.5), - bannerCount * r.px(r.options.bannerHeight) + + bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding) + r.px(shieldDef.padding.top - 0.5), shieldBounds.width - r.px(shieldDef.padding.left + shieldDef.padding.right - 1), @@ -322,7 +324,9 @@ export function generateShieldCtx(r, routeDef) { height = sourceSprite.data.height; } - let bannerHeight = bannerCount * r.px(r.options.bannerHeight); + let bannerHeight = + bannerCount * + (r.px(r.options.bannerHeight) + r.px(r.options.bannerPadding)); height += bannerHeight; //Generate empty canvas sized to the graphic diff --git a/shieldlib/src/shield_banner.ts b/shieldlib/src/shield_banner.ts index 6961865b5..deb86599d 100644 --- a/shieldlib/src/shield_banner.ts +++ b/shieldlib/src/shield_banner.ts @@ -133,7 +133,7 @@ function drawBannerTextComponent( textComponent: boolean ): void { const bannerPadding = { - top: r.options.bannerPadding, + top: 0, bottom: 0, left: 0, right: 0, @@ -161,7 +161,7 @@ function drawBannerTextComponent( text, textLayout.xBaseline, textLayout.yBaseline + - bannerIndex * r.px(r.options.bannerHeight - r.options.bannerPadding) + bannerIndex * r.px(r.options.bannerHeight + r.options.bannerPadding) ); } else { ctx.shadowBlur = 0; @@ -170,7 +170,7 @@ function drawBannerTextComponent( text, textLayout.xBaseline, textLayout.yBaseline + - bannerIndex * r.px(r.options.bannerHeight - r.options.bannerPadding) + bannerIndex * r.px(r.options.bannerHeight + r.options.bannerPadding) ); ctx.shadowColor = null; diff --git a/shieldlib/src/shield_text.ts b/shieldlib/src/shield_text.ts index 36ae645fb..57205a12e 100644 --- a/shieldlib/src/shield_text.ts +++ b/shieldlib/src/shield_text.ts @@ -84,7 +84,6 @@ function rectTextConstraint( ): TextTransform { var scaleHeight = spaceBounds.height / textBounds.height; var scaleWidth = spaceBounds.width / textBounds.width; - return { scale: Math.min(scaleWidth, scaleHeight), valign: VerticalAlignment.Middle, @@ -137,6 +136,12 @@ function triangleDownTextConstraint( }; } +// Warning!!! Hack!!! +function isRunningInWebKit(): boolean { + const userAgent = window.navigator.userAgent; + return /WebKit/i.test(userAgent) && !/Chrome/i.test(userAgent); +} + /** * Determines the position and font size to draw text so that it fits within * a bounding box. @@ -157,34 +162,49 @@ export function layoutShieldText( textLayoutDef: TextLayout, maxFontSize: number = 14 ): TextPlacement { - var padTop = r.px(padding.top) || 0; - var padBot = r.px(padding.bottom) || 0; - var padLeft = r.px(padding.left) || 0; - var padRight = r.px(padding.right) || 0; + let padTop = r.px(padding.top) || 0; + let padBot = r.px(padding.bottom) || 0; + let padLeft = r.px(padding.left) || 0; + let padRight = r.px(padding.right) || 0; - var maxFont = r.px(maxFontSize); + let maxFont = r.px(maxFontSize); //Temporary canvas for text measurment - var ctx = r.gfxFactory.createGraphics(bounds); + let ctx: CanvasRenderingContext2D = r.gfxFactory.createGraphics(bounds); ctx.font = Gfx.shieldFont(Gfx.fontSizeThreshold, r.options.shieldFont); - ctx.textAlign = "center"; + ctx.textAlign = "left"; ctx.textBaseline = "top"; - var metrics: TextMetrics = ctx.measureText(text); + let metrics: TextMetrics = ctx.measureText(text); - var textWidth: number = metrics.width; - var textHeight: number = metrics.actualBoundingBoxDescent; + let textWidth: number = + Math.abs(metrics.actualBoundingBoxLeft) + + Math.abs(metrics.actualBoundingBoxRight); + let textHeight: number = + Math.abs(metrics.actualBoundingBoxDescent) + + Math.abs(metrics.actualBoundingBoxAscent); - var availHeight: number = bounds.height - padTop - padBot; - var availWidth: number = bounds.width - padLeft - padRight; + //Adjust for excess descender text height across browsers + textHeight *= 0.9; - var xBaseline: number = padLeft + availWidth / 2; + //Adjust for excess text height measured in Webkit engine specifically + if (isRunningInWebKit()) { + textHeight *= 0.54; + } + + let availHeight: number = bounds.height - padTop - padBot; + let availWidth: number = bounds.width - padLeft - padRight; + + let xBaseline: number = padLeft + availWidth / 2; let textLayoutFunc = drawTextFunctions[textLayoutDef.constraintFunc]; - let textConstraint = textLayoutFunc( - { height: availHeight, width: availWidth }, - { height: textHeight, width: textWidth }, + let spaceAvail: Dimension = { height: availHeight, width: availWidth }; + let measuredTextBounds: Dimension = { height: textHeight, width: textWidth }; + + let textConstraint: TextTransform = textLayoutFunc( + spaceAvail, + measuredTextBounds, textLayoutDef.options ); @@ -195,20 +215,23 @@ export function layoutShieldText( ); ctx.font = Gfx.shieldFont(fontSize, r.options.shieldFont); - ctx.textAlign = "center"; + ctx.textAlign = "left"; ctx.textBaseline = "top"; metrics = ctx.measureText(text); - textHeight = metrics.actualBoundingBoxDescent; + textHeight = + Math.abs(metrics.actualBoundingBoxDescent) + + Math.abs(metrics.actualBoundingBoxAscent); let yBaseline: number; switch (textConstraint.valign) { case VerticalAlignment.Top: - yBaseline = padTop; + yBaseline = padTop + metrics.actualBoundingBoxAscent; break; case VerticalAlignment.Bottom: - yBaseline = padTop + availHeight - textHeight; + yBaseline = + padTop + availHeight - textHeight + metrics.actualBoundingBoxAscent; break; case VerticalAlignment.Middle: default: From 6d461defdf6ab1e42e2e4c4cdb34b6530e7ef340 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Mon, 18 Dec 2023 23:32:17 -0500 Subject: [PATCH 03/24] Add check for undefined window (for test cases) --- shieldlib/src/shield_text.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/shieldlib/src/shield_text.ts b/shieldlib/src/shield_text.ts index 57205a12e..ef7aee582 100644 --- a/shieldlib/src/shield_text.ts +++ b/shieldlib/src/shield_text.ts @@ -138,6 +138,9 @@ function triangleDownTextConstraint( // Warning!!! Hack!!! function isRunningInWebKit(): boolean { + if (typeof window === "undefined") { + return false; + } const userAgent = window.navigator.userAgent; return /WebKit/i.test(userAgent) && !/Chrome/i.test(userAgent); } From de7869017aa3c8e24f9f9f99171ff41ab0303948 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Mon, 18 Dec 2023 23:37:49 -0500 Subject: [PATCH 04/24] Revert minor spacing --- shieldlib/src/shield_text.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/shieldlib/src/shield_text.ts b/shieldlib/src/shield_text.ts index ef7aee582..1e5815421 100644 --- a/shieldlib/src/shield_text.ts +++ b/shieldlib/src/shield_text.ts @@ -84,6 +84,7 @@ function rectTextConstraint( ): TextTransform { var scaleHeight = spaceBounds.height / textBounds.height; var scaleWidth = spaceBounds.width / textBounds.width; + return { scale: Math.min(scaleWidth, scaleHeight), valign: VerticalAlignment.Middle, From c19fb5f3bef7f3232d9f233ad63fe6872916e7e1 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 19 Dec 2023 20:08:47 -0500 Subject: [PATCH 05/24] Slightly reduce 2->3 shield threshold to 11.9px --- shieldlib/src/screen_gfx.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts index eec3087e8..9db1b2d8b 100644 --- a/shieldlib/src/screen_gfx.ts +++ b/shieldlib/src/screen_gfx.ts @@ -5,7 +5,9 @@ import rgba from "color-rgba"; const defaultFontFamily = '"sans-serif-condensed", "Arial Narrow", sans-serif'; export const shieldFont = (size: number, fontFamily: string) => `condensed 500 ${size}px ${fontFamily || defaultFontFamily}`; -export const fontSizeThreshold = 12; + +//If a computed shield font size is below this value, choose a wider shield if possible +export const fontSizeThreshold = 11.9; // Replaces `sourceVal` with a blend of `lightenVal` and `darkenVal` proportional to the brightness; // i.e. white becomes `darkenVal`, black becomes `lightenVal`, and anit-aliased pixels remain anit-aliased From e2e235f5ca9cc2f202904753bd898a4c4875b1d5 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 19 Dec 2023 20:27:41 -0500 Subject: [PATCH 06/24] Slightly reduce 2->3 shield threshold to 11.8px --- shieldlib/src/screen_gfx.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts index 9db1b2d8b..3be40e4be 100644 --- a/shieldlib/src/screen_gfx.ts +++ b/shieldlib/src/screen_gfx.ts @@ -7,7 +7,7 @@ export const shieldFont = (size: number, fontFamily: string) => `condensed 500 ${size}px ${fontFamily || defaultFontFamily}`; //If a computed shield font size is below this value, choose a wider shield if possible -export const fontSizeThreshold = 11.9; +export const fontSizeThreshold = 11.8; // Replaces `sourceVal` with a blend of `lightenVal` and `darkenVal` proportional to the brightness; // i.e. white becomes `darkenVal`, black becomes `lightenVal`, and anit-aliased pixels remain anit-aliased From 29cc67abb606091fc3bcbf06414547148cc22275 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 19 Dec 2023 20:44:38 -0500 Subject: [PATCH 07/24] Slightly reduce 2->3 shield threshold to 11.5px --- shieldlib/src/screen_gfx.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts index 3be40e4be..4df4a72c0 100644 --- a/shieldlib/src/screen_gfx.ts +++ b/shieldlib/src/screen_gfx.ts @@ -7,7 +7,7 @@ export const shieldFont = (size: number, fontFamily: string) => `condensed 500 ${size}px ${fontFamily || defaultFontFamily}`; //If a computed shield font size is below this value, choose a wider shield if possible -export const fontSizeThreshold = 11.8; +export const fontSizeThreshold = 11.5; // Replaces `sourceVal` with a blend of `lightenVal` and `darkenVal` proportional to the brightness; // i.e. white becomes `darkenVal`, black becomes `lightenVal`, and anit-aliased pixels remain anit-aliased From 002c7ca2089af130d46a20d746552f72db22a43a Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 19 Dec 2023 20:50:38 -0500 Subject: [PATCH 08/24] Slightly reduce 2->3 shield threshold to 11px --- shieldlib/src/screen_gfx.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts index 4df4a72c0..ac9915a34 100644 --- a/shieldlib/src/screen_gfx.ts +++ b/shieldlib/src/screen_gfx.ts @@ -7,7 +7,7 @@ export const shieldFont = (size: number, fontFamily: string) => `condensed 500 ${size}px ${fontFamily || defaultFontFamily}`; //If a computed shield font size is below this value, choose a wider shield if possible -export const fontSizeThreshold = 11.5; +export const fontSizeThreshold = 11; // Replaces `sourceVal` with a blend of `lightenVal` and `darkenVal` proportional to the brightness; // i.e. white becomes `darkenVal`, black becomes `lightenVal`, and anit-aliased pixels remain anit-aliased From 1c65cc6b46ef71a84598ff3c50e84abb52b4d462 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Tue, 19 Dec 2023 20:55:41 -0500 Subject: [PATCH 09/24] Change 2->3 shield threshold to 11.8px --- shieldlib/src/screen_gfx.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/shieldlib/src/screen_gfx.ts b/shieldlib/src/screen_gfx.ts index ac9915a34..3be40e4be 100644 --- a/shieldlib/src/screen_gfx.ts +++ b/shieldlib/src/screen_gfx.ts @@ -7,7 +7,7 @@ export const shieldFont = (size: number, fontFamily: string) => `condensed 500 ${size}px ${fontFamily || defaultFontFamily}`; //If a computed shield font size is below this value, choose a wider shield if possible -export const fontSizeThreshold = 11; +export const fontSizeThreshold = 11.8; // Replaces `sourceVal` with a blend of `lightenVal` and `darkenVal` proportional to the brightness; // i.e. white becomes `darkenVal`, black becomes `lightenVal`, and anit-aliased pixels remain anit-aliased From d1eaa59e25f83dba1c537b91a7ce373aa56b974d Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Wed, 20 Dec 2023 22:51:38 -0500 Subject: [PATCH 10/24] Refactor math expression --- shieldlib/src/shield.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/shieldlib/src/shield.js b/shieldlib/src/shield.js index a5cbe1ce6..fa20933c6 100644 --- a/shieldlib/src/shield.js +++ b/shieldlib/src/shield.js @@ -325,8 +325,7 @@ export function generateShieldCtx(r, routeDef) { } let bannerHeight = - bannerCount * - (r.px(r.options.bannerHeight) + r.px(r.options.bannerPadding)); + bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding); height += bannerHeight; //Generate empty canvas sized to the graphic From 24c5bcc154e8783738066e608fc745959a653270 Mon Sep 17 00:00:00 2001 From: wmisener <58491489+wmisener@users.noreply.github.com> Date: Wed, 20 Dec 2023 22:45:30 -0800 Subject: [PATCH 11/24] Library icon, taginfo, addition to poi.js --- icons/poi_library.svg | 277 ++++++++++++++++++++++++++++++++++ scripts/taginfo_template.json | 8 + src/layer/poi.js | 10 ++ 3 files changed, 295 insertions(+) create mode 100644 icons/poi_library.svg diff --git a/icons/poi_library.svg b/icons/poi_library.svg new file mode 100644 index 000000000..ec4a6300f --- /dev/null +++ b/icons/poi_library.svg @@ -0,0 +1,277 @@ + + diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index 48cbf2850..173b0c3b1 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -496,6 +496,14 @@ "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_health_cross.svg" }, + { + "key": "amenity", + "value": "library", + "object_types": ["node", "area"], + "description": "Libraries are marked by an icon representing a person reading a book.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_library.svg" + }, { "key": "amenity", "value": "parking", diff --git a/src/layer/poi.js b/src/layer/poi.js index e7df969d5..c1a53ef8a 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -59,6 +59,14 @@ var iconDefs = { color: Color.poi.infrastructure, description: "Hospital", }, + library: { + classes: { + library: ["library"], + }, + sprite: "poi_library", + color: Color.poi.infrastructure, + description: "Library", + }, medical: { classes: { hospital: ["clinic"], @@ -267,6 +275,7 @@ export const poi = { "police", "school", "college", + "library", "townhall", ...getSubclasses(iconDefs.pow_christian), ...getSubclasses(iconDefs.pow_buddhist), @@ -294,6 +303,7 @@ export const poi = { [ "bus_stop", "hospital", + "library", "museum", "police", ...getSubclasses(iconDefs.fuel), From efad5a36db756dbb9f53c3d3d77b1c7358a8b813 Mon Sep 17 00:00:00 2001 From: wmisener <58491489+wmisener@users.noreply.github.com> Date: Thu, 21 Dec 2023 07:06:43 -0800 Subject: [PATCH 12/24] code_format --- icons/poi_library.svg | 282 +----------------------------------------- 1 file changed, 5 insertions(+), 277 deletions(-) diff --git a/icons/poi_library.svg b/icons/poi_library.svg index ec4a6300f..4c9aead41 100644 --- a/icons/poi_library.svg +++ b/icons/poi_library.svg @@ -1,277 +1,5 @@ - - + + + + + From 755117b981b481da10895803230ac55b5db76ca9 Mon Sep 17 00:00:00 2001 From: Brian Sperlongano Date: Thu, 21 Dec 2023 22:30:36 -0500 Subject: [PATCH 13/24] Fix bad programming decisions from past Brian --- shieldlib/src/shield.js | 77 +++++++++++++++--------------------- shieldlib/src/shield_text.ts | 2 +- 2 files changed, 32 insertions(+), 47 deletions(-) diff --git a/shieldlib/src/shield.js b/shieldlib/src/shield.js index fa20933c6..04ff352f4 100644 --- a/shieldlib/src/shield.js +++ b/shieldlib/src/shield.js @@ -76,18 +76,6 @@ function getDrawFunc(shieldDef) { return ShieldDraw.blank; } -function drawShield(r, ctx, shieldDef, routeDef) { - let bannerCount = getBannerCount(shieldDef); - let yOffset = bannerCount * r.px(r.options.bannerHeight); - - //Shift canvas to draw shield below banner - ctx.save(); - ctx.translate(0, yOffset); - let drawFunc = getDrawFunc(shieldDef); - drawFunc(r, ctx, routeDef.ref); - ctx.restore(); -} - function getDrawHeight(r, shieldDef) { if (typeof shieldDef.shapeBlank != "undefined") { return ShieldDraw.shapeHeight(r, shieldDef.shapeBlank.drawFunc); @@ -95,31 +83,7 @@ function getDrawHeight(r, shieldDef) { return r.shieldSize(); } -function drawShieldText(r, ctx, shieldDef, routeDef) { - var bannerCount = getBannerCount(shieldDef); - var shieldBounds = null; - - var shieldArtwork = getRasterShieldBlank(r, shieldDef, routeDef); - let yOffset = - bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding); - - if (shieldArtwork == null) { - ctx.translate(0, yOffset); - let drawFunc = getDrawFunc(shieldDef); - drawFunc(r, ctx, routeDef.ref); - ctx.translate(0, -yOffset); - - shieldBounds = { - width: ctx.canvas.width, - height: getDrawHeight(r, shieldDef), - }; - } else { - shieldBounds = { - width: shieldArtwork.data.width, - height: shieldArtwork.data.height, - }; - } - +function drawShieldText(r, ctx, shieldDef, routeDef, shieldBounds) { if (shieldDef.notext) { //If the shield definition says not to draw a ref, ignore ref return ctx; @@ -133,9 +97,6 @@ function drawShieldText(r, ctx, shieldDef, routeDef) { shieldBounds ); - textLayout.yBaseline += - bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding); - if (typeof r.options.SHIELD_TEXT_HALO_COLOR_OVERRIDE !== "undefined") { ctx.strokeStyle = options.SHIELD_TEXT_HALO_COLOR_OVERRIDE; ShieldText.drawShieldHaloText(r, ctx, routeDef.ref, textLayout); @@ -152,8 +113,7 @@ function drawShieldText(r, ctx, shieldDef, routeDef) { ctx.lineWidth = r.px(1); ctx.strokeRect( r.px(shieldDef.padding.left - 0.5), - bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding) + - r.px(shieldDef.padding.top - 0.5), + r.px(shieldDef.padding.top - 0.5), shieldBounds.width - r.px(shieldDef.padding.left + shieldDef.padding.right - 1), shieldBounds.height - @@ -296,6 +256,17 @@ function getDrawnShieldBounds(r, shieldDef, ref) { return { width, height }; } +function bannerAreaHeight(r, bannerCount) { + if (bannerCount === 0) { + return 0; + } + return ( + bannerCount * r.px(r.options.bannerHeight) + + //No padding after last banner + (bannerCount - 1) * r.px(r.options.bannerPadding) + ); +} + export function generateShieldCtx(r, routeDef) { let shieldDef = getShieldDef(r.shieldDef, routeDef); @@ -313,19 +284,25 @@ export function generateShieldCtx(r, routeDef) { let width = r.shieldSize(); let height = r.shieldSize(); + let shieldBounds = null; + if (sourceSprite == null) { if (typeof shieldDef.shapeBlank != "undefined") { let bounds = getDrawnShieldBounds(r, shieldDef, routeDef.ref); width = bounds.width; height = bounds.height; } + shieldBounds = { + width: width, + height: getDrawHeight(r, shieldDef), + }; } else { width = sourceSprite.data.width; height = sourceSprite.data.height; + shieldBounds = { width, height }; } - let bannerHeight = - bannerCount * r.px(r.options.bannerHeight + r.options.bannerPadding); + let bannerHeight = bannerAreaHeight(r, bannerCount); height += bannerHeight; //Generate empty canvas sized to the graphic @@ -341,9 +318,15 @@ export function generateShieldCtx(r, routeDef) { // Add the halo around modifier plaque text drawBannerHalos(r, ctx, shieldDef); + //Shift canvas to draw shield below banner + ctx.save(); + ctx.translate(0, bannerHeight); + if (sourceSprite == null) { - drawShield(r, ctx, shieldDef, routeDef); + let drawFunc = getDrawFunc(shieldDef); + drawFunc(r, ctx, routeDef.ref); } else { + //This is a raw copy, so the yOffset (bannerHeight) is needed Gfx.transposeImageData( ctx, sourceSprite, @@ -355,7 +338,9 @@ export function generateShieldCtx(r, routeDef) { } // Draw the shield text - drawShieldText(r, ctx, shieldDef, routeDef); + drawShieldText(r, ctx, shieldDef, routeDef, shieldBounds); + + ctx.restore(); // Add modifier plaque text drawBanners(r, ctx, shieldDef); diff --git a/shieldlib/src/shield_text.ts b/shieldlib/src/shield_text.ts index 1e5815421..5bc1071d0 100644 --- a/shieldlib/src/shield_text.ts +++ b/shieldlib/src/shield_text.ts @@ -84,7 +84,7 @@ function rectTextConstraint( ): TextTransform { var scaleHeight = spaceBounds.height / textBounds.height; var scaleWidth = spaceBounds.width / textBounds.width; - + return { scale: Math.min(scaleWidth, scaleHeight), valign: VerticalAlignment.Middle, From c08648c5ef29ca9c257cab982a411a416682d9db Mon Sep 17 00:00:00 2001 From: wmisener <58491489+wmisener@users.noreply.github.com> Date: Mon, 1 Jan 2024 09:51:56 -0800 Subject: [PATCH 14/24] Added sample location and changed to upright book icon --- icons/poi_book_upright.svg | 6 ++++++ icons/poi_library.svg | 5 ----- src/layer/poi.js | 2 +- test/sample_locations.json | 8 ++++++++ 4 files changed, 15 insertions(+), 6 deletions(-) create mode 100644 icons/poi_book_upright.svg delete mode 100644 icons/poi_library.svg diff --git a/icons/poi_book_upright.svg b/icons/poi_book_upright.svg new file mode 100644 index 000000000..b13bdc7bc --- /dev/null +++ b/icons/poi_book_upright.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/icons/poi_library.svg b/icons/poi_library.svg deleted file mode 100644 index 4c9aead41..000000000 --- a/icons/poi_library.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - - - diff --git a/src/layer/poi.js b/src/layer/poi.js index a43716955..dae11fbdc 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -63,7 +63,7 @@ var iconDefs = { classes: { library: ["library"], }, - sprite: "poi_library", + sprite: "poi_book_upright", color: Color.poi.infrastructure, description: "Library", }, diff --git a/test/sample_locations.json b/test/sample_locations.json index 9fc9c110a..3f3505dab 100644 --- a/test/sample_locations.json +++ b/test/sample_locations.json @@ -47,5 +47,13 @@ "width": 400, "height": 400 } + }, + { + "location": "17/40.753326/-73.982224", + "name": "library_z17", + "viewport": { + "width": 400, + "height": 400 + } } ] From c7c5a7d2023726d1d1a03c46cef855806ce4f512 Mon Sep 17 00:00:00 2001 From: wmisener <58491489+wmisener@users.noreply.github.com> Date: Mon, 1 Jan 2024 10:07:38 -0800 Subject: [PATCH 15/24] Update taginfo_template.json --- scripts/taginfo_template.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index f014d1101..cb0191bee 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -500,7 +500,7 @@ "key": "amenity", "value": "library", "object_types": ["node", "area"], - "description": "Libraries are marked by an icon representing a person reading a book.", + "description": "Libraries are marked by an icon representing a book.", "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_library.svg" }, From cb0ae4c20b7eec609a5cac9a47499d2c45783db9 Mon Sep 17 00:00:00 2001 From: wmisener <58491489+wmisener@users.noreply.github.com> Date: Mon, 1 Jan 2024 10:08:30 -0800 Subject: [PATCH 16/24] Update taginfo_template.json --- scripts/taginfo_template.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index cb0191bee..c099b5b06 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -502,7 +502,7 @@ "object_types": ["node", "area"], "description": "Libraries are marked by an icon representing a book.", "doc_url": "https://openmaptiles.org/schema/#poi", - "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_library.svg" + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_book_upright.svg" }, { "key": "amenity", From 1196781b66e241c058ac667674d2a7845c34bf23 Mon Sep 17 00:00:00 2001 From: Jeroen van der Gun Date: Sun, 7 Jan 2024 01:43:50 +0100 Subject: [PATCH 17/24] White shield border for Irish N-road and British A-road --- src/js/shield_defs.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js index a906aeb39..275f6157f 100644 --- a/src/js/shield_defs.js +++ b/src/js/shield_defs.js @@ -3320,6 +3320,7 @@ export function loadShields() { shields["omt-ie-national"] = roundedRectShield( Color.shields.green, + Color.shields.white, Color.shields.yellow ); @@ -3535,6 +3536,7 @@ export function loadShields() { shields["omt-gb-trunk"] = roundedRectShield( Color.shields.green, + Color.shields.white, Color.shields.yellow ); From b97ca662dd895e01e111359f83b627260466de23 Mon Sep 17 00:00:00 2001 From: Will Date: Thu, 11 Jan 2024 06:22:11 -0500 Subject: [PATCH 18/24] Adding vehicle POI icons --- icons/poi_car_repair.svg | 4 ++++ icons/poi_car_shop.svg | 4 ++++ icons/poi_taxi.svg | 5 +++++ src/layer/poi.js | 35 ++++++++++++++++++++++++++++++++++- 4 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 icons/poi_car_repair.svg create mode 100644 icons/poi_car_shop.svg create mode 100644 icons/poi_taxi.svg diff --git a/icons/poi_car_repair.svg b/icons/poi_car_repair.svg new file mode 100644 index 000000000..042bff803 --- /dev/null +++ b/icons/poi_car_repair.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/poi_car_shop.svg b/icons/poi_car_shop.svg new file mode 100644 index 000000000..cfcf82ba7 --- /dev/null +++ b/icons/poi_car_shop.svg @@ -0,0 +1,4 @@ + + + + diff --git a/icons/poi_taxi.svg b/icons/poi_taxi.svg new file mode 100644 index 000000000..c8dcb2193 --- /dev/null +++ b/icons/poi_taxi.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/layer/poi.js b/src/layer/poi.js index c2447533d..6059fdd24 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -35,6 +35,30 @@ var iconDefs = { color: Color.poi.transport, description: "Bus stop", }, + car_repair: { + classes: { + car: ["car_repair"], + }, + sprite: "poi_car_repair", + color: Color.poi.consumer, + description: "Car mechanic", + }, + car_shop: { + classes: { + car: ["car"], + }, + sprite: "poi_car_shop", + color: Color.poi.consumer, + description: "Car dealership", + }, + taxi: { + classes: { + office: ["taxi"], + }, + sprite: "poi_taxi", + color: Color.poi.transport, + description: "Taxi stand", + }, coffee: { classes: { cafe: ["cafe"], @@ -259,6 +283,8 @@ export const poi = { ...getSubclasses(iconDefs.bar), ...getSubclasses(iconDefs.coffee), ...getSubclasses(iconDefs.supermarket), + ...getSubclasses(iconDefs.car_shop), + ...getSubclasses(iconDefs.car_repair), ], Color.poi.consumer, [ @@ -266,6 +292,7 @@ export const poi = { "bus_stop", ...getSubclasses(iconDefs.railway_station), ...getSubclasses(iconDefs.railway_stop), + ...getSubclasses(iconDefs.taxi), ], Color.poi.transport, ["museum"], @@ -320,7 +347,13 @@ export const poi = { "tram_stop", ], 15, - [...getSubclasses(iconDefs.bar), ...getSubclasses(iconDefs.coffee)], + [ + ...getSubclasses(iconDefs.bar), + ...getSubclasses(iconDefs.coffee), + ...getSubclasses(iconDefs.car_shop), + ...getSubclasses(iconDefs.car_repair), + ...getSubclasses(iconDefs.taxi), + ], 16, ["clinic", "doctors", "parking"], 17, From 1e7b889bfaa72948830baada27a6d3757ecaa010 Mon Sep 17 00:00:00 2001 From: Will Date: Thu, 11 Jan 2024 20:43:17 -0500 Subject: [PATCH 19/24] Updating taginfo with vehicle icons --- scripts/taginfo_template.json | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index 868967ced..043e7fae9 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -399,6 +399,14 @@ "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_school.svg" }, + { + "key": "amenity", + "value": "taxi", + "object_types": ["node", "area"], + "description": "Taxi stands are marked by an icon representing the front view of a taxi cab.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_taxi.svg" + }, { "key": "amenity", "value": "kindergarten", @@ -632,6 +640,22 @@ "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_pow_taoist.svg" }, + { + "key": "shop", + "value": "car", + "object_types": ["node", "area"], + "description": "Car dealerships are marked by an icon representing a front facing vehicle.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_car_shop.svg" + }, + { + "key": "shop", + "value": "car_repair", + "object_types": ["node", "area"], + "description": "Car dealerships are marked by an icon representing a front facing vehicle with a wrench above it.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_car_repair.svg" + }, { "key": "shop", "value": "supermarket", From 7b984830ccd331086873e183d0c312dcb97efc74 Mon Sep 17 00:00:00 2001 From: Will Date: Thu, 11 Jan 2024 20:44:03 -0500 Subject: [PATCH 20/24] Updating sample locations with NoVA car-centric intersection --- test/sample_locations.json | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/test/sample_locations.json b/test/sample_locations.json index 2ff11454f..2505eb3dd 100644 --- a/test/sample_locations.json +++ b/test/sample_locations.json @@ -55,5 +55,13 @@ "width": 400, "height": 400 } + }, + { + "location": "16/38.896954/-77.108406", + "name": "virginia_", + "viewport": { + "width": 400, + "height": 400 + } } ] From 60cd926159ecd4f1587f3009e08de74726ff0367 Mon Sep 17 00:00:00 2001 From: Will Date: Thu, 11 Jan 2024 20:45:56 -0500 Subject: [PATCH 21/24] Updating typo in taginfo --- scripts/taginfo_template.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index 043e7fae9..7ca152068 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -652,7 +652,7 @@ "key": "shop", "value": "car_repair", "object_types": ["node", "area"], - "description": "Car dealerships are marked by an icon representing a front facing vehicle with a wrench above it.", + "description": "Car mechanic shops are marked by an icon representing a front facing vehicle with a wrench above it.", "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_car_repair.svg" }, From 5e5ab5d228597400f9838d1c388ef7b3a8efbc9a Mon Sep 17 00:00:00 2001 From: b1tw153 Date: Sun, 21 Jan 2024 09:26:24 -0800 Subject: [PATCH 22/24] adding az shield --- icons/shield_us_az_scenic.svg | 16 ++++++++++++++++ src/js/shield_defs.js | 6 ++++++ 2 files changed, 22 insertions(+) create mode 100644 icons/shield_us_az_scenic.svg diff --git a/icons/shield_us_az_scenic.svg b/icons/shield_us_az_scenic.svg new file mode 100644 index 000000000..bff968fbd --- /dev/null +++ b/icons/shield_us_az_scenic.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/src/js/shield_defs.js b/src/js/shield_defs.js index 275f6157f..04bfd834b 100644 --- a/src/js/shield_defs.js +++ b/src/js/shield_defs.js @@ -653,6 +653,12 @@ export function loadShields() { )) ); + // Arizona + shields["US:AZ:Scenic"] = { + spriteBlank: "shield_us_az_scenic", + notext: true, + }; + // Arkansas shields["US:AR"] = { spriteBlank: ["shield_us_ar_2", "shield_us_ar_3"], From 42499fb9a57dae4bf2bdb97050d3067455dd21eb Mon Sep 17 00:00:00 2001 From: Will Date: Fri, 26 Jan 2024 06:19:07 -0500 Subject: [PATCH 23/24] Adding hotel and hostel POI icons --- icons/poi_hostel.svg | 3 +++ icons/poi_hotel.svg | 3 +++ scripts/taginfo_template.json | 33 ++++++++++++++++++++++++++++++++- src/layer/poi.js | 20 ++++++++++++++++++++ 4 files changed, 58 insertions(+), 1 deletion(-) create mode 100644 icons/poi_hostel.svg create mode 100644 icons/poi_hotel.svg diff --git a/icons/poi_hostel.svg b/icons/poi_hostel.svg new file mode 100644 index 000000000..04d8bf388 --- /dev/null +++ b/icons/poi_hostel.svg @@ -0,0 +1,3 @@ + + + diff --git a/icons/poi_hotel.svg b/icons/poi_hotel.svg new file mode 100644 index 000000000..576f5a1d7 --- /dev/null +++ b/icons/poi_hotel.svg @@ -0,0 +1,3 @@ + + + diff --git a/scripts/taginfo_template.json b/scripts/taginfo_template.json index a1891714f..32399044d 100644 --- a/scripts/taginfo_template.json +++ b/scripts/taginfo_template.json @@ -487,6 +487,38 @@ "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_town_hall.svg" }, + { + "key": "tourism", + "value": "guest_house", + "object_types": ["node", "area"], + "description": "Guest houses are marked by an icon representing a person laying in a bed.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_hotel.svg" + }, + { + "key": "tourism", + "value": "hostel", + "object_types": ["node", "area"], + "description": "Hostels are marked by an icon representing two people laying in a bunk bed.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_hostel.svg" + }, + { + "key": "tourism", + "value": "hotel", + "object_types": ["node", "area"], + "description": "Hotels are marked by an icon representing a person laying in a bed.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_hotel.svg" + }, + { + "key": "tourism", + "value": "motel", + "object_types": ["node", "area"], + "description": "Motels are marked by an icon representing a person laying in a bed.", + "doc_url": "https://openmaptiles.org/schema/#poi", + "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_hotel.svg" + }, { "key": "tourism", "value": "museum", @@ -495,7 +527,6 @@ "doc_url": "https://openmaptiles.org/schema/#poi", "icon_url": "https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/icons/poi_museum.svg" }, - { "key": "amenity", "value": "clinic", diff --git a/src/layer/poi.js b/src/layer/poi.js index 59b4dc77e..cd9c3d1ed 100644 --- a/src/layer/poi.js +++ b/src/layer/poi.js @@ -83,6 +83,22 @@ var iconDefs = { color: Color.poi.infrastructure, description: "Hospital", }, + hotel: { + classes: { + lodging: ["hotel", "motel", "guest_house"], + }, + sprite: "poi_hotel", + color: Color.poi.consumer, + description: "Hotel", + }, + hostel: { + classes: { + lodging: ["hostel"], + }, + sprite: "poi_hostel", + color: Color.poi.consumer, + description: "Hostel", + }, library: { classes: { library: ["library"], @@ -293,6 +309,8 @@ export const poi = { ...getSubclasses(iconDefs.supermarket), ...getSubclasses(iconDefs.car_shop), ...getSubclasses(iconDefs.car_repair), + ...getSubclasses(iconDefs.hotel), + ...getSubclasses(iconDefs.hostel), ], Color.poi.consumer, [ @@ -363,6 +381,8 @@ export const poi = { ...getSubclasses(iconDefs.car_shop), ...getSubclasses(iconDefs.car_repair), ...getSubclasses(iconDefs.taxi), + ...getSubclasses(iconDefs.hotel), + ...getSubclasses(iconDefs.hostel), ], 16, ["clinic", "doctors", "parking"], From fe3979be01d214390efa734f865dc9052c965d1e Mon Sep 17 00:00:00 2001 From: Will Date: Thu, 1 Feb 2024 06:37:07 -0500 Subject: [PATCH 24/24] Adding sample locations for hotel and hostel poi --- test/sample_locations.json | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/test/sample_locations.json b/test/sample_locations.json index 8b448923e..8a150106d 100644 --- a/test/sample_locations.json +++ b/test/sample_locations.json @@ -71,5 +71,21 @@ "width": 400, "height": 400 } + }, + { + "location": "16/38.906341/-77.025889", + "name": "dc_logan_circle", + "viewport": { + "width": 400, + "height": 400 + } + }, + { + "location": "16/40.755264/-73.987405", + "name": "manhattan_times_square", + "viewport": { + "width": 400, + "height": 400 + } } ]