Generic Control component for creating custom controls on MapLibre maps.

This component provides a base for creating custom UI controls that can be positioned at the corners of the map. It accepts arbitrary HTML content via slots, making it flexible for any custom control needs.

Examples

Basic custom control:

<.control
  id="my-control"
  map_id="my-map"
  position="top-left"
>
  <div class="bg-white p-2 rounded shadow">
    <button phx-click="my_action">Custom Action</button>
  </div>
</.control>

Control with multiple buttons:

<.control
  id="custom-panel"
  map_id="my-map"
  position="top-right"
  class="custom-control-panel"
>
  <div class="flex flex-col gap-2 p-2 bg-white rounded shadow">
    <button phx-click="action_one" class="btn">Action 1</button>
    <button phx-click="action_two" class="btn">Action 2</button>
    <button phx-click="action_three" class="btn">Action 3</button>
  </div>
</.control>

Control with LiveView bindings:

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

  <.control
    id="layer-toggle"
    map_id="my-map"
    position="top-right"
  >
    <div class="bg-white p-3 rounded shadow">
      <h3 class="font-bold mb-2">Layers</h3>
      <label class="flex items-center gap-2">
        <input
          type="checkbox"
          checked={@show_layer_1}
          phx-click="toggle_layer_1"
        />
        <span>Layer 1</span>
      </label>
      <label class="flex items-center gap-2">
        <input
          type="checkbox"
          checked={@show_layer_2}
          phx-click="toggle_layer_2"
        />
        <span>Layer 2</span>
      </label>
    </div>
  </.control>
  """
end

Info control with dynamic content:

<.control
  id="info-box"
  map_id="my-map"
  position="bottom-left"
>
  <div class="bg-white p-3 rounded shadow max-w-xs">
    <h4 class="font-bold"><%= @selected_feature.name %></h4>
    <p class="text-sm text-gray-600"><%= @selected_feature.description %></p>
  </div>
</.control>