Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add Saudi Arabia national shields #851

Draft
wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

add Saudi Arabia national shields #851

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
f508517
add Saudi Arabia shields
claysmalley Apr 8, 2023
a65d52f
add Saudi Arabia to status map
claysmalley Apr 8, 2023
56ff0cf
more succinct digit conversion
claysmalley Apr 9, 2023
84931c4
Merge branch 'main' into clay-shields-sa-national
claysmalley Apr 9, 2023
fd71cb4
rename digit conversion function
claysmalley Apr 9, 2023
c4fd133
Merge branch 'main' into clay-shields-sa-national
claysmalley Apr 10, 2023
5b7c2d3
add web fonts for Arabic, Armenian, Georgian
claysmalley Apr 10, 2023
f1f10a6
Merge branch 'main' into clay-shields-sa-national
ZeLonewolf Apr 12, 2023
8184ac7
Merge branch 'main' into clay-shields-sa-national
claysmalley Apr 17, 2023
02a74c6
Merge branch 'main' into clay-shields-sa-national
claysmalley Jun 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions doc-img/shield_map_world.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions icons/shield_sa_national.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion src/js/screen_gfx.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@

import rgba from "color-rgba";

const fontFamily = '"sans-serif-condensed", "Arial Narrow", sans-serif';
const naskhFonts =
'"Noto Naskh Arabic", KacstNaskh, "Sakkal Majalla", "DecoType Naskh Regular"';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I picked a few Naskh fonts that are available by default on most operating systems. I'm not 100% sure these are all the best choices, but they look close enough to the style as shown on Saudi shields.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Legibility doesn't look good on my system:

image

Why not use the packaged Americana fontstacks that have Arabic?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Shields are rendered client-side using fonts available to the browser. We would have to re-engineer shields to render text from a PBF fontstack instead of standard web formats.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh duh good point. Don't you need some kind of <link> tag to use the Google Noto fonts?

Copy link
Member

@ZeLonewolf ZeLonewolf Apr 8, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Something like

<link href='https://fonts.googleapis.com/css?family=Noto Naskh Arabic' rel='stylesheet'>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not if it's already installed on the system, as with Android. But downloading and displaying Noto on all systems is an option.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there a reason we wouldn't? I assume it's just a one time download into browser cache.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I suppose not. Though we might as well include Noto Sans Armenian as well, if consistency is what we're going for.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we'll need whatever scripts would get rendered into shields.

const fontFamily = `"sans-serif-condensed", "Arial Narrow", ${naskhFonts}, sans-serif`;
export const shieldFont = (size) => `bold ${size}px ${fontFamily}`;
export const fontSizeThreshold = 12;

Expand Down
18 changes: 16 additions & 2 deletions src/js/shield.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -303,6 +303,13 @@ export function getRouteDef(id) {
};
}

/**
* Reformats an alphanumeric ref as Eastern Arabic numerals, preserving any
* alphabetic suffix.
*/
export const arabizeRef = (ref) =>
ref.replaceAll(/[0-9]/g, (m) => String.fromCharCode(0x0660 + parseInt(m)));

/**
* Reformats an alphanumeric ref as Roman numerals, preserving any alphabetic
* suffix.
Expand Down Expand Up @@ -382,8 +389,15 @@ export function generateShieldCtx(map, id) {
// Convert numbering systems. Normally alternative numbering systems should be
// tagged directly in ref=*, but some shields use different numbering systems
// for aesthetic reasons only.
if (routeDef.ref && shieldDef.numberingSystem === "roman") {
routeDef.ref = romanizeRef(routeDef.ref);
if (routeDef.ref) {
switch (shieldDef.numberingSystem) {
case "arab":
routeDef.ref = arabizeRef(routeDef.ref);
break;
case "roman":
routeDef.ref = romanizeRef(routeDef.ref);
break;
}
}

// Add the halo around modifier plaque text
Expand Down
14 changes: 14 additions & 0 deletions src/js/shield_defs.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3687,6 +3687,20 @@ export function loadShields() {
},
};

// Saudi Arabia
shields["SA:national"] = {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently, only one national route is mapped with network=SA:national, and all other routes are missing either the network=* tag or a relation altogether. But SA:national clearly represents a coherent network, and this could encourage local mappers to complete the tags for other routes.

The one network=SA:national route is what Saudi Arabia calls a “highway” route, as opposed to a “city road” or “branch road”. All three classifications are part of a nationwide system. Part of Highway 40 has been mapped redundantly as network=SA:highway. If we could get a local mapper to confirm their preference, that might also have the effect of encouraging more build-out of these route relations.

spriteBlank: "shield_sa_national",
textLayout: textConstraint("diamond"),
textColor: Color.shields.black,
numberingSystem: "arab",
padding: {
left: 3,
right: 2,
top: 4,
bottom: 3,
},
};

// Turkey
shields["TR:motorway"] = hexagonVerticalShield(
2,
Expand Down
4 changes: 4 additions & 0 deletions src/shieldtest.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,6 +232,10 @@ let networks = [
"AU:QLD:ALT",
"AU:QLD:ALT_S",
"AU:VIC:ALT_NR",

// With other numeral systems
"IN:NE",
"SA:national",
];

// Uncomment for a list of all supported networks. This makes for a very long page.
Expand Down