feat: Add a map to the new line page

config/config.exs

@@ -90,7 +90,7 @@ end
 config :mbta_metro, :map, %{
   center: [-71.0589, 42.3601],
   maxZoom: 18,
-  minZoom: 8,
+  minZoom: 7,
   style: %{
     "version" => 8,
     "sources" => %{

lib/dotcom_web/live/line_diagram_live.ex

@@ -5,8 +5,10 @@ defmodule DotcomWeb.LineDiagramLive do
 
   use DotcomWeb, :live_view
   @route_patterns_repo Application.compile_env!(:dotcom, :repo_modules)[:route_patterns]
+  @stops_repo Application.compile_env!(:dotcom, :repo_modules)[:stops]
   @alerts_repo Application.compile_env!(:dotcom, :repo_modules)[:alerts]
   @date_time_module Application.compile_env!(:dotcom, :date_time_module)
+  @map_config Application.compile_env(:mbta_metro, :map)
 
   @guides [
     %{
@@ -87,10 +89,9 @@ defmodule DotcomWeb.LineDiagramLive do
   def mount(params, _session, socket) do
     route = socket.assigns.route
     route_id = route.id
-    route_patterns = @route_patterns_repo.by_route_id(route_id)
 
     direction_id =
-      params |> Map.get("schedule_direction", %{direction_id: 0}) |> Map.get("direction_id")
+      params |> Map.get("schedule_direction", %{"direction_id" => 1}) |> Map.get("direction_id")
 
     tab_params = %{"schedule_direction[direction_id]": direction_id}
 
@@ -99,8 +100,9 @@ defmodule DotcomWeb.LineDiagramLive do
 
     {:ok,
      socket
+     |> assign(:map_config, @map_config)
      |> assign(:direction_id, direction_id)
-     |> assign(:route_patterns, route_patterns)
+     |> assign_route_patterns()
      |> assign(:route_id, route_id)
      |> assign(:route, route)
      |> assign(:tab, "new_line")
@@ -187,6 +189,12 @@ defmodule DotcomWeb.LineDiagramLive do
         >
           🚧 Under Construction 🚧
         </marquee>
+        <.map
+          map_config={@map_config}
+          route_patterns={@route_patterns}
+          map_lines={@map_lines}
+          map_icons={@map_icons}
+        />
       </div>
       <div class="col-md-5 gap-[32px] flex flex-col">
         <marquee
@@ -203,6 +211,80 @@ defmodule DotcomWeb.LineDiagramLive do
     """
   end
 
+  defp assign_route_patterns(%{assigns: %{route: route, direction_id: direction_id}} = socket) do
+    route_patterns =
+      @route_patterns_repo.by_route_id(route.id,
+        direction_id: direction_id,
+        include: "representative_trip.shape,representative_trip.stops"
+      )
+      |> Enum.filter(&(&1.typicality == 1))
+      |> filter_unwanted_route_patterns(route.id)
+
+    socket
+    |> assign(:route_patterns, route_patterns)
+    |> assign_map_attributes()
+  end
+
+  defp filter_unwanted_route_patterns(route_patterns, route_id)
+       when route_id in ["Boat-F6", "Boat-F7"] do
+    route_patterns
+    |> Enum.reject(&(&1.route_id == "Boat-F8"))
+  end
+
+  defp filter_unwanted_route_patterns(route_patterns, _route_id), do: route_patterns
+
+  defp assign_map_attributes(socket) do
+    socket
+    |> assign_map_lines()
+    |> assign_map_icons()
+  end
+
+  defp assign_map_lines(%{assigns: %{route: route, route_patterns: route_patterns}} = socket) do
+    map_line_shapes =
+      route_patterns
+      |> Enum.map(fn route_pattern ->
+        %{
+          coordinates:
+            route_pattern.representative_trip_polyline
+            |> Polyline.decode()
+            |> Enum.map(fn {lng, lat} -> [lng, lat] end)
+        }
+      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)
+  end
+
+  defp assign_map_icons(%{assigns: %{route_patterns: route_patterns}} = socket) do
+    map_icons =
+      route_patterns
+      |> Stream.flat_map(& &1.stop_ids)
+      |> Stream.uniq()
+      |> Stream.map(&@stops_repo.get/1)
+      |> Stream.map(
+        &%{
+          coordinates: [&1.longitude, &1.latitude],
+          type: "icon-svg",
+          name: "icon-stop-circle-bordered-expanded",
+          class: "size-3"
+        }
+      )
+      |> Enum.to_list()
+
+    socket
+    |> assign(:map_icons, map_icons)
+  end
+
   defp assign_pdfs(%{assigns: %{route_id: route_id, date: date}} = socket) do
     pdfs =
       Dotcom.RoutePdfs.fetch_and_choose_pdfs(
@@ -213,6 +295,19 @@ defmodule DotcomWeb.LineDiagramLive do
     socket |> assign(:route_pdfs, pdfs)
   end
 
+  defp map(assigns) do
+    ~H"""
+    <.live_component
+      module={DotcomWeb.Components.Map}
+      id="trip-planner-map"
+      class="h-96 w-full"
+      config={@map_config}
+      lines={@map_lines}
+      icons={@map_icons}
+    />
+    """
+  end
+
   defp route_pdf_sidebar_content(assigns) do
     ~H"""
     <div :if={!Enum.empty?(@route_pdfs)}>