From 888fc4bc80e52daf87c9b4623d33ed34e73a1637 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 19 Oct 2026 13:59:00 -0400
Subject: [PATCH 01/24] chore(deps): Upgrade maplibre-gl to 5.24.0

---
 assets/package-lock.json | 280 ++++++++++++---------------------------
 assets/package.json      |   2 +-
 2 files changed, 87 insertions(+), 195 deletions(-)

diff --git a/assets/package-lock.json b/assets/package-lock.json
index a4e3b0d5c9..9e538f2fe3 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -33,7 +33,7 @@
         "leaflet": "^1.4.0",
         "leaflet-rotatedmarker": "^0.2.0",
         "lodash": "^4.17.21",
-        "maplibre-gl": "4.7.0",
+        "maplibre-gl": "5.24.0",
         "mobile-detect": "^1.4.5",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
@@ -5014,31 +5014,6 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "dev": true
     },
-    "node_modules/@mapbox/geojson-rewind": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
-      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
-      "license": "ISC",
-      "dependencies": {
-        "get-stream": "^6.0.1",
-        "minimist": "^1.2.6"
-      },
-      "bin": {
-        "geojson-rewind": "geojson-rewind"
-      }
-    },
-    "node_modules/@mapbox/geojson-rewind/node_modules/get-stream": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
-      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.3.tgz",
@@ -5049,9 +5024,9 @@
       }
     },
     "node_modules/@mapbox/point-geometry": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
-      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-1.1.0.tgz",
+      "integrity": "sha512-YGcBz1cg4ATXDCM/71L9xveh4dynfGmcLDqufR+nQQy3fKwsAZsWd/x4621/6uJaeB9mwOHE6hPeDgXz9uViUQ==",
       "license": "ISC"
     },
     "node_modules/@mapbox/tiny-sdf": {
@@ -5067,12 +5042,14 @@
       "license": "BSD-2-Clause"
     },
     "node_modules/@mapbox/vector-tile": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
-      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-2.0.5.tgz",
+      "integrity": "sha512-pXj8m7KTsqZt+1jsE0xIpGvqTSbblfkuEJL/NJmNePMtEwxO8V3XMDo9WMSfDeqHvCtBI9Lmt4mGcGR10zecmw==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@mapbox/point-geometry": "~0.1.0"
+        "@mapbox/point-geometry": "~1.1.0",
+        "@types/geojson": "^7946.0.16",
+        "pbf": "^4.0.2"
       }
     },
     "node_modules/@mapbox/whoots-js": {
@@ -5084,18 +5061,26 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/@maplibre/geojson-vt": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/geojson-vt/-/geojson-vt-6.3.0.tgz",
+      "integrity": "sha512-3Zw2jsU9pIJG3G2CQFbLjWj2MlAHodhD7cSY+15iywUuLmmkgzcKRnueVRZ4AcC/5wOtfhidcJAAzBpoBNs3Xg==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^4.1.0"
+      }
+    },
     "node_modules/@maplibre/maplibre-gl-style-spec": {
-      "version": "20.4.0",
-      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-20.4.0.tgz",
-      "integrity": "sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==",
+      "version": "24.10.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-24.10.0.tgz",
+      "integrity": "sha512-lichxSiagMEBBrqHF0trtMQH9RKh+9jUlIJl0qW0QHvt2H/tbvUWdE+ZzI2Jd0/pT7j/iavLonlPu7EQ/ixTOw==",
       "license": "ISC",
       "dependencies": {
         "@mapbox/jsonlint-lines-primitives": "~2.0.2",
-        "@mapbox/unitbezier": "^0.0.1",
+        "@mapbox/unitbezier": "^1.0.0",
         "json-stringify-pretty-compact": "^4.0.0",
         "minimist": "^1.2.8",
-        "quickselect": "^2.0.0",
-        "rw": "^1.3.3",
+        "quickselect": "^3.0.0",
         "tinyqueue": "^3.0.0"
       },
       "bin": {
@@ -5104,11 +5089,43 @@
         "gl-style-validate": "dist/gl-style-validate.mjs"
       }
     },
-    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
-      "license": "ISC"
+    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/@mapbox/unitbezier": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-1.0.0.tgz",
+      "integrity": "sha512-fqd515fjBmANKGGsQ286E2Wvj/XvDFpGzwJxq4CI6jMQue6Oy04uCKp+JWKF00xRTmk6cEu1jPJ9p3xqH8YWqQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@maplibre/mlt": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@maplibre/mlt/-/mlt-1.3.0.tgz",
+      "integrity": "sha512-7M2O7ABM80Oi8XPkfkrjKB8mOBIxGoVgkA52Mu4RMWoBvvMdagQ522+WxVYujZsMpqIr3BpzrTbXrm4k8lCzCQ==",
+      "license": "(MIT OR Apache-2.0)",
+      "dependencies": {
+        "@mapbox/point-geometry": "^1.1.0"
+      }
+    },
+    "node_modules/@maplibre/vt-pbf": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/@maplibre/vt-pbf/-/vt-pbf-4.3.2.tgz",
+      "integrity": "sha512-j6p0AdjvAR19Z3XaCysle7A4ZSo08tYOzxD0Y9NQylwPAkwJJeYub5b2eVucdeDh7erhv69DahoLOevDRERRUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@mapbox/point-geometry": "^1.1.0",
+        "@types/geojson": "^7946.0.16",
+        "pbf": "^5.1.0"
+      }
+    },
+    "node_modules/@maplibre/vt-pbf/node_modules/pbf": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
+      "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -5819,18 +5836,10 @@
       }
     },
     "node_modules/@types/geojson": {
-      "version": "7946.0.14",
-      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz",
-      "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg=="
-    },
-    "node_modules/@types/geojson-vt": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/@types/geojson-vt/-/geojson-vt-3.2.5.tgz",
-      "integrity": "sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/geojson": "*"
-      }
+      "version": "7946.0.16",
+      "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.16.tgz",
+      "integrity": "sha512-6C8nqWur3j98U6+lXDfTUWIfgvZU+EumvpHKcYjujKH7woYyLj2sUmff0tRhrqM7BohUw7Pz3ZB1jj2gW9Fvmg==",
+      "license": "MIT"
     },
     "node_modules/@types/googlemaps": {
       "version": "3.43.3",
@@ -5920,23 +5929,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/mapbox__point-geometry": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz",
-      "integrity": "sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==",
-      "license": "MIT"
-    },
-    "node_modules/@types/mapbox__vector-tile": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz",
-      "integrity": "sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/geojson": "*",
-        "@types/mapbox__point-geometry": "*",
-        "@types/pbf": "*"
-      }
-    },
     "node_modules/@types/mdast": {
       "version": "3.0.12",
       "dev": true,
@@ -5979,12 +5971,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/pbf": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmjs.org/@types/pbf/-/pbf-3.0.5.tgz",
-      "integrity": "sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==",
-      "license": "MIT"
-    },
     "node_modules/@types/phoenix": {
       "version": "1.5.4",
       "dev": true,
@@ -6137,15 +6123,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/supercluster": {
-      "version": "7.1.3",
-      "resolved": "https://registry.npmjs.org/@types/supercluster/-/supercluster-7.1.3.tgz",
-      "integrity": "sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==",
-      "license": "MIT",
-      "dependencies": {
-        "@types/geojson": "*"
-      }
-    },
     "node_modules/@types/testing-library__jest-dom": {
       "version": "5.14.5",
       "dev": true,
@@ -11824,12 +11801,6 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/geojson-vt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-4.0.3.tgz",
-      "integrity": "sha512-jR1MwkLaZGa8Zftct9ZFruyWFrdl9ZyD2OliXNy9Qq5bBPeg5wHVpBQF9p5GjnicSDQqvBVpysxTPKmWdsfWMA==",
-      "license": "ISC"
-    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "dev": true,
@@ -12601,6 +12572,7 @@
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -15534,6 +15506,7 @@
     },
     "node_modules/kind-of": {
       "version": "6.0.3",
+      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -15998,37 +15971,30 @@
       "dev": true
     },
     "node_modules/maplibre-gl": {
-      "version": "4.7.0",
-      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-4.7.0.tgz",
-      "integrity": "sha512-hkt7je7NxiMQE8EpCxLWP8t6tkK6SkrMe0hIBjYd4Ar/Q7BOCILxthGmGnU993Mwmkvs2mGiXnVUSOK12DeCzg==",
+      "version": "5.24.0",
+      "resolved": "https://registry.npmjs.org/maplibre-gl/-/maplibre-gl-5.24.0.tgz",
+      "integrity": "sha512-ALyFxgtd5R+65UqZ/++lOqwWcC0SNho9c27fYSyLmG7AfnAul2o46F05aDJGPbFU57wos9dgcIySHs0Xe6ia3A==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "@mapbox/geojson-rewind": "^0.5.2",
         "@mapbox/jsonlint-lines-primitives": "^2.0.2",
-        "@mapbox/point-geometry": "^0.1.0",
-        "@mapbox/tiny-sdf": "^2.0.6",
+        "@mapbox/point-geometry": "^1.1.0",
+        "@mapbox/tiny-sdf": "^2.1.0",
         "@mapbox/unitbezier": "^0.0.1",
-        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/vector-tile": "^2.0.4",
         "@mapbox/whoots-js": "^3.1.0",
-        "@maplibre/maplibre-gl-style-spec": "^20.3.1",
-        "@types/geojson": "^7946.0.14",
-        "@types/geojson-vt": "3.2.5",
-        "@types/mapbox__point-geometry": "^0.1.4",
-        "@types/mapbox__vector-tile": "^1.3.4",
-        "@types/pbf": "^3.0.5",
-        "@types/supercluster": "^7.1.3",
-        "earcut": "^3.0.0",
-        "geojson-vt": "^4.0.2",
-        "gl-matrix": "^3.4.3",
-        "global-prefix": "^4.0.0",
+        "@maplibre/geojson-vt": "^6.1.0",
+        "@maplibre/maplibre-gl-style-spec": "^24.8.1",
+        "@maplibre/mlt": "^1.1.8",
+        "@maplibre/vt-pbf": "^4.3.0",
+        "@types/geojson": "^7946.0.16",
+        "earcut": "^3.0.2",
+        "gl-matrix": "^3.4.4",
         "kdbush": "^4.0.2",
         "murmurhash-js": "^1.0.0",
-        "pbf": "^3.3.0",
-        "potpack": "^2.0.0",
+        "pbf": "^4.0.1",
+        "potpack": "^2.1.0",
         "quickselect": "^3.0.0",
-        "supercluster": "^8.0.1",
-        "tinyqueue": "^3.0.0",
-        "vt-pbf": "^3.1.3"
+        "tinyqueue": "^3.0.0"
       },
       "engines": {
         "node": ">=16.14.0",
@@ -16038,53 +16004,6 @@
         "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
       }
     },
-    "node_modules/maplibre-gl/node_modules/global-prefix": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-4.0.0.tgz",
-      "integrity": "sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==",
-      "license": "MIT",
-      "dependencies": {
-        "ini": "^4.1.3",
-        "kind-of": "^6.0.3",
-        "which": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=16"
-      }
-    },
-    "node_modules/maplibre-gl/node_modules/ini": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-4.1.3.tgz",
-      "integrity": "sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==",
-      "license": "ISC",
-      "engines": {
-        "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
-      }
-    },
-    "node_modules/maplibre-gl/node_modules/isexe": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-3.1.5.tgz",
-      "integrity": "sha512-6B3tLtFqtQS4ekarvLVMZ+X+VlvQekbe4taUkf/rhVO3d/h0M2rfARm/pXLcPEsjjMsFgrFgSrhQIxcSVrBz8w==",
-      "license": "BlueOak-1.0.0",
-      "engines": {
-        "node": ">=18"
-      }
-    },
-    "node_modules/maplibre-gl/node_modules/which": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
-      "integrity": "sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==",
-      "license": "ISC",
-      "dependencies": {
-        "isexe": "^3.1.1"
-      },
-      "bin": {
-        "node-which": "bin/which.js"
-      },
-      "engines": {
-        "node": "^16.13.0 || >=18.0.0"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -17666,12 +17585,11 @@
       }
     },
     "node_modules/pbf": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
-      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.2.tgz",
+      "integrity": "sha512-J0ajxARhZfpUEebxYs1vhMGMuLSXtBe1e+fFPDrf2uA2hgo+UshKfNUWOz92HJNz6/NFEXseQPddnHkTreWRqg==",
       "license": "BSD-3-Clause",
       "dependencies": {
-        "ieee754": "^1.1.12",
         "resolve-protobuf-schema": "^2.1.0"
       },
       "bin": {
@@ -20635,12 +20553,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rw": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
-      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
-      "license": "BSD-3-Clause"
-    },
     "node_modules/rxjs": {
       "version": "7.8.1",
       "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
@@ -22164,15 +22076,6 @@
         "url": "https://opencollective.com/postcss/"
       }
     },
-    "node_modules/supercluster": {
-      "version": "8.0.1",
-      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-8.0.1.tgz",
-      "integrity": "sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==",
-      "license": "ISC",
-      "dependencies": {
-        "kdbush": "^4.0.2"
-      }
-    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "dev": true,
@@ -23420,17 +23323,6 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/vt-pbf": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
-      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
-      "license": "MIT",
-      "dependencies": {
-        "@mapbox/point-geometry": "0.1.0",
-        "@mapbox/vector-tile": "^1.3.1",
-        "pbf": "^3.2.1"
-      }
-    },
     "node_modules/w3c-hr-time": {
       "version": "1.0.2",
       "dev": true,
diff --git a/assets/package.json b/assets/package.json
index 7b490ecf7e..4e2bea7547 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -28,7 +28,7 @@
     "leaflet": "^1.4.0",
     "leaflet-rotatedmarker": "^0.2.0",
     "lodash": "^4.17.21",
-    "maplibre-gl": "4.7.0",
+    "maplibre-gl": "5.24.0",
     "mobile-detect": "^1.4.5",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",

From 276519a0a0e8f60ab63ef35bbe3c7b2bfa770903 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 19 Oct 2026 14:03:16 -0400
Subject: [PATCH 02/24] chore(deps): Install `maplibrex`

---
 assets/js/app.js              |  3 +-
 assets/package-lock.json      | 84 ++++++++++++++++++++++++++---------
 assets/package.json           |  1 +
 assets/webpack.config.base.js |  7 ++-
 mix.exs                       |  1 +
 mix.lock                      |  1 +
 6 files changed, 74 insertions(+), 23 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index e7bd44a3ef..b324bb6174 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -17,6 +17,7 @@ import fullstory from "./fullstory";
 import googleAnalytics from "./google-analytics";
 import googleTranslate from "./google-translate";
 import juxtapose from "./juxtapose";
+import { MapHooks } from "maplibrex"
 import modal from "./modal";
 import photoGallery from "./photo-gallery";
 import pslPageSetup from "./psl-page-setup.js";
@@ -48,7 +49,7 @@ import storageOptions from "./storage.js";
 
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { ...DotcomHooks, Map },
+  hooks: { ...DotcomHooks, ...MapHooks, Map },
   dom: {
     onBeforeElUpdated(from, to) {
       /*
diff --git a/assets/package-lock.json b/assets/package-lock.json
index 9e538f2fe3..f7e1e2bf92 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -34,6 +34,7 @@
         "leaflet-rotatedmarker": "^0.2.0",
         "lodash": "^4.17.21",
         "maplibre-gl": "5.24.0",
+        "maplibrex": "file:../deps/maplibrex",
         "mobile-detect": "^1.4.5",
         "phoenix": "file:../deps/phoenix",
         "phoenix_html": "file:../deps/phoenix_html",
@@ -155,6 +156,31 @@
       "version": "3.3.1",
       "extraneous": true
     },
+    "../deps/maplibrex": {
+      "version": "0.1.0",
+      "license": "MIT",
+      "peerDependencies": {
+        "@deck.gl/aggregation-layers": "^9.0.0",
+        "@deck.gl/core": "^9.0.0",
+        "@deck.gl/layers": "^9.0.0",
+        "@deck.gl/mapbox": "^9.0.0",
+        "maplibre-gl": ">=5.0.0 <7.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@deck.gl/aggregation-layers": {
+          "optional": true
+        },
+        "@deck.gl/core": {
+          "optional": true
+        },
+        "@deck.gl/layers": {
+          "optional": true
+        },
+        "@deck.gl/mapbox": {
+          "optional": true
+        }
+      }
+    },
     "../deps/phoenix": {
       "version": "1.8.15",
       "license": "MIT",
@@ -5030,9 +5056,9 @@
       "license": "ISC"
     },
     "node_modules/@mapbox/tiny-sdf": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.2.0.tgz",
-      "integrity": "sha512-LVL4wgI9YAum5V+LNVQO6QgFBPw7/MIIY4XJPNsPDMrjEwcE+JfKk1LuIl8GnF197ejVdC9QdPaxrx5gfgdGXg==",
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-2.3.0.tgz",
+      "integrity": "sha512-gBvcNDBBB66bgQYvnaJ6Jk+VCaMmVq5+IZR2kWPisT88Z8s0kBQt6hfVi8QgRW8Vpg0UWZzBA4ZSyzHHC+VeRA==",
       "license": "BSD-2-Clause"
     },
     "node_modules/@mapbox/unitbezier": {
@@ -5052,6 +5078,18 @@
         "pbf": "^4.0.2"
       }
     },
+    "node_modules/@mapbox/vector-tile/node_modules/pbf": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.2.tgz",
+      "integrity": "sha512-J0ajxARhZfpUEebxYs1vhMGMuLSXtBe1e+fFPDrf2uA2hgo+UshKfNUWOz92HJNz6/NFEXseQPddnHkTreWRqg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/@mapbox/whoots-js": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
@@ -5115,18 +5153,6 @@
         "pbf": "^5.1.0"
       }
     },
-    "node_modules/@maplibre/vt-pbf/node_modules/pbf": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
-      "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "resolve-protobuf-schema": "^2.1.0"
-      },
-      "bin": {
-        "pbf": "bin/pbf"
-      }
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -9914,9 +9940,9 @@
       "license": "MIT"
     },
     "node_modules/earcut": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.2.3.tgz",
-      "integrity": "sha512-vnS4AVwp1KHAF13i1vp1/2D5evWy3k5u/iW/B81QVsUZtV8cv2tU0b2VNFlqvh4kYwrFMDdjPCfAmfyJW9y14Q==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-3.2.4.tgz",
+      "integrity": "sha512-FHc6yNpnTORB0tM5kmZ03iD2mDuNakDE2lvf4Hw1XkfxtEHIGVi01B/GqUSwx+NcC1WGjidAfpTXzeALtPtfpg==",
       "license": "ISC"
     },
     "node_modules/eastasianwidth": {
@@ -16004,6 +16030,22 @@
         "url": "https://github.com/maplibre/maplibre-gl-js?sponsor=1"
       }
     },
+    "node_modules/maplibre-gl/node_modules/pbf": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.2.tgz",
+      "integrity": "sha512-J0ajxARhZfpUEebxYs1vhMGMuLSXtBe1e+fFPDrf2uA2hgo+UshKfNUWOz92HJNz6/NFEXseQPddnHkTreWRqg==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
+    "node_modules/maplibrex": {
+      "resolved": "../deps/maplibrex",
+      "link": true
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -17585,9 +17627,9 @@
       }
     },
     "node_modules/pbf": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.2.tgz",
-      "integrity": "sha512-J0ajxARhZfpUEebxYs1vhMGMuLSXtBe1e+fFPDrf2uA2hgo+UshKfNUWOz92HJNz6/NFEXseQPddnHkTreWRqg==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-5.1.2.tgz",
+      "integrity": "sha512-mnvGdvOrIvJOBGUEdGkrVXjN8E/VkIJCkf2eS1DH2yv82ORUlLttmDt0rWY38yYZmVwciZwBUvHM20qxBZf40w==",
       "license": "BSD-3-Clause",
       "dependencies": {
         "resolve-protobuf-schema": "^2.1.0"
diff --git a/assets/package.json b/assets/package.json
index 4e2bea7547..7a67f1aea5 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -29,6 +29,7 @@
     "leaflet-rotatedmarker": "^0.2.0",
     "lodash": "^4.17.21",
     "maplibre-gl": "5.24.0",
+    "maplibrex": "file:../deps/maplibrex",
     "mobile-detect": "^1.4.5",
     "phoenix": "file:../deps/phoenix",
     "phoenix_html": "file:../deps/phoenix_html",
diff --git a/assets/webpack.config.base.js b/assets/webpack.config.base.js
index 7b5673ab3a..aa678e4769 100644
--- a/assets/webpack.config.base.js
+++ b/assets/webpack.config.base.js
@@ -189,7 +189,12 @@ module.exports = {
   resolve: {
     alias: {
       // Metro's Flatpickr import briefly, optionally references jQuery without importing it, which breaks Webpack unless we add this line
-      jquery: path.resolve(__dirname, "./node_modules/jquery")
+      jquery: path.resolve(__dirname, "./node_modules/jquery"),
+      // Optional MaplibreX deck.gl deps; we don't use <.deckgl_layer>
+      "@deck.gl/core": false,
+      "@deck.gl/layers": false,
+      "@deck.gl/aggregation-layers": false,
+      "@deck.gl/mapbox": false
     },
     symlinks: false,
     extensions: [".tsx", ".ts", ".jsx", ".js"]
diff --git a/mix.exs b/mix.exs
index b12f82380b..4967056a4c 100644
--- a/mix.exs
+++ b/mix.exs
@@ -144,6 +144,7 @@ defmodule Dotcom.Mixfile do
       {:logster, "~> 2.0.0-rc.5"},
       # reverted from 0.4
       {:mail, "0.3.1"},
+      {:maplibrex, "0.1.0"},
       {:mbta_metro, "1.4.0", runtime: false},
       {:memoize, "1.4.5"},
       {:mox, "1.3.2", [only: [:dev, :test]]},
diff --git a/mix.lock b/mix.lock
index 65f1d87ac4..0c40f76a6f 100644
--- a/mix.lock
+++ b/mix.lock
@@ -77,6 +77,7 @@
   "makeup_elixir": {:hex, :makeup_elixir, "1.0.1", "e928a4f984e795e41e3abd27bfc09f51db16ab8ba1aebdba2b3a575437efafc2", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"},
   "makeup_erlang": {:hex, :makeup_erlang, "1.1.0", "835f7e60792e08824cda445639555d7bf1bbbddb1b60b306e33cb6f6db24dc74", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "1cd6780fb1dd1a03979abaed0fe82712b0625118fd5257d3ebbf73f960c73c3c"},
   "makeup_html": {:hex, :makeup_html, "0.2.0", "9f810da8d43d625ccd3f7ea25997e588fa541d80e0a8c6b895157ad5c7e9ca13", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "0856f7beb9a6a642ab1307e06d990fe39f0ba58690d0b8e662aa2e027ba331b2"},
+  "maplibrex": {:hex, :maplibrex, "0.1.0", "057926a1861accbc51fff540d401a0c273fcd8990ee6331dbc39ae6c6bcc2c46", [:mix], [{:esbuild, "~> 0.8", [hex: :esbuild, repo: "hexpm", optional: false]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.7", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_html, "~> 4.0", [hex: :phoenix_html, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "3929446619d3a7fece469925e9ff63657a0cb6adf2612f71ff23015e27615a22"},
   "mbta_metro": {:hex, :mbta_metro, "1.4.0", "ef4e55419c1c077c9dd858af08aa2f492b05c714c306af236ffd978496780759", [:mix], [{:bandit, "~> 1.12", [hex: :bandit, repo: "hexpm", optional: false]}, {:cva, "~> 0.2", [hex: :cva, repo: "hexpm", optional: false]}, {:esbuild, "~> 0.10", [hex: :esbuild, repo: "hexpm", optional: false]}, {:faker, "~> 0.19", [hex: :faker, repo: "hexpm", optional: false]}, {:floki, "~> 0.38", [hex: :floki, repo: "hexpm", optional: false]}, {:gettext, "~> 1.0", [hex: :gettext, repo: "hexpm", optional: false]}, {:heroicons, "~> 0.5", [hex: :heroicons, repo: "hexpm", optional: true]}, {:jason, "~> 1.4", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix, "~> 1.8", [hex: :phoenix, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.2", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}, {:phoenix_storybook, "~> 1.5", [hex: :phoenix_storybook, repo: "hexpm", optional: false]}, {:tailwind, "~> 0.3", [hex: :tailwind, repo: "hexpm", optional: false]}], "hexpm", "213390b1d002de757dc907413f7370155b86c4e33681f2ed0754b51f96914031"},
   "mdex": {:hex, :mdex, "0.14.2", "8d2b376f3de8f9f03a2ba0992eeb4f76d58fa790b0ed78dc90bcb5422ce7ff5d", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:lumis, "~> 0.10", [hex: :lumis, repo: "hexpm", optional: true]}, {:mdex_native, ">= 0.2.11", [hex: :mdex_native, repo: "hexpm", optional: false]}, {:nimble_options, "~> 1.0", [hex: :nimble_options, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.0", [hex: :nimble_parsec, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 0.20.0 or ~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: true]}], "hexpm", "7003e60b8621ab1c9b3671221a8dcc27dee9f9086026c25ea7aed4057d07978f"},
   "mdex_native": {:hex, :mdex_native, "0.2.11", "439f8448bd349611dccce197c8822fc1e2d63907e346f3a68527905bae91c6d7", [:mix], [{:rustler, "~> 0.32", [hex: :rustler, repo: "hexpm", optional: true]}, {:rustler_precompiled, "~> 0.8", [hex: :rustler_precompiled, repo: "hexpm", optional: false]}], "hexpm", "97e5c201fa016ad4dbd948a8014e314fc2d2e15a7fe88e73994ecfdd51a5dd08"},

From d2c4c911a440bb4de6c30e07d8d3f6f27873b1bd Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 19 Oct 2026 17:09:19 -0400
Subject: [PATCH 03/24] feat(robot): Add route-shape lines to the new map

---
 assets/css/app.scss                      |  1 +
 lib/dotcom_web/live/line_diagram_live.ex | 64 +++++++++++++++++++++---
 2 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/assets/css/app.scss b/assets/css/app.scss
index 25fa38beec..962117e940 100644
--- a/assets/css/app.scss
+++ b/assets/css/app.scss
@@ -1,5 +1,6 @@
 @use "../node_modules/maplibre-gl/dist/maplibre-gl.css";
 @import "../../deps/mbta_metro/priv/dist/metro.css";
+@import "../../deps/maplibrex/assets/css/maplibrex.css";
 @import "./map.css";
 
 @tailwind base;
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 01e5b292ab..2fbcf7db4e 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -179,6 +179,11 @@ defmodule DotcomWeb.LineDiagramLive do
     _ = Phoenix.PubSub.unsubscribe(Dotcom.PubSub, socket.assigns.vehicle_topic)
   end
 
+  @impl true
+  def handle_event(_event, _params, socket) do
+    {:noreply, socket}
+  end
+
   @impl true
   def handle_info(
         %Phoenix.Socket.Broadcast{topic: "vehicles-v2:" <> _, event: event, payload: payload},
@@ -426,14 +431,24 @@ defmodule DotcomWeb.LineDiagramLive do
             {~t(Change Direction)}
           </.link>
         </div>
-        <.map
-          map_config={@map_config}
-          route_patterns={@route_patterns}
-          map_lines={@map_lines}
-          map_icons={@map_icons}
-          vehicle_icons={Map.values(@vehicle_icons)}
-          move_map={@move_map}
-        />
+        <div class="flex flex-col gap-2">
+          <.map
+            map_config={@map_config}
+            route_patterns={@route_patterns}
+            map_lines={@map_lines}
+            map_icons={@map_icons}
+            vehicle_icons={Map.values(@vehicle_icons)}
+            move_map={@move_map}
+          />
+
+          <.new_map
+            map_style={@map_config.style}
+            route_patterns={@route_patterns}
+            map_lines={@map_lines}
+            map_icons={@map_icons}
+            vehicle_icons={Map.values(@vehicle_icons)}
+          />
+        </div>
       </div>
       <div class="col-md-5 gap-[32px] flex flex-col">
         <marquee
@@ -623,6 +638,39 @@ defmodule DotcomWeb.LineDiagramLive do
     """
   end
 
+  defp new_map(assigns) do
+    ~H"""
+    <MaplibreX.Components.map
+      id="new-map"
+      center={[-71.0589, 42.3601]}
+      style={@map_style}
+      zoom={10}
+      class="h-96 w-full"
+    />
+
+    <MaplibreX.Components.geojson_layer
+      :for={{line, index} <- Enum.with_index(@map_lines)}
+      id={"new-map-lines-#{index}"}
+      map_id="new-map"
+      data={line_to_feature(line)}
+      type="line"
+      paint={%{"line-color" => line.color, "line-width" => line.width}}
+      layout={%{"line-cap" => "round", "line-join" => "round"}}
+    />
+    """
+  end
+
+  defp line_to_feature(%{coordinates: coordinates}) do
+    %{
+      "type" => "Feature",
+      "properties" => %{},
+      "geometry" => %{
+        "type" => "LineString",
+        "coordinates" => coordinates
+      }
+    }
+  end
+
   defp route_pdf_sidebar_content(assigns) do
     ~H"""
     <div :if={!Enum.empty?(@route_pdfs)}>

From 22d5157c651040a5ab363f3ff108632b9b5414f8 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 19 Oct 2026 17:11:37 -0400
Subject: [PATCH 04/24] refactor(robot): Consolidate all lines onto a single
 layer

---
 lib/dotcom_web/live/line_diagram_live.ex | 33 +++++++++++++++---------
 1 file changed, 21 insertions(+), 12 deletions(-)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 2fbcf7db4e..5d8dd3a390 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -649,25 +649,34 @@ defmodule DotcomWeb.LineDiagramLive do
     />
 
     <MaplibreX.Components.geojson_layer
-      :for={{line, index} <- Enum.with_index(@map_lines)}
-      id={"new-map-lines-#{index}"}
+      id="new-map-lines"
       map_id="new-map"
-      data={line_to_feature(line)}
+      data={map_lines_to_feature_collection(@map_lines)}
       type="line"
-      paint={%{"line-color" => line.color, "line-width" => line.width}}
-      layout={%{"line-cap" => "round", "line-join" => "round"}}
+      paint={%{"line-color" => ["get", "color"], "line-width" => ["get", "width"]}}
+      layout={
+        %{
+          "line-cap" => "round",
+          "line-join" => "round",
+          "line-sort-key" => ["-", 10, ["get", "width"]]
+        }
+      }
     />
     """
   end
 
-  defp line_to_feature(%{coordinates: coordinates}) do
+  # `line-sort-key` draws wider features (outlines) first, since higher keys draw on top, so route colors sit on top.
+  defp map_lines_to_feature_collection(map_lines) do
     %{
-      "type" => "Feature",
-      "properties" => %{},
-      "geometry" => %{
-        "type" => "LineString",
-        "coordinates" => coordinates
-      }
+      "type" => "FeatureCollection",
+      "features" =>
+        Enum.map(map_lines, fn %{coordinates: coordinates, color: color, width: width} ->
+          %{
+            "type" => "Feature",
+            "properties" => %{"color" => color, "width" => width},
+            "geometry" => %{"type" => "LineString", "coordinates" => coordinates}
+          }
+        end)
     }
   end
 

From 1c230a89e0955ba7edbaa14c4f6117f732425666 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 13:35:20 -0400
Subject: [PATCH 05/24] feat(robot): Add stop markers hook

---
 assets/js/app.js                         |  3 +-
 assets/js/maplibrex-stop-markers.js      | 62 ++++++++++++++++++++++++
 lib/dotcom_web/live/line_diagram_live.ex | 17 +++++++
 3 files changed, 81 insertions(+), 1 deletion(-)
 create mode 100644 assets/js/maplibrex-stop-markers.js

diff --git a/assets/js/app.js b/assets/js/app.js
index b324bb6174..aa7bf2520a 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -18,6 +18,7 @@ import googleAnalytics from "./google-analytics";
 import googleTranslate from "./google-translate";
 import juxtapose from "./juxtapose";
 import { MapHooks } from "maplibrex"
+import StopMarkers from "./maplibrex-stop-markers";
 import modal from "./modal";
 import photoGallery from "./photo-gallery";
 import pslPageSetup from "./psl-page-setup.js";
@@ -49,7 +50,7 @@ import storageOptions from "./storage.js";
 
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { ...DotcomHooks, ...MapHooks, Map },
+  hooks: { ...DotcomHooks, ...MapHooks, Map, StopMarkers },
   dom: {
     onBeforeElUpdated(from, to) {
       /*
diff --git a/assets/js/maplibrex-stop-markers.js b/assets/js/maplibrex-stop-markers.js
new file mode 100644
index 0000000000..a123bf38a2
--- /dev/null
+++ b/assets/js/maplibrex-stop-markers.js
@@ -0,0 +1,62 @@
+import maplibregl from "maplibre-gl";
+import { MapManager } from "maplibrex";
+
+/**
+ * Hook that places custom HTML elements on a MaplibreX map.
+ *
+ * Set `data-map-id` to the id of the map. Each child with a
+ * `data-coordinates` attribute (JSON `[lng, lat]`) becomes a marker, using a
+ * clone of that child as the marker element. The optional `data-popup`
+ * attribute is the HTML for a popup that opens when the marker is clicked.
+ */
+const StopMarkers = {
+  mounted() {
+    this.markers = [];
+    this.renderMarkers();
+  },
+
+  updated() {
+    this.renderMarkers();
+  },
+
+  destroyed() {
+    this.removeMarkers();
+  },
+
+  removeMarkers() {
+    this.markers.forEach(marker => marker.remove());
+    this.markers = [];
+  },
+
+  renderMarkers() {
+    this.removeMarkers();
+
+    const map = MapManager.get(this.el.dataset.mapId);
+    if (!map) return;
+
+    this.el.querySelectorAll("[data-coordinates]").forEach(source => {
+      const coordinates = JSON.parse(source.getAttribute("data-coordinates"));
+      if (coordinates.length !== 2) return;
+
+      const marker = new maplibregl.Marker({
+        anchor: source.getAttribute("data-anchor") || "center",
+        element: source.cloneNode(true)
+      }).setLngLat(coordinates);
+
+      const popupHtml = source.getAttribute("data-popup");
+      if (popupHtml) {
+        marker.setPopup(
+          new maplibregl.Popup({
+            className: "m-schedule-line__stop-popup",
+            focusAfterOpen: false
+          }).setHTML(popupHtml)
+        );
+      }
+
+      marker.addTo(map);
+      this.markers.push(marker);
+    });
+  }
+};
+
+export default StopMarkers;
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 5d8dd3a390..12fec5858d 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -662,9 +662,26 @@ defmodule DotcomWeb.LineDiagramLive do
         }
       }
     />
+
+    <div id="new-map-stops" phx-hook="StopMarkers" data-map-id="new-map" class="hidden">
+      <.icon
+        :for={icon <- @map_icons}
+        type={icon.type}
+        name={icon.name}
+        class={icon.class}
+        data-coordinates={Jason.encode!(icon.coordinates)}
+        data-popup={render_popup(icon.popup)}
+      />
+    </div>
     """
   end
 
+  defp render_popup(%Phoenix.LiveView.Rendered{} = heex) do
+    heex
+    |> Phoenix.HTML.Safe.to_iodata()
+    |> IO.iodata_to_binary()
+  end
+
   # `line-sort-key` draws wider features (outlines) first, since higher keys draw on top, so route colors sit on top.
   defp map_lines_to_feature_collection(map_lines) do
     %{

From caf18ef7c1d28dfbf7a7a0f13f3bdc4b83eb1a39 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 14:02:17 -0400
Subject: [PATCH 06/24] refactor(robot): Make the icon marker JS more
 general-purpose

---
 assets/js/app.js                              |  4 +--
 ...p-markers.js => maplibrex-icon-markers.js} | 12 +++++---
 lib/dotcom_web/live/line_diagram_live.ex      | 28 ++++++++++++++++---
 3 files changed, 34 insertions(+), 10 deletions(-)
 rename assets/js/{maplibrex-stop-markers.js => maplibrex-icon-markers.js} (77%)

diff --git a/assets/js/app.js b/assets/js/app.js
index aa7bf2520a..75c75f02df 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -18,7 +18,7 @@ import googleAnalytics from "./google-analytics";
 import googleTranslate from "./google-translate";
 import juxtapose from "./juxtapose";
 import { MapHooks } from "maplibrex"
-import StopMarkers from "./maplibrex-stop-markers";
+import IconMarkers from "./maplibrex-icon-markers";
 import modal from "./modal";
 import photoGallery from "./photo-gallery";
 import pslPageSetup from "./psl-page-setup.js";
@@ -50,7 +50,7 @@ import storageOptions from "./storage.js";
 
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { ...DotcomHooks, ...MapHooks, Map, StopMarkers },
+  hooks: { ...DotcomHooks, ...MapHooks, Map, IconMarkers },
   dom: {
     onBeforeElUpdated(from, to) {
       /*
diff --git a/assets/js/maplibrex-stop-markers.js b/assets/js/maplibrex-icon-markers.js
similarity index 77%
rename from assets/js/maplibrex-stop-markers.js
rename to assets/js/maplibrex-icon-markers.js
index a123bf38a2..358b5788cb 100644
--- a/assets/js/maplibrex-stop-markers.js
+++ b/assets/js/maplibrex-icon-markers.js
@@ -6,10 +6,13 @@ import { MapManager } from "maplibrex";
  *
  * Set `data-map-id` to the id of the map. Each child with a
  * `data-coordinates` attribute (JSON `[lng, lat]`) becomes a marker, using a
- * clone of that child as the marker element. The optional `data-popup`
- * attribute is the HTML for a popup that opens when the marker is clicked.
+ * clone of that child as the marker element. Optional attributes on each child:
+ *
+ *   - `data-anchor`: marker anchor, e.g. "center" (default) or "bottom"
+ *   - `data-rotation`: marker rotation in degrees
+ *   - `data-popup`: HTML for a popup that opens when the marker is clicked
  */
-const StopMarkers = {
+const IconMarkers = {
   mounted() {
     this.markers = [];
     this.renderMarkers();
@@ -40,6 +43,7 @@ const StopMarkers = {
 
       const marker = new maplibregl.Marker({
         anchor: source.getAttribute("data-anchor") || "center",
+        rotation: Number(source.getAttribute("data-rotation")) || 0,
         element: source.cloneNode(true)
       }).setLngLat(coordinates);
 
@@ -59,4 +63,4 @@ const StopMarkers = {
   }
 };
 
-export default StopMarkers;
+export default IconMarkers;
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 12fec5858d..97b490e049 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -663,25 +663,45 @@ defmodule DotcomWeb.LineDiagramLive do
       }
     />
 
-    <div id="new-map-stops" phx-hook="StopMarkers" data-map-id="new-map" class="hidden">
+    <.icon_markers id="new-map-stops" map_id="new-map" icons={@map_icons} />
+    """
+  end
+
+  attr :id, :string, required: true
+  attr :map_id, :string, required: true, doc: "The id of the MaplibreX map to add the icons to"
+
+  attr :icons, :list,
+    required: true,
+    doc:
+      "Maps with `:coordinates`, `:type`, `:name`, and optionally `:class`, `:anchor`, `:rotation`, `:popup`"
+
+  defp icon_markers(assigns) do
+    ~H"""
+    <div id={@id} phx-hook="IconMarkers" data-map-id={@map_id} class="hidden">
       <.icon
-        :for={icon <- @map_icons}
+        :for={icon <- @icons}
         type={icon.type}
         name={icon.name}
-        class={icon.class}
+        class={Map.get(icon, :class)}
         data-coordinates={Jason.encode!(icon.coordinates)}
-        data-popup={render_popup(icon.popup)}
+        data-anchor={Map.get(icon, :anchor, "center")}
+        data-rotation={Map.get(icon, :rotation, 0)}
+        data-popup={icon |> Map.get(:popup) |> render_popup()}
       />
     </div>
     """
   end
 
+  defp render_popup(nil), do: nil
+
   defp render_popup(%Phoenix.LiveView.Rendered{} = heex) do
     heex
     |> Phoenix.HTML.Safe.to_iodata()
     |> IO.iodata_to_binary()
   end
 
+  defp render_popup(html), do: html
+
   # `line-sort-key` draws wider features (outlines) first, since higher keys draw on top, so route colors sit on top.
   defp map_lines_to_feature_collection(map_lines) do
     %{

From dbd94092e9dc65baa02cbaf001e7993c0f6370f2 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 14:22:01 -0400
Subject: [PATCH 07/24] feat(robot): Add zoom-to-fit

---
 lib/dotcom_web/live/line_diagram_live.ex | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 97b490e049..a19ff576d5 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -648,6 +648,17 @@ defmodule DotcomWeb.LineDiagramLive do
       class="h-96 w-full"
     />
 
+    <%!-- `phx-mounted` runs once when the element is added, not on later updates, so this fits on page load only --%>
+    <div
+      :if={Enum.any?(@map_icons)}
+      phx-mounted={
+        MaplibreX.Components.Map.fit_bounds("new-map", icons_to_bounds(@map_icons),
+          padding: 50,
+          max_zoom: 16
+        )
+      }
+    />
+
     <MaplibreX.Components.geojson_layer
       id="new-map-lines"
       map_id="new-map"
@@ -667,6 +678,12 @@ defmodule DotcomWeb.LineDiagramLive do
     """
   end
 
+  defp icons_to_bounds(icons) do
+    {lngs, lats} = icons |> Enum.map(&List.to_tuple(&1.coordinates)) |> Enum.unzip()
+
+    [[Enum.min(lngs), Enum.min(lats)], [Enum.max(lngs), Enum.max(lats)]]
+  end
+
   attr :id, :string, required: true
   attr :map_id, :string, required: true, doc: "The id of the MaplibreX map to add the icons to"
 

From 843d46843cd499f70ea8b08318b319c0a0451093 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 14:31:58 -0400
Subject: [PATCH 08/24] feat(robot): Add vehicle icons

---
 lib/dotcom_web/live/line_diagram_live.ex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index a19ff576d5..3b6ce519b4 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -675,6 +675,7 @@ defmodule DotcomWeb.LineDiagramLive do
     />
 
     <.icon_markers id="new-map-stops" map_id="new-map" icons={@map_icons} />
+    <.icon_markers id="new-map-vehicles" map_id="new-map" icons={@vehicle_icons} />
     """
   end
 

From 43a724335d31b7e68e8b4fb3235818dd4ffcf195 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 14:57:04 -0400
Subject: [PATCH 09/24] feat(robot): Keep popups open when vehicles move

---
 assets/js/maplibrex-icon-markers.js      | 78 +++++++++++++++++-------
 lib/dotcom_web/live/line_diagram_live.ex |  5 +-
 2 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/assets/js/maplibrex-icon-markers.js b/assets/js/maplibrex-icon-markers.js
index 358b5788cb..6ddbc571a9 100644
--- a/assets/js/maplibrex-icon-markers.js
+++ b/assets/js/maplibrex-icon-markers.js
@@ -8,13 +8,16 @@ import { MapManager } from "maplibrex";
  * `data-coordinates` attribute (JSON `[lng, lat]`) becomes a marker, using a
  * clone of that child as the marker element. Optional attributes on each child:
  *
+ *   - `data-marker-id`: stable id for the marker. When the hook updates, markers
+ *     with the same id are moved in place (keeping any open popup), new ids are
+ *     added, and missing ids are removed. Defaults to the child's position.
  *   - `data-anchor`: marker anchor, e.g. "center" (default) or "bottom"
  *   - `data-rotation`: marker rotation in degrees
  *   - `data-popup`: HTML for a popup that opens when the marker is clicked
  */
 const IconMarkers = {
   mounted() {
-    this.markers = [];
+    this.markers = new Map();
     this.renderMarkers();
   },
 
@@ -23,43 +26,76 @@ const IconMarkers = {
   },
 
   destroyed() {
-    this.removeMarkers();
-  },
-
-  removeMarkers() {
-    this.markers.forEach(marker => marker.remove());
-    this.markers = [];
+    this.markers.forEach(({ marker }) => marker.remove());
+    this.markers.clear();
   },
 
   renderMarkers() {
-    this.removeMarkers();
-
     const map = MapManager.get(this.el.dataset.mapId);
     if (!map) return;
 
-    this.el.querySelectorAll("[data-coordinates]").forEach(source => {
+    const seen = new Set();
+
+    this.el.querySelectorAll("[data-coordinates]").forEach((source, index) => {
       const coordinates = JSON.parse(source.getAttribute("data-coordinates"));
       if (coordinates.length !== 2) return;
 
+      const id = source.getAttribute("data-marker-id") || `index-${index}`;
+      seen.add(id);
+
+      const rotation = Number(source.getAttribute("data-rotation")) || 0;
+      const popupHtml = source.getAttribute("data-popup");
+      const existing = this.markers.get(id);
+
+      if (existing) {
+        existing.marker.setLngLat(coordinates).setRotation(rotation);
+        this.updatePopup(existing, popupHtml);
+        return;
+      }
+
       const marker = new maplibregl.Marker({
         anchor: source.getAttribute("data-anchor") || "center",
-        rotation: Number(source.getAttribute("data-rotation")) || 0,
+        rotation,
         element: source.cloneNode(true)
       }).setLngLat(coordinates);
 
-      const popupHtml = source.getAttribute("data-popup");
-      if (popupHtml) {
-        marker.setPopup(
-          new maplibregl.Popup({
-            className: "m-schedule-line__stop-popup",
-            focusAfterOpen: false
-          }).setHTML(popupHtml)
-        );
-      }
+      const entry = { marker, popup: null, popupHtml: null };
+      this.updatePopup(entry, popupHtml);
 
       marker.addTo(map);
-      this.markers.push(marker);
+      this.markers.set(id, entry);
     });
+
+    this.markers.forEach((entry, id) => {
+      if (!seen.has(id)) {
+        entry.marker.remove();
+        this.markers.delete(id);
+      }
+    });
+  },
+
+  updatePopup(entry, popupHtml) {
+    if (!popupHtml) {
+      if (entry.popup) {
+        entry.marker.setPopup(null);
+        entry.popup = null;
+        entry.popupHtml = null;
+      }
+      return;
+    }
+
+    if (!entry.popup) {
+      entry.popup = new maplibregl.Popup({
+        className: "m-schedule-line__stop-popup",
+        focusAfterOpen: false
+      });
+      entry.marker.setPopup(entry.popup);
+    }
+
+    if (entry.popupHtml !== popupHtml) {
+      entry.popup.setHTML(popupHtml);
+      entry.popupHtml = popupHtml;
+    }
   }
 };
 
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 3b6ce519b4..e20cc6d55a 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -292,6 +292,7 @@ defmodule DotcomWeb.LineDiagramLive do
     popup = vehicle_popup(%{route: route, vehicle_info: vehicle_info, vehicle: vehicle})
 
     %{
+      id: vehicle.id,
       coordinates: [vehicle.longitude, vehicle.latitude],
       type: "icon-svg",
       name: "icon-vehicle-bordered-expanded",
@@ -576,6 +577,7 @@ defmodule DotcomWeb.LineDiagramLive do
       stops
       |> Enum.map(
         &%{
+          id: &1.id,
           coordinates: [&1.longitude, &1.latitude],
           type: "icon-svg",
           name: "icon-stop-circle-bordered-expanded",
@@ -691,7 +693,7 @@ defmodule DotcomWeb.LineDiagramLive do
   attr :icons, :list,
     required: true,
     doc:
-      "Maps with `:coordinates`, `:type`, `:name`, and optionally `:class`, `:anchor`, `:rotation`, `:popup`"
+      "Maps with `:coordinates`, `:type`, `:name`, and optionally `:id`, `:class`, `:anchor`, `:rotation`, `:popup`"
 
   defp icon_markers(assigns) do
     ~H"""
@@ -702,6 +704,7 @@ defmodule DotcomWeb.LineDiagramLive do
         name={icon.name}
         class={Map.get(icon, :class)}
         data-coordinates={Jason.encode!(icon.coordinates)}
+        data-marker-id={Map.get(icon, :id)}
         data-anchor={Map.get(icon, :anchor, "center")}
         data-rotation={Map.get(icon, :rotation, 0)}
         data-popup={icon |> Map.get(:popup) |> render_popup()}

From 346409ce99adc75d0a019efdc21243e789f4f182 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 15:59:43 -0400
Subject: [PATCH 10/24] refactor(robot): Migrate new phoenix hook to typescript

---
 assets/js/app.js                        |   3 +-
 assets/js/maplibrex-icon-markers.js     | 102 -------------------
 assets/ts/phoenix-hooks/icon-markers.ts | 125 ++++++++++++++++++++++++
 assets/ts/phoenix-hooks/index.ts        |   2 +
 4 files changed, 128 insertions(+), 104 deletions(-)
 delete mode 100644 assets/js/maplibrex-icon-markers.js
 create mode 100644 assets/ts/phoenix-hooks/icon-markers.ts

diff --git a/assets/js/app.js b/assets/js/app.js
index 75c75f02df..b324bb6174 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -18,7 +18,6 @@ import googleAnalytics from "./google-analytics";
 import googleTranslate from "./google-translate";
 import juxtapose from "./juxtapose";
 import { MapHooks } from "maplibrex"
-import IconMarkers from "./maplibrex-icon-markers";
 import modal from "./modal";
 import photoGallery from "./photo-gallery";
 import pslPageSetup from "./psl-page-setup.js";
@@ -50,7 +49,7 @@ import storageOptions from "./storage.js";
 
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { ...DotcomHooks, ...MapHooks, Map, IconMarkers },
+  hooks: { ...DotcomHooks, ...MapHooks, Map },
   dom: {
     onBeforeElUpdated(from, to) {
       /*
diff --git a/assets/js/maplibrex-icon-markers.js b/assets/js/maplibrex-icon-markers.js
deleted file mode 100644
index 6ddbc571a9..0000000000
--- a/assets/js/maplibrex-icon-markers.js
+++ /dev/null
@@ -1,102 +0,0 @@
-import maplibregl from "maplibre-gl";
-import { MapManager } from "maplibrex";
-
-/**
- * Hook that places custom HTML elements on a MaplibreX map.
- *
- * Set `data-map-id` to the id of the map. Each child with a
- * `data-coordinates` attribute (JSON `[lng, lat]`) becomes a marker, using a
- * clone of that child as the marker element. Optional attributes on each child:
- *
- *   - `data-marker-id`: stable id for the marker. When the hook updates, markers
- *     with the same id are moved in place (keeping any open popup), new ids are
- *     added, and missing ids are removed. Defaults to the child's position.
- *   - `data-anchor`: marker anchor, e.g. "center" (default) or "bottom"
- *   - `data-rotation`: marker rotation in degrees
- *   - `data-popup`: HTML for a popup that opens when the marker is clicked
- */
-const IconMarkers = {
-  mounted() {
-    this.markers = new Map();
-    this.renderMarkers();
-  },
-
-  updated() {
-    this.renderMarkers();
-  },
-
-  destroyed() {
-    this.markers.forEach(({ marker }) => marker.remove());
-    this.markers.clear();
-  },
-
-  renderMarkers() {
-    const map = MapManager.get(this.el.dataset.mapId);
-    if (!map) return;
-
-    const seen = new Set();
-
-    this.el.querySelectorAll("[data-coordinates]").forEach((source, index) => {
-      const coordinates = JSON.parse(source.getAttribute("data-coordinates"));
-      if (coordinates.length !== 2) return;
-
-      const id = source.getAttribute("data-marker-id") || `index-${index}`;
-      seen.add(id);
-
-      const rotation = Number(source.getAttribute("data-rotation")) || 0;
-      const popupHtml = source.getAttribute("data-popup");
-      const existing = this.markers.get(id);
-
-      if (existing) {
-        existing.marker.setLngLat(coordinates).setRotation(rotation);
-        this.updatePopup(existing, popupHtml);
-        return;
-      }
-
-      const marker = new maplibregl.Marker({
-        anchor: source.getAttribute("data-anchor") || "center",
-        rotation,
-        element: source.cloneNode(true)
-      }).setLngLat(coordinates);
-
-      const entry = { marker, popup: null, popupHtml: null };
-      this.updatePopup(entry, popupHtml);
-
-      marker.addTo(map);
-      this.markers.set(id, entry);
-    });
-
-    this.markers.forEach((entry, id) => {
-      if (!seen.has(id)) {
-        entry.marker.remove();
-        this.markers.delete(id);
-      }
-    });
-  },
-
-  updatePopup(entry, popupHtml) {
-    if (!popupHtml) {
-      if (entry.popup) {
-        entry.marker.setPopup(null);
-        entry.popup = null;
-        entry.popupHtml = null;
-      }
-      return;
-    }
-
-    if (!entry.popup) {
-      entry.popup = new maplibregl.Popup({
-        className: "m-schedule-line__stop-popup",
-        focusAfterOpen: false
-      });
-      entry.marker.setPopup(entry.popup);
-    }
-
-    if (entry.popupHtml !== popupHtml) {
-      entry.popup.setHTML(popupHtml);
-      entry.popupHtml = popupHtml;
-    }
-  }
-};
-
-export default IconMarkers;
diff --git a/assets/ts/phoenix-hooks/icon-markers.ts b/assets/ts/phoenix-hooks/icon-markers.ts
new file mode 100644
index 0000000000..edf4e3c85a
--- /dev/null
+++ b/assets/ts/phoenix-hooks/icon-markers.ts
@@ -0,0 +1,125 @@
+import maplibregl from "maplibre-gl";
+import { MapManager } from "maplibrex";
+import { ViewHook } from "phoenix_live_view";
+
+interface MarkerEntry {
+  marker: maplibregl.Marker;
+  popup: maplibregl.Popup | null;
+  popupHtml: string | null;
+}
+
+interface IconMarkersHook extends ViewHook {
+  markers: Map<string, MarkerEntry>;
+  renderMarkers(): void;
+  updatePopup(entry: MarkerEntry, popupHtml: string | null): void;
+}
+
+/**
+ * Hook that places custom HTML elements on a MaplibreX map.
+ *
+ * Set `data-map-id` to the id of the map. Each child with a
+ * `data-coordinates` attribute (JSON `[lng, lat]`) becomes a marker, using a
+ * clone of that child as the marker element. Optional attributes on each child:
+ *
+ *   - `data-marker-id`: stable id for the marker. When the hook updates, markers
+ *     with the same id are moved in place (keeping any open popup), new ids are
+ *     added, and missing ids are removed. Defaults to the child's position.
+ *   - `data-anchor`: marker anchor, e.g. "center" (default) or "bottom"
+ *   - `data-rotation`: marker rotation in degrees
+ *   - `data-popup`: HTML for a popup that opens when the marker is clicked
+ */
+const IconMarkers: Partial<IconMarkersHook> = {
+  mounted(this: IconMarkersHook) {
+    this.markers = new Map();
+    this.renderMarkers();
+  },
+
+  updated(this: IconMarkersHook) {
+    this.renderMarkers();
+  },
+
+  destroyed(this: IconMarkersHook) {
+    this.markers.forEach(({ marker }) => marker.remove());
+    this.markers.clear();
+  },
+
+  renderMarkers(this: IconMarkersHook) {
+    const map = MapManager.get(this.el.dataset.mapId || "");
+    if (!map) return;
+
+    const seen = new Set<string>();
+
+    this.el
+      .querySelectorAll("[data-coordinates]")
+      .forEach((source: Element, index: number) => {
+        const coordinates: number[] = JSON.parse(
+          source.getAttribute("data-coordinates") || "[]"
+        );
+        if (coordinates.length !== 2) return;
+
+        const id = source.getAttribute("data-marker-id") || `index-${index}`;
+        seen.add(id);
+
+        const lngLat = coordinates as [number, number];
+        const rotation = Number(source.getAttribute("data-rotation")) || 0;
+        const popupHtml = source.getAttribute("data-popup");
+        const existing = this.markers.get(id);
+
+        if (existing) {
+          existing.marker.setLngLat(lngLat).setRotation(rotation);
+          this.updatePopup(existing, popupHtml);
+          return;
+        }
+
+        const marker = new maplibregl.Marker({
+          anchor: (source.getAttribute("data-anchor") ||
+            "center") as maplibregl.PositionAnchor,
+          rotation,
+          element: source.cloneNode(true) as HTMLElement
+        }).setLngLat(lngLat);
+
+        const entry: MarkerEntry = { marker, popup: null, popupHtml: null };
+        this.updatePopup(entry, popupHtml);
+
+        marker.addTo(map);
+        this.markers.set(id, entry);
+      });
+
+    this.markers.forEach((entry, id) => {
+      if (!seen.has(id)) {
+        entry.marker.remove();
+        this.markers.delete(id);
+      }
+    });
+  },
+
+  updatePopup(
+    this: IconMarkersHook,
+    entry: MarkerEntry,
+    popupHtml: string | null
+  ) {
+    if (!popupHtml) {
+      if (entry.popup) {
+        entry.marker.setPopup(null);
+        entry.popup = null;
+        entry.popupHtml = null;
+      }
+      return;
+    }
+
+    if (!entry.popup) {
+      entry.popup = new maplibregl.Popup({
+        className: "m-schedule-line__stop-popup",
+        focusAfterOpen: false
+      });
+      entry.marker.setPopup(entry.popup);
+    }
+
+    if (entry.popupHtml !== popupHtml) {
+      entry.popup.setHTML(popupHtml);
+      entry.popupHtml = popupHtml;
+    }
+  }
+};
+
+export default IconMarkers;
diff --git a/assets/ts/phoenix-hooks/index.ts b/assets/ts/phoenix-hooks/index.ts
index df01aeec84..48f0d4625e 100644
--- a/assets/ts/phoenix-hooks/index.ts
+++ b/assets/ts/phoenix-hooks/index.ts
@@ -1,4 +1,5 @@
 import AlgoliaAutocomplete from "./algolia-autocomplete";
+import IconMarkers from "./icon-markers";
 import MBTAGoCTABanner from "./mbta-go-cta-banner";
 import MenuButton from "./menu-button";
 import PageVisibility from "./page-visibility";
@@ -19,6 +20,7 @@ import TripPlannerDatePicker from "../../js/trip-planner/datepicker";
  */
 const Hooks = {
   AlgoliaAutocomplete,
+  IconMarkers,
   MBTAGoCTABanner,
   MenuButton,
   PageVisibility,

From 501245869e6c895d479e4701e2be29fc374f1e16 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 16:00:13 -0400
Subject: [PATCH 11/24] chore(robot): Add tests

---
 .../__tests__/icon-markers-test.ts            | 249 ++++++++++++++++++
 .../live/line_diagram_live_test.exs           | 111 ++++++++
 2 files changed, 360 insertions(+)
 create mode 100644 assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts

diff --git a/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts b/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts
new file mode 100644
index 0000000000..ef9d0b6ab8
--- /dev/null
+++ b/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts
@@ -0,0 +1,249 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import { MapManager } from "maplibrex";
+
+const mockCreated: MockMarker[] = [];
+
+class MockPopup {
+  options: object;
+  html: string | null = null;
+
+  constructor(options: object) {
+    this.options = options;
+  }
+
+  setHTML(html: string): this {
+    this.html = html;
+    return this;
+  }
+}
+
+class MockMarker {
+  options: { rotation: number; anchor: string; element: HTMLElement };
+  element: HTMLElement;
+  lngLat: number[] | null = null;
+  rotation: number;
+  popup: MockPopup | null = null;
+  added = false;
+  removed = false;
+
+  constructor(options: {
+    rotation: number;
+    anchor: string;
+    element: HTMLElement;
+  }) {
+    this.options = options;
+    this.element = options.element;
+    this.rotation = options.rotation;
+    mockCreated.push(this);
+  }
+
+  setLngLat(lngLat: number[]): this {
+    this.lngLat = lngLat;
+    return this;
+  }
+
+  setRotation(rotation: number): this {
+    this.rotation = rotation;
+    return this;
+  }
+
+  setPopup(popup: MockPopup | null): this {
+    this.popup = popup;
+    return this;
+  }
+
+  addTo(): this {
+    this.added = true;
+    return this;
+  }
+
+  remove(): this {
+    this.removed = true;
+    return this;
+  }
+}
+
+// The factories run when the hook is first required, after the classes above exist.
+jest.mock("maplibre-gl", () => ({
+  Marker: MockMarker,
+  Popup: MockPopup
+}));
+
+jest.mock("maplibrex", () => ({ MapManager: { get: jest.fn() } }), {
+  virtual: true
+});
+
+interface IconOptions {
+  id?: string;
+  coordinates: number[];
+  rotation?: string;
+  popup?: string;
+}
+
+const icon = ({
+  id,
+  coordinates,
+  rotation,
+  popup
+}: IconOptions): HTMLElement => {
+  const el = document.createElement("span");
+  el.setAttribute("data-coordinates", JSON.stringify(coordinates));
+  if (id !== undefined) el.setAttribute("data-marker-id", id);
+  if (rotation !== undefined) el.setAttribute("data-rotation", rotation);
+  if (popup !== undefined) el.setAttribute("data-popup", popup);
+  return el;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type Hook = any;
+
+describe("IconMarkers hook", () => {
+  const IconMarkers = require("../icon-markers").default;
+  let hook: Hook;
+
+  const setIcons = (icons: IconOptions[]): void => {
+    hook.el.innerHTML = "";
+    icons.forEach(i => hook.el.appendChild(icon(i)));
+  };
+
+  beforeEach(() => {
+    mockCreated.length = 0;
+    (MapManager.get as jest.Mock).mockImplementation((id: string) =>
+      id === "map" ? {} : undefined
+    );
+    const el = document.createElement("div");
+    el.dataset.mapId = "map";
+    hook = Object.assign(Object.create(IconMarkers), { el });
+  });
+
+  it("adds a marker for each icon, with rotation and popup", () => {
+    setIcons([
+      { id: "a", coordinates: [-71, 42], rotation: "90", popup: "<b>A</b>" },
+      { id: "b", coordinates: [-72, 43] }
+    ]);
+
+    hook.mounted();
+
+    expect(mockCreated).toHaveLength(2);
+    expect(mockCreated[0].lngLat).toEqual([-71, 42]);
+    expect(mockCreated[0].options.rotation).toBe(90);
+    expect(mockCreated[0].options.anchor).toBe("center");
+    expect(mockCreated[0].popup!.html).toBe("<b>A</b>");
+    expect(mockCreated[0].added).toBe(true);
+    expect(mockCreated[1].popup).toBeNull();
+    expect(mockCreated[1].options.rotation).toBe(0);
+  });
+
+  it("clones the source element instead of moving it", () => {
+    setIcons([{ id: "a", coordinates: [-71, 42] }]);
+
+    hook.mounted();
+
+    expect(mockCreated[0].element).not.toBe(hook.el.firstChild);
+    expect(hook.el.children).toHaveLength(1);
+  });
+
+  it("does nothing if the map is not registered", () => {
+    hook.el.dataset.mapId = "missing";
+    setIcons([{ id: "a", coordinates: [-71, 42] }]);
+
+    hook.mounted();
+
+    expect(mockCreated).toHaveLength(0);
+  });
+
+  it("skips icons without a [lng, lat] pair", () => {
+    setIcons([{ id: "a", coordinates: [-71] }]);
+
+    hook.mounted();
+
+    expect(mockCreated).toHaveLength(0);
+  });
+
+  describe("updated", () => {
+    it("moves and rotates existing markers in place", () => {
+      setIcons([{ id: "a", coordinates: [-71, 42], rotation: "10" }]);
+      hook.mounted();
+
+      setIcons([{ id: "a", coordinates: [-70, 41], rotation: "20" }]);
+      hook.updated();
+
+      expect(mockCreated).toHaveLength(1);
+      expect(mockCreated[0].removed).toBe(false);
+      expect(mockCreated[0].lngLat).toEqual([-70, 41]);
+      expect(mockCreated[0].rotation).toBe(20);
+    });
+
+    it("adds new ids and removes missing ids", () => {
+      setIcons([
+        { id: "a", coordinates: [-71, 42] },
+        { id: "b", coordinates: [-72, 43] }
+      ]);
+      hook.mounted();
+
+      setIcons([
+        { id: "b", coordinates: [-72, 43] },
+        { id: "c", coordinates: [-73, 44] }
+      ]);
+      hook.updated();
+
+      expect(mockCreated).toHaveLength(3);
+      expect(mockCreated[0].removed).toBe(true);
+      expect(mockCreated[1].removed).toBe(false);
+      expect(mockCreated[2].lngLat).toEqual([-73, 44]);
+    });
+
+    it("keeps the same popup and only replaces changed HTML", () => {
+      setIcons([{ id: "a", coordinates: [-71, 42], popup: "one" }]);
+      hook.mounted();
+      const popup = mockCreated[0].popup!;
+      const setHTML = jest.spyOn(popup, "setHTML");
+
+      setIcons([{ id: "a", coordinates: [-71, 42], popup: "one" }]);
+      hook.updated();
+      expect(setHTML).not.toHaveBeenCalled();
+
+      setIcons([{ id: "a", coordinates: [-71, 42], popup: "two" }]);
+      hook.updated();
+      expect(mockCreated[0].popup).toBe(popup);
+      expect(popup.html).toBe("two");
+    });
+
+    it("adds and removes popups as data-popup changes", () => {
+      setIcons([{ id: "a", coordinates: [-71, 42] }]);
+      hook.mounted();
+      expect(mockCreated[0].popup).toBeNull();
+
+      setIcons([{ id: "a", coordinates: [-71, 42], popup: "hi" }]);
+      hook.updated();
+      expect(mockCreated[0].popup!.html).toBe("hi");
+
+      setIcons([{ id: "a", coordinates: [-71, 42] }]);
+      hook.updated();
+      expect(mockCreated[0].popup).toBeNull();
+    });
+
+    it("falls back to position when there are no ids", () => {
+      setIcons([{ coordinates: [-71, 42] }]);
+      hook.mounted();
+
+      setIcons([{ coordinates: [-70, 41] }]);
+      hook.updated();
+
+      expect(mockCreated).toHaveLength(1);
+      expect(mockCreated[0].lngLat).toEqual([-70, 41]);
+    });
+  });
+
+  it("removes every marker when destroyed", () => {
+    setIcons([
+      { id: "a", coordinates: [-71, 42] },
+      { id: "b", coordinates: [-72, 43] }
+    ]);
+    hook.mounted();
+
+    hook.destroyed();
+
+    expect(mockCreated.every(marker => marker.removed)).toBe(true);
+  });
+});
diff --git a/test/dotcom_web/live/line_diagram_live_test.exs b/test/dotcom_web/live/line_diagram_live_test.exs
index 89036bbc53..1f8082248f 100644
--- a/test/dotcom_web/live/line_diagram_live_test.exs
+++ b/test/dotcom_web/live/line_diagram_live_test.exs
@@ -92,6 +92,117 @@ defmodule DotcomWeb.LineDiagramLiveTest do
     assert label(view) =~ "All variants"
   end
 
+  describe "new map" do
+    defp new_map_html(view) do
+      view |> render() |> Floki.parse_document!()
+    end
+
+    test "renders a marker for each stop with a popup, and fits to them", %{
+      conn: conn,
+      route: route,
+      pattern_a: a
+    } do
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new?variant=#{a.id}")
+
+      stops = view |> new_map_html() |> Floki.find("#new-map-stops [data-coordinates]")
+
+      assert length(stops) == length(Enum.uniq(a.stop_ids))
+      assert has_element?(view, ~s|#new-map-stops[phx-hook="IconMarkers"][data-map-id="new-map"]|)
+
+      for stop <- stops do
+        assert [_] = Floki.attribute(stop, "data-marker-id")
+        assert [popup] = Floki.attribute(stop, "data-popup")
+        assert popup =~ "popup-title"
+      end
+
+      assert [mounted] = view |> new_map_html() |> Floki.attribute("[phx-mounted]", "phx-mounted")
+      assert mounted =~ "maplibrex:fit_bounds"
+      assert mounted =~ ~s|"padding":50|
+    end
+
+    test "renders the route lines as a single layer", %{conn: conn, route: route} do
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
+
+      assert [config] =
+               view |> new_map_html() |> Floki.attribute("#new-map-lines", "data-config")
+
+      assert %{"source" => %{"data" => %{"type" => "FeatureCollection", "features" => features}}} =
+               Jason.decode!(config)
+
+      assert Enum.all?(features, &(&1["geometry"]["type"] == "LineString"))
+      assert Enum.any?(features, &(&1["properties"]["color"] == "#000000"))
+    end
+
+    test "renders vehicle markers with their bearing", %{conn: conn, route: route} do
+      vehicle =
+        Factories.Vehicles.Vehicle.build(:vehicle, %{
+          route_id: route.id,
+          latitude: 42.35,
+          longitude: -71.06,
+          bearing: 90
+        })
+
+      stub(Vehicles.Repo.Mock, :route, fn _, _ -> [vehicle] end)
+
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
+
+      assert [marker] =
+               view |> new_map_html() |> Floki.find("#new-map-vehicles [data-coordinates]")
+
+      assert Floki.attribute(marker, "data-marker-id") == [vehicle.id]
+      assert Floki.attribute(marker, "data-rotation") == ["90"]
+      assert Floki.attribute(marker, "data-coordinates") == ["[-71.06,42.35]"]
+    end
+
+    test "updates vehicle markers when a vehicle moves", %{conn: conn, route: route} do
+      vehicle =
+        Factories.Vehicles.Vehicle.build(:vehicle, %{
+          route_id: route.id,
+          latitude: 42.35,
+          longitude: -71.06,
+          bearing: 90
+        })
+
+      stub(Vehicles.Repo.Mock, :route, fn _, _ -> [vehicle] end)
+
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
+
+      send(view.pid, %Phoenix.Socket.Broadcast{
+        topic: "vehicles-v2:#{route.id}:1",
+        event: "update",
+        payload: %{data: [%{vehicle | latitude: 42.4, longitude: -71.1, bearing: 180}]}
+      })
+
+      assert [marker] =
+               view |> new_map_html() |> Floki.find("#new-map-vehicles [data-coordinates]")
+
+      assert Floki.attribute(marker, "data-marker-id") == [vehicle.id]
+      assert Floki.attribute(marker, "data-rotation") == ["180"]
+      assert Floki.attribute(marker, "data-coordinates") == ["[-71.1,42.4]"]
+    end
+
+    test "defaults the rotation to 0 when a vehicle has no bearing", %{
+      conn: conn,
+      route: route
+    } do
+      vehicle =
+        Factories.Vehicles.Vehicle.build(:vehicle, %{
+          route_id: route.id,
+          latitude: 42.35,
+          longitude: -71.06,
+          bearing: nil
+        })
+
+      stub(Vehicles.Repo.Mock, :route, fn _, _ -> [vehicle] end)
+
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
+
+      assert view
+             |> new_map_html()
+             |> Floki.attribute("#new-map-vehicles [data-coordinates]", "data-rotation") == ["0"]
+    end
+  end
+
   describe "variant map updates" do
     test "reuses loaded stops when switching variants", %{
       conn: conn,

From 79c4161272ed0bff1c005a2b112d752ca38e482b Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 16:03:46 -0400
Subject: [PATCH 12/24] feat(robot): Add controls

---
 lib/dotcom_web/live/line_diagram_live.ex | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index e20cc6d55a..1a54edf38a 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -650,6 +650,12 @@ defmodule DotcomWeb.LineDiagramLive do
       class="h-96 w-full"
     />
 
+    <MaplibreX.Components.navigation_control
+      id="new-map-navigation"
+      map_id="new-map"
+      position="top-left"
+    />
+
     <%!-- `phx-mounted` runs once when the element is added, not on later updates, so this fits on page load only --%>
     <div
       :if={Enum.any?(@map_icons)}

From 8759480503ad1a7ad2a83fa5ba84c6dc7bbd5776 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 16:14:31 -0400
Subject: [PATCH 13/24] fix(robot): Ensure that markers render in the right
 order

---
 assets/css/_schedule-line.scss                |  4 ++++
 assets/css/_variables.scss                    |  1 +
 .../__tests__/icon-markers-test.ts            | 22 +++++++++++++++++++
 assets/ts/phoenix-hooks/icon-markers.ts       |  9 ++++++--
 lib/dotcom_web/live/line_diagram_live.ex      | 16 +++++++++++---
 .../live/line_diagram_live_test.exs           | 11 ++++++++++
 6 files changed, 58 insertions(+), 5 deletions(-)

diff --git a/assets/css/_schedule-line.scss b/assets/css/_schedule-line.scss
index 8d7890f794..5d966826f5 100644
--- a/assets/css/_schedule-line.scss
+++ b/assets/css/_schedule-line.scss
@@ -40,6 +40,10 @@
 }
 
 .m-schedule-line__stop-popup {
+  // Must stay above the z-index set on marker groups (see `z_index` on `icon_markers`)
+  // and below the nav menu veil (`$z-index-desktop-menu`)
+  z-index: $z-index-map-popup;
+
   .maplibregl-popup-content {
     background-color: $black;
     color: $white;
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index 4155e5b3dc..f4c5f20d0f 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -123,6 +123,7 @@ $btn-padding-y: $base-spacing * .6;
 
 $z-index-modal: 101;
 $z-index-desktop-menu: 100;
+$z-index-map-popup: 50; // Above all in-page content, below the nav menu and its veil
 $z-index-above-leaflet: 23;
 $z-index-leaflet-level-8: 21;
 $z-index-leaflet-level-7: 21;
diff --git a/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts b/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts
index ef9d0b6ab8..286a5f238b 100644
--- a/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts
+++ b/assets/ts/phoenix-hooks/__tests__/icon-markers-test.ts
@@ -134,6 +134,28 @@ describe("IconMarkers hook", () => {
     expect(mockCreated[1].options.rotation).toBe(0);
   });
 
+  it("applies data-z-index to marker elements, including ones added later", () => {
+    hook.el.dataset.zIndex = "2";
+    setIcons([{ id: "a", coordinates: [-71, 42] }]);
+    hook.mounted();
+
+    setIcons([
+      { id: "a", coordinates: [-71, 42] },
+      { id: "b", coordinates: [-72, 43] }
+    ]);
+    hook.updated();
+
+    expect(mockCreated.map(m => m.element.style.zIndex)).toEqual(["2", "2"]);
+  });
+
+  it("leaves z-index unset without data-z-index", () => {
+    setIcons([{ id: "a", coordinates: [-71, 42] }]);
+
+    hook.mounted();
+
+    expect(mockCreated[0].element.style.zIndex).toBe("");
+  });
+
   it("clones the source element instead of moving it", () => {
     setIcons([{ id: "a", coordinates: [-71, 42] }]);
 
diff --git a/assets/ts/phoenix-hooks/icon-markers.ts b/assets/ts/phoenix-hooks/icon-markers.ts
index edf4e3c85a..dea6f5b424 100644
--- a/assets/ts/phoenix-hooks/icon-markers.ts
+++ b/assets/ts/phoenix-hooks/icon-markers.ts
@@ -17,7 +17,9 @@ interface IconMarkersHook extends ViewHook {
 /**
  * Hook that places custom HTML elements on a MaplibreX map.
  *
- * Set `data-map-id` to the id of the map. Each child with a
+ * Set `data-map-id` to the id of the map. Set `data-z-index` to control how
+ * this group's markers stack against other marker groups on the same map
+ * (otherwise later-added markers draw on top). Each child with a
  * `data-coordinates` attribute (JSON `[lng, lat]`) becomes a marker, using a
  * clone of that child as the marker element. Optional attributes on each child:
  *
@@ -71,11 +73,14 @@ const IconMarkers: Partial<IconMarkersHook> = {
           return;
         }
 
+        const element = source.cloneNode(true) as HTMLElement;
+        if (this.el.dataset.zIndex) element.style.zIndex = this.el.dataset.zIndex;
+
         const marker = new maplibregl.Marker({
           anchor: (source.getAttribute("data-anchor") ||
             "center") as maplibregl.PositionAnchor,
           rotation,
-          element: source.cloneNode(true) as HTMLElement
+          element
         }).setLngLat(lngLat);
 
         const entry: MarkerEntry = { marker, popup: null, popupHtml: null };
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 1a54edf38a..d4f10a969e 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -682,8 +682,8 @@ defmodule DotcomWeb.LineDiagramLive do
       }
     />
 
-    <.icon_markers id="new-map-stops" map_id="new-map" icons={@map_icons} />
-    <.icon_markers id="new-map-vehicles" map_id="new-map" icons={@vehicle_icons} />
+    <.icon_markers id="new-map-stops" map_id="new-map" icons={@map_icons} z_index={1} />
+    <.icon_markers id="new-map-vehicles" map_id="new-map" icons={@vehicle_icons} z_index={2} />
     """
   end
 
@@ -701,9 +701,19 @@ defmodule DotcomWeb.LineDiagramLive do
     doc:
       "Maps with `:coordinates`, `:type`, `:name`, and optionally `:id`, `:class`, `:anchor`, `:rotation`, `:popup`"
 
+  attr :z_index, :integer,
+    default: nil,
+    doc: "Stacking order against other icon groups on the map; higher draws on top"
+
   defp icon_markers(assigns) do
     ~H"""
-    <div id={@id} phx-hook="IconMarkers" data-map-id={@map_id} class="hidden">
+    <div
+      id={@id}
+      phx-hook="IconMarkers"
+      data-map-id={@map_id}
+      data-z-index={@z_index}
+      class="hidden"
+    >
       <.icon
         :for={icon <- @icons}
         type={icon.type}
diff --git a/test/dotcom_web/live/line_diagram_live_test.exs b/test/dotcom_web/live/line_diagram_live_test.exs
index 1f8082248f..387f6f915a 100644
--- a/test/dotcom_web/live/line_diagram_live_test.exs
+++ b/test/dotcom_web/live/line_diagram_live_test.exs
@@ -120,6 +120,17 @@ defmodule DotcomWeb.LineDiagramLiveTest do
       assert mounted =~ ~s|"padding":50|
     end
 
+    test "stacks vehicle markers above stop markers", %{conn: conn, route: route} do
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
+
+      z_index = fn id ->
+        [value] = view |> new_map_html() |> Floki.attribute("##{id}", "data-z-index")
+        String.to_integer(value)
+      end
+
+      assert z_index.("new-map-vehicles") > z_index.("new-map-stops")
+    end
+
     test "renders the route lines as a single layer", %{conn: conn, route: route} do
       {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
 

From d9635e180213522090b8ddf2539d47cd01cc6de0 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 16:36:21 -0400
Subject: [PATCH 14/24] refactor(robot): Split the route shape into two layers
 (outline plus actual shape)

---
 lib/dotcom_web/live/line_diagram_live.ex      | 34 +++++++++++--------
 .../live/line_diagram_live_test.exs           | 21 +++++++++---
 2 files changed, 35 insertions(+), 20 deletions(-)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index d4f10a969e..69320aa27e 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -445,7 +445,8 @@ defmodule DotcomWeb.LineDiagramLive do
           <.new_map
             map_style={@map_config.style}
             route_patterns={@route_patterns}
-            map_lines={@map_lines}
+            map_route_shapes={@map_route_shapes}
+            route_color={"##{@route.color}"}
             map_icons={@map_icons}
             vehicle_icons={Map.values(@vehicle_icons)}
           />
@@ -570,6 +571,7 @@ defmodule DotcomWeb.LineDiagramLive do
 
     socket
     |> assign(:map_lines, map_lines)
+    |> assign(:map_route_shapes, map_line_shapes)
   end
 
   defp assign_map_icons(%{assigns: %{stops: stops}} = socket) do
@@ -668,18 +670,21 @@ defmodule DotcomWeb.LineDiagramLive do
     />
 
     <MaplibreX.Components.geojson_layer
-      id="new-map-lines"
+      id="new-map-lines-outline"
       map_id="new-map"
-      data={map_lines_to_feature_collection(@map_lines)}
+      data={map_shapes_to_feature_collection(@map_route_shapes)}
       type="line"
-      paint={%{"line-color" => ["get", "color"], "line-width" => ["get", "width"]}}
-      layout={
-        %{
-          "line-cap" => "round",
-          "line-join" => "round",
-          "line-sort-key" => ["-", 10, ["get", "width"]]
-        }
-      }
+      paint={%{"line-color" => "#000000", "line-width" => 6}}
+      layout={%{"line-cap" => "round", "line-join" => "round"}}
+    />
+
+    <%!-- Shares the source created by the outline layer above; added after it so it draws on top --%>
+    <MaplibreX.Components.line_layer
+      id="new-map-lines"
+      map_id="new-map"
+      source_id="new-map-lines-outline-source"
+      paint={%{"line-color" => @route_color, "line-width" => 4}}
+      layout={%{"line-cap" => "round", "line-join" => "round"}}
     />
 
     <.icon_markers id="new-map-stops" map_id="new-map" icons={@map_icons} z_index={1} />
@@ -739,15 +744,14 @@ defmodule DotcomWeb.LineDiagramLive do
 
   defp render_popup(html), do: html
 
-  # `line-sort-key` draws wider features (outlines) first, since higher keys draw on top, so route colors sit on top.
-  defp map_lines_to_feature_collection(map_lines) do
+  defp map_shapes_to_feature_collection(shapes) do
     %{
       "type" => "FeatureCollection",
       "features" =>
-        Enum.map(map_lines, fn %{coordinates: coordinates, color: color, width: width} ->
+        Enum.map(shapes, fn %{coordinates: coordinates} ->
           %{
             "type" => "Feature",
-            "properties" => %{"color" => color, "width" => width},
+            "properties" => %{},
             "geometry" => %{"type" => "LineString", "coordinates" => coordinates}
           }
         end)
diff --git a/test/dotcom_web/live/line_diagram_live_test.exs b/test/dotcom_web/live/line_diagram_live_test.exs
index 387f6f915a..b67cf0bd43 100644
--- a/test/dotcom_web/live/line_diagram_live_test.exs
+++ b/test/dotcom_web/live/line_diagram_live_test.exs
@@ -131,17 +131,28 @@ defmodule DotcomWeb.LineDiagramLiveTest do
       assert z_index.("new-map-vehicles") > z_index.("new-map-stops")
     end
 
-    test "renders the route lines as a single layer", %{conn: conn, route: route} do
+    test "renders an outline layer and a route layer sharing one source", %{
+      conn: conn,
+      route: route
+    } do
       {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
+      html = new_map_html(view)
 
-      assert [config] =
-               view |> new_map_html() |> Floki.attribute("#new-map-lines", "data-config")
+      assert [outline] = Floki.attribute(html, "#new-map-lines-outline", "data-config")
 
       assert %{"source" => %{"data" => %{"type" => "FeatureCollection", "features" => features}}} =
-               Jason.decode!(config)
+               Jason.decode!(outline)
 
       assert Enum.all?(features, &(&1["geometry"]["type"] == "LineString"))
-      assert Enum.any?(features, &(&1["properties"]["color"] == "#000000"))
+
+      assert [line] = Floki.attribute(html, "#new-map-lines", "data-config")
+
+      assert %{
+               "sourceId" => "new-map-lines-outline-source",
+               "paint" => %{"line-color" => line_color}
+             } = Jason.decode!(line)
+
+      assert line_color == "##{route.color}"
     end
 
     test "renders vehicle markers with their bearing", %{conn: conn, route: route} do

From 40f2c466b09492676ef03312e14e4f9212220797 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 20 Oct 2026 16:40:07 -0400
Subject: [PATCH 15/24] unship(robot): Remove old map

---
 lib/dotcom_web/live/line_diagram_live.ex      | 48 ++-----------------
 .../live/line_diagram_live_test.exs           | 46 +++++-------------
 2 files changed, 15 insertions(+), 79 deletions(-)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 69320aa27e..4d791bb215 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -189,7 +189,7 @@ defmodule DotcomWeb.LineDiagramLive do
         %Phoenix.Socket.Broadcast{topic: "vehicles-v2:" <> _, event: event, payload: payload},
         socket
       ) do
-    {:noreply, socket |> assign_vehicle_icons(event, payload.data) |> assign(:move_map, false)}
+    {:noreply, assign_vehicle_icons(socket, event, payload.data)}
   end
 
   @impl true
@@ -434,17 +434,7 @@ defmodule DotcomWeb.LineDiagramLive do
         </div>
         <div class="flex flex-col gap-2">
           <.map
-            map_config={@map_config}
-            route_patterns={@route_patterns}
-            map_lines={@map_lines}
-            map_icons={@map_icons}
-            vehicle_icons={Map.values(@vehicle_icons)}
-            move_map={@move_map}
-          />
-
-          <.new_map
             map_style={@map_config.style}
-            route_patterns={@route_patterns}
             map_route_shapes={@map_route_shapes}
             route_color={"##{@route.color}"}
             map_icons={@map_icons}
@@ -470,12 +460,10 @@ defmodule DotcomWeb.LineDiagramLive do
     """
   end
 
-  # re-fit the map to the newly selected variant or direction
   defp assign_route_data(socket) do
     socket
     |> assign_stops()
     |> assign_map_attributes()
-    |> assign(:move_map, true)
   end
 
   defp assign_route_patterns(%{assigns: %{route: route, direction_id: direction_id}} = socket) do
@@ -545,10 +533,8 @@ defmodule DotcomWeb.LineDiagramLive do
     |> assign_map_icons()
   end
 
-  defp assign_map_lines(
-         %{assigns: %{route: route, selected_route_patterns: selected_route_patterns}} = socket
-       ) do
-    map_line_shapes =
+  defp assign_map_lines(%{assigns: %{selected_route_patterns: selected_route_patterns}} = socket) do
+    map_route_shapes =
       selected_route_patterns
       |> Enum.map(fn route_pattern ->
         %{
@@ -559,19 +545,7 @@ defmodule DotcomWeb.LineDiagramLive do
         }
       end)
 
-    map_lines_outlines =
-      map_line_shapes
-      |> Enum.map(&(&1 |> Map.merge(%{width: 6, color: "#000000"})))
-
-    map_lines_with_route_colors =
-      map_line_shapes
-      |> Enum.map(&(&1 |> Map.merge(%{width: 4, color: "##{route.color}"})))
-
-    map_lines = map_lines_outlines ++ map_lines_with_route_colors
-
-    socket
-    |> assign(:map_lines, map_lines)
-    |> assign(:map_route_shapes, map_line_shapes)
+    assign(socket, :map_route_shapes, map_route_shapes)
   end
 
   defp assign_map_icons(%{assigns: %{stops: stops}} = socket) do
@@ -629,20 +603,6 @@ defmodule DotcomWeb.LineDiagramLive do
   end
 
   defp map(assigns) do
-    ~H"""
-    <.live_component
-      module={DotcomWeb.Components.Map}
-      id="line-diagram-map"
-      class="h-96 w-full"
-      config={@map_config}
-      lines={@map_lines}
-      icons={@map_icons ++ @vehicle_icons}
-      move_map={@move_map}
-    />
-    """
-  end
-
-  defp new_map(assigns) do
     ~H"""
     <MaplibreX.Components.map
       id="new-map"
diff --git a/test/dotcom_web/live/line_diagram_live_test.exs b/test/dotcom_web/live/line_diagram_live_test.exs
index b67cf0bd43..536a70a74b 100644
--- a/test/dotcom_web/live/line_diagram_live_test.exs
+++ b/test/dotcom_web/live/line_diagram_live_test.exs
@@ -226,6 +226,11 @@ defmodule DotcomWeb.LineDiagramLiveTest do
   end
 
   describe "variant map updates" do
+    defp outline_features(html) do
+      [config] = Floki.attribute(html, "#new-map-lines-outline", "data-config")
+      Jason.decode!(config)["source"]["data"]["features"]
+    end
+
     test "reuses loaded stops when switching variants", %{
       conn: conn,
       route: route,
@@ -242,16 +247,13 @@ defmodule DotcomWeb.LineDiagramLiveTest do
         |> render_click()
 
         assert has_element?(view, "#variant-menu-button", pattern.headsign)
-        assert has_element?(view, "#line-diagram-map [data-line]:nth-child(2)")
-        refute has_element?(view, "#line-diagram-map [data-line]:nth-child(3)")
 
-        icons =
-          view
-          |> render()
-          |> Floki.parse_document!()
-          |> Floki.find("#line-diagram-map .mbta-map-icon")
+        html = view |> render() |> Floki.parse_document!()
+
+        assert length(outline_features(html)) == 1
 
-        assert length(icons) == length(Enum.uniq(pattern.stop_ids))
+        assert length(Floki.find(html, "#new-map-stops [data-coordinates]")) ==
+                 length(Enum.uniq(pattern.stop_ids))
       end
 
       view
@@ -259,33 +261,7 @@ defmodule DotcomWeb.LineDiagramLiveTest do
       |> render_click()
 
       assert has_element?(view, "#variant-menu-button", "All variants")
-      assert has_element?(view, "#line-diagram-map [data-line]:nth-child(4)")
-    end
-
-    test "refits on selection immediately after a vehicle update", %{
-      conn: conn,
-      route: route,
-      pattern_a: a
-    } do
-      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new")
-
-      view |> with_target("#line-diagram-map") |> render_hook("map-loaded", %{})
-      assert_push_event(view, "update-markers", %{})
-
-      send(view.pid, %Phoenix.Socket.Broadcast{
-        topic: "vehicles-v2:#{route.id}:1",
-        event: "reset",
-        payload: %{data: []}
-      })
-
-      render(view)
-      assert_push_event(view, "update-markers", %{move_map: false})
-
-      view
-      |> element(~s|#variant-menu-menu li[phx-value-option="#{a.id}"]|)
-      |> render_click()
-
-      assert_push_event(view, "update-markers", %{move_map: true})
+      assert view |> render() |> Floki.parse_document!() |> outline_features() |> length() == 2
     end
   end
 end

From dc046013741c6682d3b909b469149ee4750ba2c9 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Wed, 21 Oct 2026 13:04:33 -0400
Subject: [PATCH 16/24] fix(robot): Fit bounds on variant- and direction-picker

---
 .../__tests__/fit-bounds-test.ts              | 49 +++++++++++++++++++
 assets/ts/phoenix-hooks/fit-bounds.ts         | 32 ++++++++++++
 assets/ts/phoenix-hooks/index.ts              |  2 +
 lib/dotcom_web/live/line_diagram_live.ex      | 27 +++++-----
 .../live/line_diagram_live_test.exs           | 35 +++++++++++--
 5 files changed, 131 insertions(+), 14 deletions(-)
 create mode 100644 assets/ts/phoenix-hooks/__tests__/fit-bounds-test.ts
 create mode 100644 assets/ts/phoenix-hooks/fit-bounds.ts

diff --git a/assets/ts/phoenix-hooks/__tests__/fit-bounds-test.ts b/assets/ts/phoenix-hooks/__tests__/fit-bounds-test.ts
new file mode 100644
index 0000000000..8d880f41e0
--- /dev/null
+++ b/assets/ts/phoenix-hooks/__tests__/fit-bounds-test.ts
@@ -0,0 +1,49 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+type Handler = (payload: object) => void;
+
+const FitBounds = require("../fit-bounds").default;
+
+describe("FitBounds hook", () => {
+  let handlers: Record<string, Handler>;
+  let hook: { handleEvent: (name: string, fn: Handler) => void };
+
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="the-map"></div>';
+    handlers = {};
+    hook = {
+      handleEvent: (name: string, fn: Handler) => {
+        handlers[name] = fn;
+      }
+    };
+    FitBounds.mounted.call(hook);
+  });
+
+  it("dispatches maplibrex:fit_bounds on the map element", () => {
+    const received: CustomEvent[] = [];
+    document
+      .getElementById("the-map")!
+      .addEventListener("maplibrex:fit_bounds", e =>
+        received.push(e as CustomEvent)
+      );
+
+    handlers["fit-bounds"]({
+      map_id: "the-map",
+      bounds: [[-71.1, 42.3], [-71, 42.4]],
+      padding: 50,
+      max_zoom: 16
+    });
+
+    expect(received).toHaveLength(1);
+    expect(received[0].detail).toEqual({
+      bounds: [[-71.1, 42.3], [-71, 42.4]],
+      padding: 50,
+      maxZoom: 16
+    });
+  });
+
+  it("ignores events for a map that is not on the page", () => {
+    expect(() =>
+      handlers["fit-bounds"]({ map_id: "missing", bounds: [[0, 0], [1, 1]] })
+    ).not.toThrow();
+  });
+});
diff --git a/assets/ts/phoenix-hooks/fit-bounds.ts b/assets/ts/phoenix-hooks/fit-bounds.ts
new file mode 100644
index 0000000000..841c10a798
--- /dev/null
+++ b/assets/ts/phoenix-hooks/fit-bounds.ts
@@ -0,0 +1,32 @@
+import { ViewHook } from "phoenix_live_view";
+
+interface FitBoundsPayload {
+  map_id: string; // eslint-disable-line camelcase
+  bounds: [[number, number], [number, number]];
+  padding?: number;
+  max_zoom?: number; // eslint-disable-line camelcase
+}
+
+/**
+ * Hook that lets the server fit a MaplibreX map to a set of bounds with
+ * `push_event(socket, "fit-bounds", %{map_id: ..., bounds: ..., padding: ..., max_zoom: ...})`.
+ *
+ * It forwards the request to the map as MaplibreX's own `maplibrex:fit_bounds`
+ * event, so it behaves the same as `MaplibreX.Components.Map.fit_bounds/3`.
+ */
+const FitBounds: Partial<ViewHook> = {
+  mounted(this: ViewHook) {
+    this.handleEvent(
+      "fit-bounds",
+      ({ map_id: mapId, bounds, padding, max_zoom: maxZoom }: FitBoundsPayload) => {
+        document.getElementById(mapId)?.dispatchEvent(
+          new CustomEvent("maplibrex:fit_bounds", {
+            detail: { bounds, padding, maxZoom }
+          })
+        );
+      }
+    );
+  }
+};
+
+export default FitBounds;
diff --git a/assets/ts/phoenix-hooks/index.ts b/assets/ts/phoenix-hooks/index.ts
index 48f0d4625e..912849c439 100644
--- a/assets/ts/phoenix-hooks/index.ts
+++ b/assets/ts/phoenix-hooks/index.ts
@@ -1,4 +1,5 @@
 import AlgoliaAutocomplete from "./algolia-autocomplete";
+import FitBounds from "./fit-bounds";
 import IconMarkers from "./icon-markers";
 import MBTAGoCTABanner from "./mbta-go-cta-banner";
 import MenuButton from "./menu-button";
@@ -20,6 +21,7 @@ import TripPlannerDatePicker from "../../js/trip-planner/datepicker";
  */
 const Hooks = {
   AlgoliaAutocomplete,
+  FitBounds,
   IconMarkers,
   MBTAGoCTABanner,
   MenuButton,
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 4d791bb215..1660fe9010 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -170,7 +170,8 @@ defmodule DotcomWeb.LineDiagramLive do
      end)
      |> apply_if_param_changed(:direction_id, &apply_direction_change/1)
      |> apply_if_param_changed(:selected_variant, &apply_variant_change/1)
-     |> assign_route_data()}
+     |> assign_route_data()
+     |> push_fit_bounds()}
   end
 
   @impl true
@@ -466,6 +467,18 @@ defmodule DotcomWeb.LineDiagramLive do
     |> assign_map_attributes()
   end
 
+  # re-fit the map to the newly selected variant or direction
+  defp push_fit_bounds(%{assigns: %{map_icons: [_ | _] = map_icons}} = socket) do
+    push_event(socket, "fit-bounds", %{
+      map_id: "new-map",
+      bounds: icons_to_bounds(map_icons),
+      padding: 50,
+      max_zoom: 16
+    })
+  end
+
+  defp push_fit_bounds(socket), do: socket
+
   defp assign_route_patterns(%{assigns: %{route: route, direction_id: direction_id}} = socket) do
     route_patterns =
       route.id
@@ -618,16 +631,8 @@ defmodule DotcomWeb.LineDiagramLive do
       position="top-left"
     />
 
-    <%!-- `phx-mounted` runs once when the element is added, not on later updates, so this fits on page load only --%>
-    <div
-      :if={Enum.any?(@map_icons)}
-      phx-mounted={
-        MaplibreX.Components.Map.fit_bounds("new-map", icons_to_bounds(@map_icons),
-          padding: 50,
-          max_zoom: 16
-        )
-      }
-    />
+    <%!-- Receives the "fit-bounds" event pushed when the direction or variant changes --%>
+    <div id="new-map-fit" phx-hook="FitBounds" />
 
     <MaplibreX.Components.geojson_layer
       id="new-map-lines-outline"
diff --git a/test/dotcom_web/live/line_diagram_live_test.exs b/test/dotcom_web/live/line_diagram_live_test.exs
index 536a70a74b..4a15f4cc22 100644
--- a/test/dotcom_web/live/line_diagram_live_test.exs
+++ b/test/dotcom_web/live/line_diagram_live_test.exs
@@ -115,9 +115,38 @@ defmodule DotcomWeb.LineDiagramLiveTest do
         assert popup =~ "popup-title"
       end
 
-      assert [mounted] = view |> new_map_html() |> Floki.attribute("[phx-mounted]", "phx-mounted")
-      assert mounted =~ "maplibrex:fit_bounds"
-      assert mounted =~ ~s|"padding":50|
+      assert has_element?(view, ~s|#new-map-fit[phx-hook="FitBounds"]|)
+
+      assert_push_event(view, "fit-bounds", %{
+        map_id: "new-map",
+        bounds: [[_, _], [_, _]],
+        padding: 50
+      })
+    end
+
+    test "re-fits on variant change but not on vehicle updates", %{
+      conn: conn,
+      route: route,
+      pattern_a: a,
+      pattern_b: b
+    } do
+      {:ok, view, _html} = live(conn, "/schedules/#{route.id}/line_new?variant=#{a.id}")
+      assert_push_event(view, "fit-bounds", %{})
+
+      send(view.pid, %Phoenix.Socket.Broadcast{
+        topic: "vehicles-v2:#{route.id}:1",
+        event: "reset",
+        payload: %{data: []}
+      })
+
+      render(view)
+      refute_push_event(view, "fit-bounds", %{}, 50)
+
+      view
+      |> element(~s|#variant-menu-menu li[phx-value-option="#{b.id}"]|)
+      |> render_click()
+
+      assert_push_event(view, "fit-bounds", %{map_id: "new-map"})
     end
 
     test "stacks vehicle markers above stop markers", %{conn: conn, route: route} do

From 04314a72cfac86e217862d99b4dd51e625b86dc0 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 2 Nov 2026 11:18:35 -0500
Subject: [PATCH 17/24] fix(robot): Keep map popups underneath non-map things

---
 assets/css/_schedule-line.scss           | 4 ++--
 assets/css/_variables.scss               | 2 +-
 lib/dotcom_web/live/line_diagram_live.ex | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/assets/css/_schedule-line.scss b/assets/css/_schedule-line.scss
index 5d966826f5..8f1f06c080 100644
--- a/assets/css/_schedule-line.scss
+++ b/assets/css/_schedule-line.scss
@@ -40,8 +40,8 @@
 }
 
 .m-schedule-line__stop-popup {
-  // Must stay above the z-index set on marker groups (see `z_index` on `icon_markers`)
-  // and below the nav menu veil (`$z-index-desktop-menu`)
+  // Must stay above the z-index set on marker groups (see `z_index` on `icon_markers`).
+  // The map wrapper is `isolate`d so this can't overlap dropdowns outside the map.
   z-index: $z-index-map-popup;
 
   .maplibregl-popup-content {
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index f4c5f20d0f..1147a558c3 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -123,7 +123,7 @@ $btn-padding-y: $base-spacing * .6;
 
 $z-index-modal: 101;
 $z-index-desktop-menu: 100;
-$z-index-map-popup: 50; // Above all in-page content, below the nav menu and its veil
+$z-index-map-popup: 50; // Above marker groups; only applies within the map's isolated stacking context
 $z-index-above-leaflet: 23;
 $z-index-leaflet-level-8: 21;
 $z-index-leaflet-level-7: 21;
diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 1660fe9010..bb7663a4d1 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -433,7 +433,7 @@ defmodule DotcomWeb.LineDiagramLive do
             {~t(Change Direction)}
           </.link>
         </div>
-        <div class="flex flex-col gap-2">
+        <div class="flex flex-col gap-2 isolate">
           <.map
             map_style={@map_config.style}
             map_route_shapes={@map_route_shapes}

From 5c5205c790b1fd9a27ec107d40aeba4db4c6a246 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 2 Nov 2026 14:54:03 -0500
Subject: [PATCH 18/24] fix: Elixir formatting

---
 lib/dotcom_web/live/line_diagram_live.ex | 1 -
 1 file changed, 1 deletion(-)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 7603b6961a..587a16fc26 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -489,7 +489,6 @@ defmodule DotcomWeb.LineDiagramLive do
               />
             </li>
           </ol>
-
         </div>
       </div>
       <div class="col-md-5 gap-[32px] flex flex-col">

From 920bb66e1c93ea2289fe547c3ee665256308f2df Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 3 Nov 2026 09:37:21 -0500
Subject: [PATCH 19/24] fix(robot): stop type-checking maplibrex sources

Map the maplibrex import to a minimal local declaration so tsc doesn't compile the dependency's TypeScript sources.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 assets/ts/types/maplibrex.d.ts | 7 +++++++
 assets/tsconfig.json           | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)
 create mode 100644 assets/ts/types/maplibrex.d.ts

diff --git a/assets/ts/types/maplibrex.d.ts b/assets/ts/types/maplibrex.d.ts
new file mode 100644
index 0000000000..7c49a97295
--- /dev/null
+++ b/assets/ts/types/maplibrex.d.ts
@@ -0,0 +1,7 @@
+import type { Map } from "maplibre-gl";
+
+// MaplibreX ships TypeScript sources that can't be type-checked from `deps/`,
+// so only the surface used by this app is declared here.
+export const MapManager: {
+  get(mapId: string): Map | undefined;
+};
diff --git a/assets/tsconfig.json b/assets/tsconfig.json
index bba7dbb0dd..2eeeeac71f 100644
--- a/assets/tsconfig.json
+++ b/assets/tsconfig.json
@@ -39,7 +39,7 @@
     /* Module Resolution Options */
     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    // "paths": {},                           /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'. */
+    "paths": { "maplibrex": ["./ts/types/maplibrex.d.ts"] },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */

From 0762c0a8b4e7acc65cef6f6fde8eaef32400f9f2 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Wed, 4 Nov 2026 14:26:24 -0500
Subject: [PATCH 20/24] fix(robot): type-check against real maplibrex types

Resolve imports from maplibrex's sources against assets/node_modules, add the deck.gl type packages it needs, and drop the hand-written maplibrex shim.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 assets/package-lock.json       | 347 ++++++++++++++++++++++++++++++++-
 assets/package.json            |   2 +
 assets/ts/types/deckgl.d.ts    |   3 +
 assets/ts/types/maplibrex.d.ts |   7 -
 assets/tsconfig.json           |   3 +-
 5 files changed, 352 insertions(+), 10 deletions(-)
 create mode 100644 assets/ts/types/deckgl.d.ts
 delete mode 100644 assets/ts/types/maplibrex.d.ts

diff --git a/assets/package-lock.json b/assets/package-lock.json
index fee6ee52bf..9802e07bc7 100644
--- a/assets/package-lock.json
+++ b/assets/package-lock.json
@@ -53,6 +53,8 @@
         "@babel/core": "^7.17.4",
         "@babel/preset-env": "^7.22.5",
         "@babel/register": "^7.17.0",
+        "@deck.gl/core": "^9.4.1",
+        "@deck.gl/mapbox": "^9.4.1",
         "@faker-js/faker": "^8.0.2",
         "@tailwindcss/container-queries": "^0.1.1",
         "@testing-library/dom": "^8.16.0",
@@ -4067,6 +4069,47 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "dev": true
     },
+    "node_modules/@deck.gl/core": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@deck.gl/core/-/core-9.4.1.tgz",
+      "integrity": "sha512-DyZTcn4DIWbCKqi4W4PMcG57DD+B/CbEkNex9EKLLUvxl27i45UEEwbYu5Br+c3P3bkcH6tNvB8v/rbsxkCWWQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@loaders.gl/core": "^4.4.3",
+        "@loaders.gl/images": "^4.4.3",
+        "@luma.gl/core": "^9.4.2",
+        "@luma.gl/engine": "^9.4.2",
+        "@luma.gl/gpgpu": "^9.4.2",
+        "@luma.gl/shadertools": "^9.4.2",
+        "@luma.gl/webgl": "^9.4.2",
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/sun": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@math.gl/web-mercator": "^4.1.0",
+        "@probe.gl/env": "^4.1.1",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1",
+        "@types/offscreencanvas": "^2019.6.4",
+        "gl-matrix": "^3.0.0",
+        "mjolnir.js": "^3.1.1"
+      }
+    },
+    "node_modules/@deck.gl/mapbox": {
+      "version": "9.4.1",
+      "resolved": "https://registry.npmjs.org/@deck.gl/mapbox/-/mapbox-9.4.1.tgz",
+      "integrity": "sha512-gg18JhYAHZoW8v7QVzcIU5mTRkfuPWuZRXHF+vBq6QY3E5OKInEmRzHsw/iRa/BKu3lSkN2WM3tKn8CpMie64Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/web-mercator": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@deck.gl/core": "~9.4.0",
+        "@luma.gl/core": "~9.4.0",
+        "@math.gl/web-mercator": "^4.1.0"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "dev": true,
@@ -5037,6 +5080,177 @@
       "integrity": "sha512-Vo+PSpZG2/fmgmiNzYK9qWRh8h/CHrwD0mo1h1DzL4yzHNSfWYujGTYsWGreD000gcgmZ7K4Ys6Tx9TxtsKdDw==",
       "dev": true
     },
+    "node_modules/@loaders.gl/core": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/core/-/core-4.5.4.tgz",
+      "integrity": "sha512-mhO2TT5KWU3GbFYSQ78nPAhoeCnoUfTYjzwxzhHAhd656U4MW/Rq5CxZxM6liKk0Jt11dCQ8VT4nXu8334CmqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.5.4",
+        "@loaders.gl/schema": "4.5.4",
+        "@loaders.gl/schema-utils": "4.5.4",
+        "@loaders.gl/worker-utils": "4.5.4",
+        "@probe.gl/log": "^4.1.1"
+      }
+    },
+    "node_modules/@loaders.gl/images": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/images/-/images-4.5.4.tgz",
+      "integrity": "sha512-Z/7SSC9v+iQdcpwkr7nSloCpgAREuO2/3yD4niAhk+ar7nrgRByaiBH16L51M5Juse8MG3oC67gaO85VuUb3jA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@loaders.gl/loader-utils": "4.5.4"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.5.0"
+      }
+    },
+    "node_modules/@loaders.gl/loader-utils": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/loader-utils/-/loader-utils-4.5.4.tgz",
+      "integrity": "sha512-ZUNn/4+DEn8yTKGUKdjlbA7ok2JyNrica/Lvf1d8dwx7vCUSZ84PBB9cNtrx8VDXmVjkIClQzmnriz16QHjTMQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@loaders.gl/schema": "4.5.4",
+        "@loaders.gl/worker-utils": "4.5.4",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1"
+      }
+    },
+    "node_modules/@loaders.gl/schema": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/schema/-/schema-4.5.4.tgz",
+      "integrity": "sha512-5CO/TY2OkmM53+qfSvzMt17LwVJhBatqi/QaO45VOn8poTK1jqyZvnI0qvKFqOsMWzHh4yoQVUnxaWiV4CZ41w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/geojson": "^7946.0.7",
+        "apache-arrow": ">= 17.0.0"
+      }
+    },
+    "node_modules/@loaders.gl/schema-utils": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/schema-utils/-/schema-utils-4.5.4.tgz",
+      "integrity": "sha512-vV52aT4RJiHzzbHlwdkX254d/ubdNzcxJuFfrfDeyUZkKDa//YPhVFjCxfNlxXgS+7pS0TGakfNB18vyYkk3FA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@loaders.gl/schema": "4.5.4",
+        "@math.gl/types": "^4.1.0",
+        "@types/geojson": "^7946.0.7",
+        "apache-arrow": ">= 17.0.0"
+      },
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.5.0"
+      }
+    },
+    "node_modules/@loaders.gl/worker-utils": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@loaders.gl/worker-utils/-/worker-utils-4.5.4.tgz",
+      "integrity": "sha512-OvVMMLh56QdBQgyMDxuho9doWq6oiz7paqP3rwidb+LqgJB5GvdqcoL+GbUcku2X8k0ZxCldvo+l46Yhpv0bfQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "@loaders.gl/core": "~4.5.0"
+      }
+    },
+    "node_modules/@luma.gl/core": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/core/-/core-9.4.2.tgz",
+      "integrity": "sha512-VFol6FUSHQeYR40NrkCM/mkP5DX7aI8pcDewxI8DBjtrcP4+ZJiJwnxWZnsMBzM4RuuvmDoHkPWCxj6Ob9yo+w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/env": "^4.1.1",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1",
+        "@types/offscreencanvas": "^2019.7.3"
+      }
+    },
+    "node_modules/@luma.gl/engine": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/engine/-/engine-9.4.2.tgz",
+      "integrity": "sha512-gBAcn+b1jOwE4pDF5zbuzMxCa/KGY3Q2Gq0gNUPU1AZHNk4aDgOEQaY2sqMsaoGHkDXB+pxneJQPw5c6Q5mnHA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/log": "^4.1.1",
+        "@probe.gl/stats": "^4.1.1"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.4.0",
+        "@luma.gl/shadertools": "~9.4.0"
+      }
+    },
+    "node_modules/@luma.gl/gpgpu": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/gpgpu/-/gpgpu-9.4.2.tgz",
+      "integrity": "sha512-LoEqoViPZqMHqQzvq/txFuOLsxI6sn8xmv+IZyovRFBqcWaV184PE/8Ieufww0pjVyJMfubhUCQmGuGrOME8oA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/log": "^4.0.8",
+        "@probe.gl/stats": "^4.0.8"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.4.0",
+        "@luma.gl/engine": "~9.4.0",
+        "@luma.gl/shadertools": "~9.4.0",
+        "@luma.gl/webgpu": "~9.4.0"
+      }
+    },
+    "node_modules/@luma.gl/shadertools": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/shadertools/-/shadertools-9.4.2.tgz",
+      "integrity": "sha512-0/6pLZSfnQnvcWdYePKKSwVet+gFtAAnKeGXNfxpgp3I8E3WsF/SbD6oEzgU7jdnRqONwGsoACWNpQHO0zZvIQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/core": "^4.1.0",
+        "@math.gl/types": "^4.1.0"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.4.0"
+      }
+    },
+    "node_modules/@luma.gl/webgl": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/webgl/-/webgl-9.4.2.tgz",
+      "integrity": "sha512-D3GqnxTgQI+vsyH56hX5+jwqdVUhvhbpnPurTwbQOSlSQ8mshhNKcRdrZytTy10qiodDwrcjTnndPEAP6UgCzA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/types": "^4.1.0",
+        "@probe.gl/env": "^4.1.1"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.4.0"
+      }
+    },
+    "node_modules/@luma.gl/webgpu": {
+      "version": "9.4.2",
+      "resolved": "https://registry.npmjs.org/@luma.gl/webgpu/-/webgpu-9.4.2.tgz",
+      "integrity": "sha512-24gDOmLyL81fVHxn+UXajnYN5jVln7XgB9fvobc1Yh3PAtXjlcAkmVTqYRvULVGeEamuqvqPDscAkaK/T+R1iQ==",
+      "dev": true,
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@probe.gl/env": "^4.1.1",
+        "@webgpu/types": "^0.1.69"
+      },
+      "peerDependencies": {
+        "@luma.gl/core": "~9.4.0",
+        "@luma.gl/shadertools": "~9.4.0"
+      }
+    },
     "node_modules/@mapbox/jsonlint-lines-primitives": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.3.tgz",
@@ -5150,6 +5364,40 @@
         "pbf": "bin/pbf"
       }
     },
+    "node_modules/@math.gl/core": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/core/-/core-4.1.0.tgz",
+      "integrity": "sha512-FrdHBCVG3QdrworwrUSzXIaK+/9OCRLscxI2OUy6sLOHyHgBMyfnEGs99/m3KNvs+95BsnQLWklVfpKfQzfwKA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/types": "4.1.0"
+      }
+    },
+    "node_modules/@math.gl/sun": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/sun/-/sun-4.1.0.tgz",
+      "integrity": "sha512-i3q6OCBLSZ5wgZVhXg+X7gsjY/TUtuFW/2KBiq/U1ypLso3S4sEykoU/MGjxUv1xiiGtr+v8TeMbO1OBIh/HmA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@math.gl/types": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/types/-/types-4.1.0.tgz",
+      "integrity": "sha512-clYZdHcmRvMzVK5fjeDkQlHUzXQSNdZ7s4xOqC3nJPgz4C/TZkUecTo9YS4PruZqtDda/ag4erndP0MIn40dGA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@math.gl/web-mercator": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-4.1.0.tgz",
+      "integrity": "sha512-HZo3vO5GCMkXJThxRJ5/QYUYRr3XumfT8CzNNCwoJfinxy5NtKUd7dusNTXn7yJ40UoB8FMIwkVwNlqaiRZZAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/core": "4.1.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "dev": true,
@@ -5198,6 +5446,30 @@
       "integrity": "sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==",
       "dev": true
     },
+    "node_modules/@probe.gl/env": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@probe.gl/env/-/env-4.1.2.tgz",
+      "integrity": "sha512-KIcdjrEiEZVIGX9nh7pZSmTMIKrd+wCb09gyXqpYYI4hs9WMqrQHvKZ7KD8ASutf6kwARwgd4WNQn8aucLSz3g==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@probe.gl/log": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@probe.gl/log/-/log-4.1.2.tgz",
+      "integrity": "sha512-2LqSq4CHhc/HJQasHMPOzA6c7rprlGz8CCREGebo19jxcuKdvXQo0DEmlfId076U6UldMp6jGhWvDHEFLX111Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@probe.gl/env": "4.1.2"
+      }
+    },
+    "node_modules/@probe.gl/stats": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/@probe.gl/stats/-/stats-4.1.2.tgz",
+      "integrity": "sha512-Hqc0UIHd0IZ2+JbovzTz7lYG7CY9D8yCB81zyP92Zl9UDSPcw2cLbTySW14keAQeAo1sjGjUw0+KHxr0Y2h/hA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@remix-run/router": {
       "version": "1.9.0",
       "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.9.0.tgz",
@@ -5961,9 +6233,14 @@
       "license": "MIT"
     },
     "node_modules/@types/node": {
-      "version": "18.11.9",
+      "version": "25.9.9",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.9.9.tgz",
+      "integrity": "sha512-b4e2xxj/yMeT2hNlD6x7zNFiQK2Dlmkb9CQ6v3/1G2RezKN4YS2lcEv8lzGm1mhs4f2lM4yNAMI/zUDBZBBt7w==",
       "dev": true,
-      "license": "MIT"
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": ">=7.24.0 <7.24.7"
+      }
     },
     "node_modules/@types/node-forge": {
       "version": "1.3.11",
@@ -5979,6 +6256,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@types/parse-json": {
       "version": "4.0.0",
       "dev": true,
@@ -6639,6 +6923,14 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.74",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.74.tgz",
+      "integrity": "sha512-lgiI4hbuLcI9unnm2cL/tvCaQU45dp0xcLWJh5uB/9MBGvIA4F8XIk7nSiBeg+K4xWGYwgZKn80LmERI5CxoTA==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "peer": true
+    },
     "node_modules/@webpack-cli/configtest": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-2.1.1.tgz",
@@ -7002,6 +7294,29 @@
         "node": ">= 8"
       }
     },
+    "node_modules/apache-arrow": {
+      "version": "21.2.0",
+      "resolved": "https://registry.npmjs.org/apache-arrow/-/apache-arrow-21.2.0.tgz",
+      "integrity": "sha512-Hxe6Agq26gQOM954qpzYSllJBPJl+e16U5CkfuMUhLrNba+5nKkttIVlflaovN6oaTratqMGAO8H5u/aNhmHWQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/node": "^25.2.0",
+        "flatbuffers": "^25.1.24",
+        "json-with-bigint": "^3.5.3",
+        "tslib": "^2.6.2"
+      },
+      "bin": {
+        "arrow2csv": "bin/arrow2csv.js"
+      }
+    },
+    "node_modules/apache-arrow/node_modules/tslib": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.9.1.tgz",
+      "integrity": "sha512-a4Ux9VKuIMHsOS7ENbEq6hK2ZGYIT27Rtl0E4eD9KqwxhKiQeMZE/9xb3IdYwWaSOyIBQLExhQgXDTYoiCxnWA==",
+      "dev": true,
+      "license": "0BSD"
+    },
     "node_modules/arch": {
       "version": "2.2.0",
       "dev": true,
@@ -11544,6 +11859,13 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/flatbuffers": {
+      "version": "25.9.23",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-25.9.23.tgz",
+      "integrity": "sha512-MI1qs7Lo4Syw0EOzUl0xjs2lsoeqFku44KpngfIduHBYvzm8h2+7K8YMQh1JtVVVrUvhLpNwqVi4DERegUJhPQ==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/flatpickr": {
       "version": "4.6.13",
       "resolved": "https://registry.npmjs.org/flatpickr/-/flatpickr-4.6.13.tgz",
@@ -15420,6 +15742,13 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/json-with-bigint": {
+      "version": "3.5.12",
+      "resolved": "https://registry.npmjs.org/json-with-bigint/-/json-with-bigint-3.5.12.tgz",
+      "integrity": "sha512-uwbF/wSSuOgC7qqlq27Xp5B6a2MHVug3t0idZdTqu0JnlFvgJuH7ju+KAk/J06C7GfhoYy2gnb9wz2INqcne7w==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "dev": true,
@@ -16325,6 +16654,13 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/mjolnir.js": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-3.1.1.tgz",
+      "integrity": "sha512-Em3+0p6n2RamaiiDenHByvaWNolr+K0fWsFpgUgUXRssFI59ramCMdp0crU6V75clbA4fDJBVTBXfBF5rlPB9A==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/mkdirp": {
       "version": "0.3.0",
       "license": "MIT/X11",
@@ -22914,6 +23250,13 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.24.6",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.24.6.tgz",
+      "integrity": "sha512-WRNW+sJgj5OBN4/0JpHFqtqzhpbnV0GuB+OozA9gCL7a993SmU+1JBZCzLNxYsbMfIeDL+lTsphD5jN5N+n0zg==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.0",
       "dev": true,
diff --git a/assets/package.json b/assets/package.json
index ec61634c19..9d177d418e 100644
--- a/assets/package.json
+++ b/assets/package.json
@@ -48,6 +48,8 @@
     "@babel/core": "^7.17.4",
     "@babel/preset-env": "^7.22.5",
     "@babel/register": "^7.17.0",
+    "@deck.gl/core": "^9.4.1",
+    "@deck.gl/mapbox": "^9.4.1",
     "@faker-js/faker": "^8.0.2",
     "@tailwindcss/container-queries": "^0.1.1",
     "@testing-library/dom": "^8.16.0",
diff --git a/assets/ts/types/deckgl.d.ts b/assets/ts/types/deckgl.d.ts
new file mode 100644
index 0000000000..9865220eb4
--- /dev/null
+++ b/assets/ts/types/deckgl.d.ts
@@ -0,0 +1,3 @@
+// Optional MaplibreX peer dependencies that are only used as values (we don't use <.deckgl_layer>)
+declare module "@deck.gl/layers";
+declare module "@deck.gl/aggregation-layers";
diff --git a/assets/ts/types/maplibrex.d.ts b/assets/ts/types/maplibrex.d.ts
deleted file mode 100644
index 7c49a97295..0000000000
--- a/assets/ts/types/maplibrex.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { Map } from "maplibre-gl";
-
-// MaplibreX ships TypeScript sources that can't be type-checked from `deps/`,
-// so only the surface used by this app is declared here.
-export const MapManager: {
-  get(mapId: string): Map | undefined;
-};
diff --git a/assets/tsconfig.json b/assets/tsconfig.json
index 2eeeeac71f..b8bf120d85 100644
--- a/assets/tsconfig.json
+++ b/assets/tsconfig.json
@@ -39,7 +39,8 @@
     /* Module Resolution Options */
     // "moduleResolution": "node",            /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6). */
     // "baseUrl": "./",                       /* Base directory to resolve non-absolute module names. */
-    "paths": { "maplibrex": ["./ts/types/maplibrex.d.ts"] },
+    // MaplibreX ships TypeScript sources under deps/, so its imports must resolve against our node_modules
+    "paths": { "*": ["./node_modules/*"] },
     // "rootDirs": [],                        /* List of root folders whose combined content represents the structure of the project at runtime. */
     // "typeRoots": [],                       /* List of folders to include type definitions from. */
     // "types": [],                           /* Type declaration files to be included in compilation. */

From 7d305501494f44a7da2d8a039cc377e344a3c778 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Tue, 3 Nov 2026 09:37:46 -0500
Subject: [PATCH 21/24] fix(robot): resolve TypeScript lint errors

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 assets/ts/phoenix-hooks/fit-bounds.ts   | 7 ++++++-
 assets/ts/phoenix-hooks/icon-markers.ts | 5 ++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/assets/ts/phoenix-hooks/fit-bounds.ts b/assets/ts/phoenix-hooks/fit-bounds.ts
index 841c10a798..25f848db46 100644
--- a/assets/ts/phoenix-hooks/fit-bounds.ts
+++ b/assets/ts/phoenix-hooks/fit-bounds.ts
@@ -18,7 +18,12 @@ const FitBounds: Partial<ViewHook> = {
   mounted(this: ViewHook) {
     this.handleEvent(
       "fit-bounds",
-      ({ map_id: mapId, bounds, padding, max_zoom: maxZoom }: FitBoundsPayload) => {
+      ({
+        map_id: mapId,
+        bounds,
+        padding,
+        max_zoom: maxZoom
+      }: FitBoundsPayload) => {
         document.getElementById(mapId)?.dispatchEvent(
           new CustomEvent("maplibrex:fit_bounds", {
             detail: { bounds, padding, maxZoom }
diff --git a/assets/ts/phoenix-hooks/icon-markers.ts b/assets/ts/phoenix-hooks/icon-markers.ts
index dea6f5b424..5f81bb2eba 100644
--- a/assets/ts/phoenix-hooks/icon-markers.ts
+++ b/assets/ts/phoenix-hooks/icon-markers.ts
@@ -74,7 +74,8 @@ const IconMarkers: Partial<IconMarkersHook> = {
         }
 
         const element = source.cloneNode(true) as HTMLElement;
-        if (this.el.dataset.zIndex) element.style.zIndex = this.el.dataset.zIndex;
+        if (this.el.dataset.zIndex)
+          element.style.zIndex = this.el.dataset.zIndex;
 
         const marker = new maplibregl.Marker({
           anchor: (source.getAttribute("data-anchor") ||
@@ -103,6 +104,7 @@ const IconMarkers: Partial<IconMarkersHook> = {
     entry: MarkerEntry,
     popupHtml: string | null
   ) {
+    /* eslint-disable no-param-reassign */
     if (!popupHtml) {
       if (entry.popup) {
         entry.marker.setPopup(null);
@@ -124,6 +126,7 @@ const IconMarkers: Partial<IconMarkersHook> = {
       entry.popup.setHTML(popupHtml);
       entry.popupHtml = popupHtml;
     }
+    /* eslint-enable no-param-reassign */
   }
 };
 

From f8b1193d04e2d66b65dffba7dafeb3e3efb3cb75 Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 9 Nov 2026 15:02:35 -0500
Subject: [PATCH 22/24] fix(robot): remove eslint-disable comments from
 icon-markers

Replace the mutating updatePopup method with a syncPopup helper that returns a new entry, so the no-param-reassign disable is no longer needed.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 assets/ts/phoenix-hooks/icon-markers.ts | 63 +++++++++++--------------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/assets/ts/phoenix-hooks/icon-markers.ts b/assets/ts/phoenix-hooks/icon-markers.ts
index 5f81bb2eba..b78ec34557 100644
--- a/assets/ts/phoenix-hooks/icon-markers.ts
+++ b/assets/ts/phoenix-hooks/icon-markers.ts
@@ -11,7 +11,28 @@ interface MarkerEntry {
 interface IconMarkersHook extends ViewHook {
   markers: Map<string, MarkerEntry>;
   renderMarkers(): void;
-  updatePopup(entry: MarkerEntry, popupHtml: string | null): void;
+}
+
+// Returns the entry with its popup brought in line with `popupHtml`
+function syncPopup(
+  { marker, popup, popupHtml }: MarkerEntry,
+  newPopupHtml: string | null
+): MarkerEntry {
+  if (!newPopupHtml) {
+    if (popup) marker.setPopup(null);
+    return { marker, popup: null, popupHtml: null };
+  }
+
+  const activePopup =
+    popup ||
+    new maplibregl.Popup({
+      className: "m-schedule-line__stop-popup",
+      focusAfterOpen: false
+    });
+  if (!popup) marker.setPopup(activePopup);
+  if (popupHtml !== newPopupHtml) activePopup.setHTML(newPopupHtml);
+
+  return { marker, popup: activePopup, popupHtml: newPopupHtml };
 }
 
 /**
@@ -69,7 +90,7 @@ const IconMarkers: Partial<IconMarkersHook> = {
 
         if (existing) {
           existing.marker.setLngLat(lngLat).setRotation(rotation);
-          this.updatePopup(existing, popupHtml);
+          this.markers.set(id, syncPopup(existing, popupHtml));
           return;
         }
 
@@ -84,11 +105,11 @@ const IconMarkers: Partial<IconMarkersHook> = {
           element
         }).setLngLat(lngLat);
 
-        const entry: MarkerEntry = { marker, popup: null, popupHtml: null };
-        this.updatePopup(entry, popupHtml);
-
         marker.addTo(map);
-        this.markers.set(id, entry);
+        this.markers.set(
+          id,
+          syncPopup({ marker, popup: null, popupHtml: null }, popupHtml)
+        );
       });
 
     this.markers.forEach((entry, id) => {
@@ -97,36 +118,6 @@ const IconMarkers: Partial<IconMarkersHook> = {
         this.markers.delete(id);
       }
     });
-  },
-
-  updatePopup(
-    this: IconMarkersHook,
-    entry: MarkerEntry,
-    popupHtml: string | null
-  ) {
-    /* eslint-disable no-param-reassign */
-    if (!popupHtml) {
-      if (entry.popup) {
-        entry.marker.setPopup(null);
-        entry.popup = null;
-        entry.popupHtml = null;
-      }
-      return;
-    }
-
-    if (!entry.popup) {
-      entry.popup = new maplibregl.Popup({
-        className: "m-schedule-line__stop-popup",
-        focusAfterOpen: false
-      });
-      entry.marker.setPopup(entry.popup);
-    }
-
-    if (entry.popupHtml !== popupHtml) {
-      entry.popup.setHTML(popupHtml);
-      entry.popupHtml = popupHtml;
-    }
-    /* eslint-enable no-param-reassign */
   }
 };
 

From d19563ee2c7ff3bb7e511b9d6fd82f7e1b39b0ff Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Mon, 9 Nov 2026 15:07:08 -0500
Subject: [PATCH 23/24] fix: Merge conflict end removal

---
 lib/dotcom_web/live/line_diagram_live.ex | 1 +
 1 file changed, 1 insertion(+)

diff --git a/lib/dotcom_web/live/line_diagram_live.ex b/lib/dotcom_web/live/line_diagram_live.ex
index 15f5dde73e..c8462888ff 100644
--- a/lib/dotcom_web/live/line_diagram_live.ex
+++ b/lib/dotcom_web/live/line_diagram_live.ex
@@ -885,6 +885,7 @@ defmodule DotcomWeb.LineDiagramLive do
     else
       connections
     end
+  end
 
   defp assign_fare_card(%{assigns: %{route: route}} = socket) do
     socket

From 254807aadcbbce6e249c4b5f9c0ba08a0666ab0e Mon Sep 17 00:00:00 2001
From: Josh Larson <jlarson@mbta.com>
Date: Thu, 12 Nov 2026 16:15:50 -0500
Subject: [PATCH 24/24] fix(robot): keep map layers after a LiveView reconnect

MaplibreX compares the map style by reference, so a style object made every patch call map.setStyle and wipe the route shape layers. Wrap the map hook to skip setStyle when the style is unchanged.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 assets/js/app.js                              |  2 +-
 assets/ts/phoenix-hooks/__tests__/map-test.ts | 63 +++++++++++++++++++
 assets/ts/phoenix-hooks/index.ts              |  2 +
 assets/ts/phoenix-hooks/map.ts                | 53 ++++++++++++++++
 4 files changed, 119 insertions(+), 1 deletion(-)
 create mode 100644 assets/ts/phoenix-hooks/__tests__/map-test.ts
 create mode 100644 assets/ts/phoenix-hooks/map.ts

diff --git a/assets/js/app.js b/assets/js/app.js
index b324bb6174..abde69cb7e 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -49,7 +49,7 @@ import storageOptions from "./storage.js";
 
 let liveSocket = new LiveSocket("/live", Socket, {
   params: { _csrf_token: csrfToken },
-  hooks: { ...DotcomHooks, ...MapHooks, Map },
+  hooks: { ...MapHooks, ...DotcomHooks, Map },
   dom: {
     onBeforeElUpdated(from, to) {
       /*
diff --git a/assets/ts/phoenix-hooks/__tests__/map-test.ts b/assets/ts/phoenix-hooks/__tests__/map-test.ts
new file mode 100644
index 0000000000..2b7eb26ca8
--- /dev/null
+++ b/assets/ts/phoenix-hooks/__tests__/map-test.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const mockSetStyle = jest.fn();
+const mockOriginalUpdated = jest.fn(function updated(this: {
+  _maplibrex: {
+    map: { setStyle: (style: unknown) => void };
+    config: { style: unknown };
+  };
+  el: HTMLElement;
+}) {
+  const newConfig = JSON.parse(this.el.dataset.config as string);
+  // Mirrors MaplibreX, which compares styles by reference
+  if (newConfig.style !== this._maplibrex.config.style) {
+    this._maplibrex.map.setStyle(newConfig.style);
+  }
+});
+
+jest.mock(
+  "maplibrex",
+  () => ({ MapHooks: { MapHook: { updated: mockOriginalUpdated } } }),
+  { virtual: true }
+);
+
+const MapHook = require("../map").default;
+
+const style = { version: 8, sources: {}, layers: [] };
+
+const buildHook = (configStyle: unknown, elementStyle: unknown) => {
+  const el = document.createElement("div");
+  el.dataset.config = JSON.stringify({ style: elementStyle });
+
+  // maplibre-gl defines setStyle on the prototype
+  class MockMap {}
+  Object.assign(MockMap.prototype, { setStyle: mockSetStyle });
+  const map = new MockMap() as { setStyle: typeof mockSetStyle };
+  return { el, _maplibrex: { map, config: { style: configStyle } } };
+};
+
+describe("Map hook", () => {
+  beforeEach(() => {
+    mockSetStyle.mockClear();
+    mockOriginalUpdated.mockClear();
+  });
+
+  it("doesn't reset the style when an equal style object is re-sent", () => {
+    const hook = buildHook(style, { ...style });
+
+    MapHook.updated.call(hook);
+
+    expect(mockOriginalUpdated).toHaveBeenCalledTimes(1);
+    expect(mockSetStyle).not.toHaveBeenCalled();
+    expect(Object.keys(hook._maplibrex.map)).toEqual([]);
+    expect(hook._maplibrex.map.setStyle).toBe(mockSetStyle);
+  });
+
+  it("still sets the style when it has changed", () => {
+    const newStyle = { ...style, version: 9 };
+    const hook = buildHook(style, newStyle);
+
+    MapHook.updated.call(hook);
+
+    expect(mockSetStyle).toHaveBeenCalledWith(newStyle);
+  });
+});
diff --git a/assets/ts/phoenix-hooks/index.ts b/assets/ts/phoenix-hooks/index.ts
index 912849c439..f905f41488 100644
--- a/assets/ts/phoenix-hooks/index.ts
+++ b/assets/ts/phoenix-hooks/index.ts
@@ -1,6 +1,7 @@
 import AlgoliaAutocomplete from "./algolia-autocomplete";
 import FitBounds from "./fit-bounds";
 import IconMarkers from "./icon-markers";
+import MapHook from "./map";
 import MBTAGoCTABanner from "./mbta-go-cta-banner";
 import MenuButton from "./menu-button";
 import PageVisibility from "./page-visibility";
@@ -23,6 +24,7 @@ const Hooks = {
   AlgoliaAutocomplete,
   FitBounds,
   IconMarkers,
+  MapHook,
   MBTAGoCTABanner,
   MenuButton,
   PageVisibility,
diff --git a/assets/ts/phoenix-hooks/map.ts b/assets/ts/phoenix-hooks/map.ts
new file mode 100644
index 0000000000..b9954133b0
--- /dev/null
+++ b/assets/ts/phoenix-hooks/map.ts
@@ -0,0 +1,53 @@
+import { MapHooks } from "maplibrex";
+import { ViewHook } from "phoenix_live_view";
+
+const MAPLIBREX_STATE = "_maplibrex";
+
+interface MapHookState {
+  map: { setStyle: (style: unknown) => unknown };
+  config: { style?: unknown };
+}
+
+type MapHookInstance = ViewHook & { [MAPLIBREX_STATE]?: MapHookState };
+
+/**
+ * Wraps MaplibreX's map hook so that a patch of the map element doesn't reset
+ * the style when the style hasn't changed.
+ *
+ * MaplibreX compares the previous and new style with `!==`. For a style object
+ * (as opposed to a URL) the freshly parsed config never equals the old one, so
+ * every patch, including the one that follows a LiveView reconnect, calls
+ * `map.setStyle` and wipes out all of the sources and layers added since.
+ */
+const callOriginalUpdated = (hook: MapHookInstance): void =>
+  (MapHooks.MapHook.updated as (this: MapHookInstance) => void).call(hook);
+
+const MapHookWithStableStyle = {
+  ...MapHooks.MapHook,
+
+  updated(this: MapHookInstance) {
+    const state = this[MAPLIBREX_STATE];
+    const rawConfig = this.el.dataset.config;
+    const styleUnchanged =
+      !!state &&
+      !!rawConfig &&
+      JSON.stringify(JSON.parse(rawConfig).style) ===
+        JSON.stringify(state.config.style);
+
+    if (!state || !styleUnchanged) {
+      callOriginalUpdated(this);
+      return;
+    }
+
+    const { map } = state;
+    // Shadow the prototype method for the duration of the call only
+    map.setStyle = () => map;
+    try {
+      callOriginalUpdated(this);
+    } finally {
+      delete (map as Partial<typeof map>).setStyle;
+    }
+  }
+};
+
+export default MapHookWithStableStyle;