Merge pull request #209 from ZeLonewolf/1ec5-status-map

Generate maps of supported states, countries for shields

README.md

@@ -35,3 +35,15 @@ Some general guidelines:
 The technology stack for this style can be summarized below:
 
 <img src="doc-img/architecture.drawio.svg" alt="Americana technology stack" />
+
+## Coverage
+
+Americana is compatible with vector tiles covering the entire world.
+
+Americana displays custom route shields for routes in the following U.S. states:
+
+<img src="doc-img/shield_map_us.svg" width="500" alt="U.S. states">
+
+and for routes in the following countries:
+
+<img src="doc-img/shield_map_world.svg" width="500" alt="Countries">

style/package.json

@@ -13,9 +13,10 @@
     "clean": "rm -rf dist .parcel-cache",
     "presprites": "rm -rf dist/sprites",
     "sprites": "mkdir -p dist/sprites && npx spritezero dist/sprites/sprite@2x icons/ --retina && npx spritezero dist/sprites/sprite icons/",
+    "status_map": "npm run sprites && node scripts/status_map.js",
     "taginfo": "npm run sprites && node scripts/taginfo.js",
     "start": "npm run clean && npm run sprites && npx parcel index.html --open --port 1776",
-    "build": "npm run clean && npm run sprites && npx parcel build index.html --public-url ./ && npm run taginfo"
+    "build": "npm run clean && npm run sprites && npx parcel build index.html --public-url ./ && npm run taginfo && npm run status_map"
   },
   "dependencies": {
     "@beyondtracks/spritezero-cli": "^2.3.0"

style/scripts/status_map.js

@@ -0,0 +1,53 @@
+"use strict";
+
+import * as fs from "fs";
+import * as ShieldDef from "../js/shield_defs.js";
+
+function fillPaths(svg, codes) {
+  let selectors = new Set(codes.map((code) => `.${code.toLowerCase()}`));
+  return svg.replace(".supported", new Array(...selectors).join(", "));
+}
+
+// Inject a map of each sprite ID to an absolute image URL instead of the usual sprite metadata.
+let sprites = JSON.parse(
+  fs.readFileSync(`${process.cwd()}/dist/sprites/sprite.json`)
+);
+let shieldImageURLs = Object.fromEntries(
+  Object.keys(sprites).map((sprite) => [
+    sprite,
+    `https://raw.githubusercontent.com/ZeLonewolf/openstreetmap-americana/main/style/icons/${sprite}.svg`,
+  ])
+);
+let shields = ShieldDef.loadShields(shieldImageURLs);
+
+let usSVG = fs.readFileSync(`${process.cwd()}/scripts/blank_map_us.svg`, {
+  encoding: "utf8",
+});
+usSVG = fillPaths(
+  usSVG,
+  Object.keys(shields)
+    .map((network) => network.match(/^US:(\w\w)(?::|$)/))
+    .filter((m) => m)
+    .map((m) => m[1])
+);
+usSVG = usSVG.replace(
+  /<title>.+?<\/title>/,
+  "<title>U.S. states with shields supported by OpenStreetMap Americana</title>"
+);
+fs.writeFileSync(`${process.cwd()}/../doc-img/shield_map_us.svg`, usSVG);
+
+let worldSVG = fs.readFileSync(`${process.cwd()}/scripts/blank_map_world.svg`, {
+  encoding: "utf8",
+});
+worldSVG = fillPaths(
+  worldSVG,
+  Object.keys(shields)
+    .map((network) => network.match(/^(\w\w)(?::|$)/))
+    .filter((m) => m)
+    .map((m) => m[1])
+);
+worldSVG = worldSVG.replace(
+  /<title>.+?<\/title>/,
+  "<title>Countries with shields supported by OpenStreetMap Americana</title>"
+);
+fs.writeFileSync(`${process.cwd()}/../doc-img/shield_map_world.svg`, worldSVG);