A tooltip anchored to a coordinate.

<HoloMap.Popup id="details" lng_lat={@selected_coords}>
  <h3>{@selected.name}</h3>
  <p>{@selected.address}</p>
</HoloMap.Popup>

A popup declared here is open. Closing it means not rendering it, which is ordinary conditional rendering:

{%if @selected}
  <HoloMap.Popup id="details" lng_lat={@selected.coords}>
    <h3>{@selected.name}</h3>
  </HoloMap.Popup>
{/if}

That is the whole state model. There is no imperative open/close, because "which popup is open" is application state and belongs in your component.

Props

Closing with the built-in button

MapLibre closes a popup on its own for three reasons: the close button, a click on the map (close_on_click, on by default) and a camera move (close_on_move). None of them go through your state, so without help the component that rendered the popup still believes it is open, and clicking the same thing again changes nothing, re-renders nothing, and the popup never comes back.

on_close is what closes that gap. Handle it by clearing whatever state opened the popup, and the declaration matches reality again:

{%if @selected}
  <HoloMap.Popup id="details" lng_lat={@selected.coords} on_close={:selection_cleared}>
    <h3>{@selected.name}</h3>
  </HoloMap.Popup>
{/if}

def action(:selection_cleared, _params, component) do
  put_state(component, :selected, nil)
end

If you would rather not handle it, set close_button={false} and close_on_click={false} so the only way to close the popup is through your own state.

A changed declaration always re-asserts itself: if the props change while MapLibre has the popup closed, it reopens. Selecting a different feature therefore works whether or not the previous popup was dismissed.

Events

on_open fires when the popup is added to the map, on_close when it leaves it, including every close MapLibre performs on its own. Neither carries a payload.