Fill layer component for MapLibre maps in Phoenix LiveView.

This component renders polygon data as filled areas with customizable styling for regions, zones, and administrative boundaries.

Examples

Basic fill layer:

<.fill_layer
  id="states"
  map_id="my-map"
  source_id="state-data"
  paint={%{
    "fill-color" => "#088",
    "fill-opacity" => 0.4
  }}
/>

Data-driven styling with outline:

<.fill_layer
  id="countries"
  map_id="my-map"
  source_id="country-data"
  paint={%{
    "fill-color" => [
      "match",
      ["get", "continent"],
      "North America", "#1f78b4",
      "Europe", "#33a02c",
      "Asia", "#e31a1c",
      "Africa", "#ff7f00",
      "#808080"
    ],
    "fill-opacity" => 0.6,
    "fill-outline-color" => "#000"
  }}
/>

With filters and pattern:

<.fill_layer
  id="parks"
  map_id="my-map"
  source_id="land-use"
  source_layer="parks"
  filter={["==", "type", "park"]}
  paint={%{
    "fill-color" => "#00ff00",
    "fill-opacity" => 0.3,
    "fill-outline-color" => "#006600"
  }}
  min_zoom={10}
  max_zoom={22}
/>

Events

The fill 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 region")
  {:noreply, socket}
end

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

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