MaplibreX.Components.Popup (MaplibreX v0.1.0)

Copy Markdown View Source

Popup component for displaying information on MapLibre maps.

Popups are independent overlays that can be positioned at specific coordinates or attached to markers. They support both plain text and HTML content.

Examples

Basic popup with text:

<.popup
  id="info-popup"
  map_id="my-map"
  lng_lat={[-74.5, 40]}
>
  <p>New York City</p>
</.popup>

Popup with custom styling and options:

<.popup
  id="styled-popup"
  map_id="my-map"
  lng_lat={[-122.4, 37.8]}
  max_width="300px"
  close_button
  close_on_click
  anchor="bottom"
  class="custom-popup"
>
  <div>
    <h3>San Francisco</h3>
    <p>The Golden Gate City</p>
  </div>
</.popup>

Popup controlled by LiveView state:

def render(assigns) do
  ~H"""
  <.popup
    id="dynamic-popup"
    map_id="my-map"
    lng_lat={@popup_location}
    open={@show_popup}
  >
    <%= @popup_content %>
  </.popup>
  """
end

def handle_event("map:clicked", %{"lngLat" => [lng, lat]}, socket) do
  {:noreply,
   assign(socket,
     show_popup: true,
     popup_location: [lng, lat],
     popup_content: "Clicked at coordinates"
   )}
end

Summary

Functions

close(popup_id)

Closes a popup.

open(popup_id, lng_lat)

Opens a popup at the specified coordinates.

popup(assigns)

Renders a popup on the map.

set_location(popup_id, lng_lat)

Sets the popup location without opening it.

toggle(popup_id)

Toggles a popup's visibility.

Functions

close(popup_id)

Closes a popup.

Examples

<button phx-click={MaplibreX.Components.Popup.close("my-popup")}>
  Hide Popup
</button>

open(popup_id, lng_lat)

Opens a popup at the specified coordinates.

Examples

<button phx-click={MaplibreX.Components.Popup.open("my-popup", [-74.5, 40])}>
  Show Popup
</button>

popup(assigns)

Renders a popup on the map.

Attributes

  • id (required) - Unique identifier for the popup
  • map_id (required) - ID of the map to add the popup to
  • lng_lat - Popup position as [longitude, latitude]. If not provided, popup will be created but not displayed until positioned
  • max_width - Maximum width of the popup. Defaults to "240px"
  • close_button - Show close button. Defaults to true
  • close_on_click - Close popup when clicking on the map. Defaults to true
  • close_on_move - Close popup when moving the map. Defaults to false
  • anchor - Popup anchor point. One of: "center", "top", "bottom", "left", "right", "top-left", "top-right", "bottom-left", "bottom-right", "auto". Defaults to "auto"
  • offset - Pixel offset as [x, y] or single number for all sides
  • class_name - CSS class name for the popup container
  • open - Whether the popup should be open. Defaults to true when lng_lat is provided

Slots

  • inner_block (required) - The content to display in the popup

Events

The popup emits the following events:

  • popup:opened - Fired when the popup is opened
  • popup:closed - Fired when the popup is closed

JavaScript Commands

You can control popups from LiveView using:

# Open popup at specific location
MaplibreX.Components.Popup.open("popup-id", [-74.5, 40])

# Close popup
MaplibreX.Components.Popup.close("popup-id")

# Toggle popup
MaplibreX.Components.Popup.toggle("popup-id")

# Update popup content
MaplibreX.Components.Popup.set_content("popup-id", "<h3>New Content</h3>")

Attributes

  • id (:string) (required)
  • map_id (:string) (required)
  • lng_lat (:list) - Defaults to nil.
  • max_width (:string) - Defaults to "240px".
  • close_button (:boolean) - Defaults to true.
  • close_on_click (:boolean) - Defaults to true.
  • close_on_move (:boolean) - Defaults to false.
  • anchor (:string) - Defaults to "auto".
  • offset (:any) - Defaults to nil.
  • class_name (:string) - Defaults to nil.
  • open (:boolean) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

set_location(popup_id, lng_lat)

Sets the popup location without opening it.

Examples

<button phx-click={MaplibreX.Components.Popup.set_location("my-popup", [-74.5, 40])}>
  Move Popup
</button>

toggle(popup_id)

Toggles a popup's visibility.

Examples

<button phx-click={MaplibreX.Components.Popup.toggle("my-popup")}>
  Toggle Popup
</button>