MaplibreX.Components.NavigationControl (MaplibreX v0.1.0)

Copy Markdown View Source

Navigation Control component for adding zoom and rotation controls to MapLibre maps.

This component provides standard navigation controls including zoom buttons (+/-), compass for rotation, and optional pitch visualization.

Examples

Basic navigation control:

<.navigation_control
  id="nav-control"
  map_id="my-map"
/>

Navigation control with custom position:

<.navigation_control
  id="nav-control"
  map_id="my-map"
  position="top-left"
/>

Control with all options:

<.navigation_control
  id="full-nav-control"
  map_id="my-map"
  position="top-right"
  show_compass={true}
  show_zoom={true}
  visualize_pitch={true}
/>

Multiple controls on same map:

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

  <.navigation_control
    id="nav-zoom"
    map_id="my-map"
    position="top-right"
    show_compass={false}
    show_zoom={true}
  />

  <.navigation_control
    id="nav-compass"
    map_id="my-map"
    position="bottom-right"
    show_compass={true}
    show_zoom={false}
  />
  """
end

Summary

Functions

navigation_control(assigns)

Renders a navigation control on the map.

Functions