Fill extrusion layer component for MapLibre maps in Phoenix LiveView.

This component renders 3D extruded polygons, commonly used for buildings and data visualizations with height/elevation dimensions.

Examples

Basic 3D buildings:

<.fill_extrusion_layer
  id="buildings-3d"
  map_id="my-map"
  source_id="buildings"
  paint={%{
    "fill-extrusion-color" => "#aaa",
    "fill-extrusion-height" => ["get", "height"],
    "fill-extrusion-base" => 0,
    "fill-extrusion-opacity" => 0.6
  }}
/>

Buildings with base height and vertical gradient:

<.fill_extrusion_layer
  id="buildings-gradient"
  map_id="my-map"
  source_id="buildings"
  paint={%{
    "fill-extrusion-color" => [
      "interpolate",
      ["linear"],
      ["get", "height"],
      0, "#fbb03b",
      50, "#223b53",
      100, "#e55e5e"
    ],
    "fill-extrusion-height" => ["get", "height"],
    "fill-extrusion-base" => ["get", "min_height"],
    "fill-extrusion-opacity" => 0.9,
    "fill-extrusion-vertical-gradient" => true
  }}
  filter={["==", "extrude", "true"]}
/>

Data visualization with extrusion:

<.fill_extrusion_layer
  id="population-3d"
  map_id="my-map"
  source_id="counties"
  paint={%{
    "fill-extrusion-color" => "#00f",
    "fill-extrusion-height" => [
      "*",
      ["get", "population"],
      0.001
    ],
    "fill-extrusion-base" => 0,
    "fill-extrusion-opacity" => 0.7
  }}
/>

Events

The fill extrusion layer can emit the following events to LiveView:

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

def handle_event("layer:feature_mouseenter", %{"layer_id" => layer_id, "features" => features}, socket) do
  IO.inspect(features, label: "Hovering over building")
  {:noreply, socket}
end

def handle_event("layer:added", %{"layer_id" => layer_id}, socket) do
  IO.inspect(layer_id, label: "3D layer added")
  {:noreply, socket}
end