MaplibreX.Components.ScaleControl (MaplibreX v0.1.0)

Scale Control component for adding a scale bar to MapLibre maps.

This component displays a scale bar showing the ratio of a distance on the map to the corresponding distance on the ground. The scale automatically updates as the map zoom level changes.

Examples

Basic scale control:

<.scale_control
  id="scale-control"
  map_id="my-map"
/>

Scale control with custom position:

<.scale_control
  id="scale-control"
  map_id="my-map"
  position="bottom-left"
/>

Control with all options:

<.scale_control
  id="full-scale-control"
  map_id="my-map"
  position="bottom-right"
  max_width={150}
  unit="metric"
/>

Multiple scales with different units:

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

  <.scale_control
    id="scale-metric"
    map_id="my-map"
    position="bottom-left"
    unit="metric"
  />

  <.scale_control
    id="scale-imperial"
    map_id="my-map"
    position="bottom-right"
    unit="imperial"
  />
  """
end

Summary

Functions

scale_control(assigns)

Renders a scale control on the map.

Functions

scale_control(assigns)

Renders a scale control on the map.

Attributes

id (required) - Unique identifier for the control
map_id (required) - ID of the map to add the control to
position - Control position: "top-left", "top-right", "bottom-left", "bottom-right". Defaults to "bottom-left"
max_width - Maximum width of the scale control in pixels. Defaults to 100
unit - Unit of measurement: "imperial" (miles/feet), "metric" (kilometers/meters), or "nautical" (nautical miles). Defaults to "metric"

Slots

None - This component has no slots

Events

This component does not emit custom events. It uses the native MapLibre control behavior.

Notes

The scale control is a native MapLibre GL JS control
The scale automatically updates as the map zoom level changes
Multiple scale controls can be added to show different units simultaneously
The control displays the most appropriate unit based on the current zoom level

Attributes

id (:string) (required)
map_id (:string) (required)
position (:string) - Defaults to "bottom-left".
max_width (:integer) - Defaults to 100.
unit (:string) - Defaults to "metric".
Global attributes are accepted.