refactor: Replace line page's map implementation with MaplibreX

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`).
+  // The map wrapper is `isolate`d so this can't overlap dropdowns outside the map.
+  z-index: $z-index-map-popup;
+
   .maplibregl-popup-content {
     background-color: $black;
     color: $white;

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 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;

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;

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: { ...MapHooks, ...DotcomHooks, Map },
   dom: {
     onBeforeElUpdated(from, to) {
       /*