Reusable button control for MapLibre maps.

This component provides a standardized button control with optional icons, tooltips, and active state styling. It can display either a text icon name or custom HTML/SVG content via slot.

Examples

Button with text icon:

<.control_button
  id="layers-btn"
  map_id="my-map"
  icon="layers"
  tooltip="Toggle Layers"
  phx-click="toggle_layers"
/>

Button with custom SVG icon:

<.control_button
  id="custom-btn"
  map_id="my-map"
  tooltip="Custom Action"
  phx-click="custom_action"
>
  <svg width="20" height="20" viewBox="0 0 20 20">
    <path d="M10 0 L20 10 L10 20 L0 10 Z" fill="currentColor"/>
  </svg>
</.control_button>

Button with active state:

<.control_button
  id="filter-btn"
  map_id="my-map"
  icon="filter"
  tooltip="Filter"
  active={@filter_active}
  phx-click="toggle_filter"
/>

Multiple buttons at different positions:

def render(assigns) do
  ~H"""
  <.map id="my-map" center={[-74.5, 40]} zoom={9} style={@style} class="h-96" />

  <.control_button
    id="zoom-in"
    map_id="my-map"
    position="top-right"
    icon="+"
    tooltip="Zoom In"
    phx-click="zoom_in"
  />

  <.control_button
    id="zoom-out"
    map_id="my-map"
    position="top-right"
    icon="-"
    tooltip="Zoom Out"
    phx-click="zoom_out"
  />

  <.control_button
    id="my-location"
    map_id="my-map"
    position="bottom-right"
    icon="📍"
    tooltip="My Location"
    phx-click="go_to_location"
  />
  """
end

Button with Heroicons (if using heroicons library):

<.control_button
  id="settings"
  map_id="my-map"
  tooltip="Settings"
  phx-click="open_settings"
>
  <.icon name="hero-cog" class="w-5 h-5" />
</.control_button>