Line layer component for MapLibre maps in Phoenix LiveView.

This component renders line data with customizable styling for routes, paths, boundaries, and connections.

Examples

Basic line layer:

<.line_layer
  id="route"
  map_id="my-map"
  source_id="route-data"
  paint={%{
    "line-width" => 3,
    "line-color" => "#007cbf"
  }}
/>

Data-driven styling with dash pattern:

<.line_layer
  id="roads"
  map_id="my-map"
  source_id="road-data"
  paint={%{
    "line-width" => [
      "interpolate",
      ["linear"],
      ["zoom"],
      5, 1,
      10, 2,
      15, 4
    ],
    "line-color" => [
      "match",
      ["get", "class"],
      "motorway", "#e06c00",
      "trunk", "#ff8c00",
      "primary", "#ffa500",
      "#808080"
    ],
    "line-opacity" => 0.8,
    "line-dasharray" => [2, 4]
  }}
  layout={%{
    "line-cap" => "round",
    "line-join" => "round"
  }}
/>

With filters and zoom constraints:

<.line_layer
  id="major-roads"
  map_id="my-map"
  source_id="roads"
  source_layer="road"
  filter={["in", "class", "motorway", "trunk"]}
  min_zoom={5}
  max_zoom={15}
  paint={%{
    "line-width" => 4,
    "line-color" => "#ff6600"
  }}
/>

Events

The line layer can emit the following events to LiveView:

def handle_event("layer:feature_clicked", %{"layer_id" => id, "feature" => feature}, socket) do
  IO.inspect(feature, label: "Clicked road")
  {:noreply, socket}
end

def handle_event("layer:feature_mouseenter", %{"layer_id" => id, "feature" => feature}, socket) do
  # Highlight road, show info, etc.
  {:noreply, socket}
end

def handle_event("layer:feature_mouseleave", %{"layer_id" => id}, socket) do
  # Reset highlight
  {:noreply, socket}
end