Circle layer component for MapLibre maps in Phoenix LiveView.

This component renders point data as circles with variable radius and styling. It's specialized for visualizing POIs, events, and point density with sizes that can be data-driven.

Examples

Basic circle layer:

<.circle_layer
  id="pois"
  map_id="my-map"
  source_id="poi-data"
  paint={%{
    "circle-radius" => 5,
    "circle-color" => "#007cbf"
  }}
/>

Data-driven styling:

<.circle_layer
  id="earthquakes"
  map_id="my-map"
  source_id="earthquake-data"
  paint={%{
    "circle-radius" => ["get", "magnitude"],
    "circle-color" => [
      "interpolate",
      ["linear"],
      ["get", "magnitude"],
      1, "#ffffb2",
      3, "#fd8d3c",
      5, "#bd0026"
    ],
    "circle-opacity" => 0.8
  }}
/>

With filters and zoom constraints:

<.circle_layer
  id="large-cities"
  map_id="my-map"
  source_id="cities"
  source_layer="city-labels"
  filter={[">=", "population", 1000000]}
  min_zoom={4}
  max_zoom={10}
  paint={%{
    "circle-radius" => 8,
    "circle-color" => "#FF0000"
  }}
/>

Events

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

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

def handle_event("layer:feature_mouseleave", %{"layer_id" => id}, socket) do
  # Reset cursor, hide tooltip, etc.
  {:noreply, socket}
end