add links to select specific route group on startpage

assets/css/main.scss

@@ -1087,6 +1087,7 @@ ol.hide-bullets {
 table.route-list {
   margin-right: calc(-0.5em - 0.3rem);
   line-height: 1.8rem;
+  margin-top: 0.7rem;
 
   th {
     padding-right: 0.3rem;

assets/js/map.js

@@ -208,6 +208,7 @@ const isVideoPlaying = () => {
 
 window.addEventListener(`phx:bounds:adjust`, (e) => {
   console.debug("adjusting bounds to", e.detail)
+  disableIndicatorAnimationOnce()
   map.fitBounds(e.detail, fitBoundsOpt);
 })
 

data/articles/static/startpage.ex

@@ -16,6 +16,9 @@ defmodule Data.Article.Static.Startpage do
 
     <h4>Alltagsrouten</h4>
     <p>Hamburg baut „Velorouten“ (auch: Radrouten) um im Alltag gut von A nach B zu kommen – zu jeder Tages- und Jahreszeit. Gebaut wird noch, aber oft sind diese Strecken heute schon besser als der offensichtliche Weg.</p>
+
+    <p><.show_route_group group={:alltag}>Kartenansicht</.show_route_group> oder Route auswählen:</p>
+
     <ol class="route-list">
       <li><.icon autoplay={true} name="1"><span>Rissen / Osdorfer Born</span></.icon></li>
       <li><.icon autoplay={true} name="2"><span>Eidelstedt</span></.icon></li>
@@ -32,8 +35,12 @@ defmodule Data.Article.Static.Startpage do
       <li><.icon autoplay={true} name="13"><span>innerer Ring</span></.icon></li>
       <li><.icon autoplay={true} name="14"><span>äußerer Ring</span></.icon></li>
     </ol>
+
     <h4>Freizeitrouten</h4>
     <p>Die Freizeitrouten führen durch Parks, Naturschutzgebiete und Wälder, zu Sehenswürdigkeiten und Ausflugszielen. Die Strecken sind klar auf Erholung ausgelegt – der Weg ist das Ziel.</p>
+
+    <p><.show_route_group group={:freizeit}>Kartenansicht</.show_route_group> oder Route auswählen:</p>
+
     <ol class="route-list">
       <li><.icon autoplay={true} name="1GR"><span>1. Grüner Ring</span></.icon></li>
       <li><.icon autoplay={true} name="FR1"><span>Alster</span></.icon></li>
@@ -53,8 +60,12 @@ defmodule Data.Article.Static.Startpage do
       <li><.icon autoplay={true} name="e"><span>Elbradweg (Südseite)</span></.icon></li>
     </ol>
 
+
     <h4>Bezirke</h4>
     <p>Bezirksrouten sollen das Hauptnetz der Velorouten ergänzen. Sie sind noch im frühen Planungsstadium und nicht für alle Bezirke ausgearbeitet.</p>
+
+    <p><.show_route_group group={:bezirk}>Kartenansicht</.show_route_group> oder Route auswählen:</p>
+
     <table class="route-list" role="list">
       <tr role="group">
         <th>Eimsbüttel</th>
@@ -110,6 +121,8 @@ defmodule Data.Article.Static.Startpage do
     <h4>Umland</h4>
     <p>Auch umliegende Gemeinden schaffen Vorzugsrouten für's Rad. „<.ref>Radschnellwege</.ref>“ (auch: Radrouten Plus) sollen die Metropolregion besser verbinden, sind bisher aber noch in der Planung und nicht befahrbar.</p>
 
+    <p><.show_route_group group={:alltag}>Kartenansicht Alltagsrouten</.show_route_group> oder <.show_route_group group={:rsw}>Kartenansicht Radschnellwege</.show_route_group> oder Route auswählen:</p>
+
     <table class="route-list" role="list">
       <tr role="group">
         <th>Pinneberg</th>

lib/components/tag_helpers.ex

@@ -118,6 +118,36 @@ defmodule Components.TagHelpers do
     Phoenix.LiveView.JS.dispatch(js, "map:ping", detail: %{name: name})
   end
 
+  @spec show_route_group(map()) :: Phoenix.LiveView.Rendered.t()
+  attr :group, :atom, required: true
+  attr :rest, :global
+  slot(:inner_block, required: true)
+
+  def show_route_group(assigns) do
+    layer_name = Enum.find(Settings.map_layers(), &(&1.route_group == assigns.group)).name
+
+    routes =
+      Article.List.category("Static")
+      |> Enum.filter(&(&1.route_group() == assigns.group))
+
+    bbox =
+      routes
+      |> Enum.map(&Article.Decorators.bbox/1)
+      |> Geo.CheapRuler.union()
+
+    js =
+      Phoenix.LiveView.JS.push("show-routes", value: %{name: layer_name}, target: "#map")
+      |> Phoenix.LiveView.JS.dispatch("click", to: "#switcher")
+      |> Phoenix.LiveView.JS.push("map-zoom-to", value: %{bounds: bbox})
+
+    assigns = assign(assigns, :rest, Map.put_new(assigns.rest, "class", "map"))
+    assigns = assign(assigns, :js, js)
+
+    ~H"""
+    <a phx-click={@js} {@rest}><%= render_slot(@inner_block) %></a>
+    """
+  end
+
   @spec mailto(map()) :: Phoenix.LiveView.Rendered.t()
   attr :email, :string
   attr :subject, :string

lib/geo/cheap_ruler.ex

@@ -81,6 +81,9 @@ defmodule Geo.CheapRuler do
     %Geo.BoundingBox{minLon: minLon, minLat: minLat, maxLon: maxLon, maxLat: maxLat}
   end
 
+  def union([bbox1, bbox2 | rest]), do: union([union(bbox1, bbox2) | rest])
+  def union([bbox]), do: bbox
+
   @doc ~S"""
   Finds center of given geo object
 

lib/veloroute_web/live/map.ex

@@ -100,6 +100,16 @@ defmodule VelorouteWeb.Live.Map do
     {:noreply, socket}
   end
 
+  def handle_event("show-routes", %{"name" => selected}, %{assigns: %{layers: layers}} = socket) do
+    layers =
+      Enum.map(layers, fn %{name: name} = layer ->
+        %{layer | active: name == selected}
+      end)
+
+    socket = socket |> assign(:layers, layers) |> push_changes()
+    {:noreply, socket}
+  end
+
   @push_to_frontend [:layers, :styles, :highlight]
   defp push_changes(%{assigns: assigns} = socket) do
     updates =