fix(transitive): render route label background in webgl

packages/transitive-overlay/src/index.tsx

@@ -15,6 +15,9 @@ import bbox from "@turf/bbox";
 import { getRouteLayerLayout, patternToRouteFeature } from "./route-layers";
 import { drawArc, getFromToAnchors, itineraryToTransitive } from "./util";
 import routeArrow from "./images/route_arrow.png";
+import circle from "./images/circle.png";
+import rectangle from "./images/square.png";
+import debug from "./images/debug.png";
 
 export { itineraryToTransitive };
 
@@ -97,6 +100,7 @@ type Props = {
 type MapImage = {
   id: string;
   url: string;
+  options: { sdf?: boolean; content?: number[] };
 };
 
 const loadImages = (map: MapRef, images: MapImage[]) => {
@@ -108,7 +112,7 @@ const loadImages = (map: MapRef, images: MapImage[]) => {
         return;
       }
       if (!map.hasImage(img.id)) {
-        map.addImage(img.id, image, { sdf: true });
+        map.addImage(img.id, image, img.options);
       }
     });
   });
@@ -129,9 +133,47 @@ const TransitiveCanvasOverlay = ({
   if (showRouteArrows) {
     mapImages.push({
       id: "arrow-icon",
-      url: routeArrow
+      url: routeArrow,
+      options: { sdf: true }
     });
   }
+  mapImages.push({
+    id: "circle",
+    url: circle,
+    options: {
+      sdf: true,
+      content: [400, 390, 600, 610]
+    }
+  });
+
+  mapImages.push({
+    id: "rect",
+    url: rectangle,
+    options: {
+      sdf: true,
+      content: [200, 200, 800, 800]
+    }
+  });
+
+  mapImages.push({
+    id: "debug",
+    url: debug,
+    options: {
+      sdf: false,
+      // @ts-expect-error types are wrong
+      stretchX: [
+        [25, 55],
+        [85, 115]
+      ],
+      // The one (red) row of pixels that can be stretched vertically:
+      //   - the pixels between y: 25 and y: 100 can be stretched
+      stretchY: [[25, 100]],
+      // This part of the image that can contain text ([x1, y1, x2, y2]):
+      content: [25, 25, 115, 100],
+      // This is a high-dpi image:
+      pixelRatio: 2
+    }
+  });
 
   useEffect(() => {
     loadImages(map, mapImages);
@@ -373,25 +415,14 @@ const TransitiveCanvasOverlay = ({
         paint={defaultTextPaintParams}
         type="symbol"
       />
-      <Layer
-        // Render a solid background of fixed height using the uppercase route name.
-        filter={routeFilter}
-        id="routes-labels-background"
-        layout={getRouteLayerLayout("nameUpper")}
-        paint={{
-          "text-color": ["get", "color"],
-          "text-halo-color": ["get", "color"],
-          "text-halo-width": 4 // Max value is 1/4 of text size per maplibre docs.
-        }}
-        type="symbol"
-      />
       <Layer
         // This layer renders transit route names (foreground).
         filter={routeFilter}
         id="routes-labels"
         layout={getRouteLayerLayout("name")}
         paint={{
-          "text-color": ["get", "textColor"]
+          "text-color": ["get", "textColor"],
+          "icon-color": ["get", "color"]
         }}
         type="symbol"
       />

packages/transitive-overlay/src/route-layers.ts

@@ -24,20 +24,10 @@ export function patternToRouteFeature(
       return result.concat(coords);
     }, []);
   const routeName = route.route_short_name || route.route_long_name || "";
-  // HACK: Create an uppercase version of the route name to paint the background, where
-  // - spaces are replaced with '!' (~same width as space)
-  // - "+", "-", certain letters and numbers are replaced with "E" to create a background with a uniform height and fill.
-  // Also, ensure there is a minimum background width (3 characters).
-  // Disclaimer: height of substitution characters can vary from font to font.
-  const routeNameUpper = (routeName.length < 3 ? "EEE" : routeName)
-    .toUpperCase()
-    .replace(/\s/g, "!")
-    .replace(/[+-0124679FHJLPTVXYZ]/g, "E");
 
   const properties = {
     color: `#${route.route_color || "000080"}`,
     name: routeName,
-    nameUpper: routeName.length === 0 ? "" : routeNameUpper,
     routeType: route.route_type,
     textColor: `#${route.route_text_color || "eee"}`,
     type: "route"
@@ -60,10 +50,26 @@ export function patternToRouteFeature(
  */
 export function getRouteLayerLayout(textField: string): SymbolLayout {
   return {
+    // "icon-image": "debug",
+    "icon-image": [
+      "case",
+      [
+        "any",
+        ["==", ["length", ["get", textField]], 3],
+        ["==", ["length", ["get", textField]], 2]
+      ],
+      "circle",
+      "rect"
+    ],
+    "icon-optional": false,
+    // @ts-expect-error maplibre is not typed correctly
+    "icon-overlap": "always",
+    "icon-text-fit": "both",
     "symbol-placement": "line-center",
-    "text-allow-overlap": true,
     "text-field": ["get", textField],
     "text-ignore-placement": true,
+    "text-justify": "center",
+    "text-overlap": "always",
     "text-rotation-alignment": "viewport",
     "text-size": 16
   };

yarn.lock

@@ -9236,11 +9236,6 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.300015
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz"
   integrity sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==
 
-caniuse-lite@^1.0.30001695:
-  version "1.0.30001695"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001695.tgz#39dfedd8f94851132795fdf9b79d29659ad9c4d4"
-  integrity sha512-vHyLade6wTgI2u1ec3WQBxv+2BrTERV28UXQu9LO6lZ9pYeMk34vjXFLOxo1A4UBA8XTL4njRQZdno/yYaSmWw==
-
 capture-exit@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
@@ -20731,6 +20726,7 @@ string-similarity@^4.0.4:
   integrity sha512-/q/8Q4Bl4ZKAPjj8WerIBJWALKkaPRfrvhfF8k/B23i4nzrlRj2/go1m90In7nG/3XDSbOo0+pu6RvCTM9RGMQ==
 
 "string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+  name string-width-cjs
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -20829,6 +20825,7 @@ stringify-package@^1.0.1:
   integrity sha512-sa4DUQsYciMP1xhKWGuFM04fB0LG/9DlluZoSVywUMRNvzid6XucHK0/90xGxRoHrAaROrcHK1aPKaijCtSrhg==
 
 "strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  name strip-ansi-cjs
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -22632,6 +22629,7 @@ worker-farm@^1.7.0:
     errno "~0.1.7"
 
 "wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+  name wrap-ansi-cjs
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==