Heatmap layer component for MapLibre maps in Phoenix LiveView.

This component renders point data as a heatmap visualization showing density and concentration of data points with smooth color gradients.

Examples

Basic heatmap:

<.heatmap_layer
  id="earthquake-heat"
  map_id="my-map"
  source_id="earthquakes"
  paint={%{
    "heatmap-radius" => 20,
    "heatmap-opacity" => 0.8
  }}
/>

Heatmap with zoom-based intensity:

<.heatmap_layer
  id="event-density"
  map_id="my-map"
  source_id="events"
  paint={%{
    "heatmap-weight" => [
      "interpolate",
      ["linear"],
      ["get", "magnitude"],
      0, 0,
      6, 1
    ],
    "heatmap-intensity" => [
      "interpolate",
      ["linear"],
      ["zoom"],
      0, 1,
      9, 3
    ],
    "heatmap-radius" => [
      "interpolate",
      ["linear"],
      ["zoom"],
      0, 2,
      9, 20
    ],
    "heatmap-opacity" => 1
  }}
/>

Custom color gradient:

<.heatmap_layer
  id="density-map"
  map_id="my-map"
  source_id="points"
  paint={%{
    "heatmap-color" => [
      "interpolate",
      ["linear"],
      ["heatmap-density"],
      0, "rgba(33,102,172,0)",
      0.2, "rgb(103,169,207)",
      0.4, "rgb(209,229,240)",
      0.6, "rgb(253,219,199)",
      0.8, "rgb(239,138,98)",
      1, "rgb(178,24,43)"
    ],
    "heatmap-radius" => 30,
    "heatmap-weight" => ["get", "value"]
  }}
  min_zoom={0}
  max_zoom={15}
/>

Events

The heatmap layer can emit the following events to LiveView:

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

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