---
title: "<ScriptMapLibreScaleControl>"
description: "Adds MapLibre's scale bar to the nearest parent map. MapLibre places it in the bottom-left corner by default."
canonical_url: "https://scripts.nuxt.com/scripts/maplibre/api/scale-control"
last_updated: "2026-09-21T15:42:49.686Z"
---

Adds MapLibre's scale bar to the nearest parent map. MapLibre places it in the bottom-left corner by default.

```vue
<template>
  <ScriptMapLibreMap map-style="https://tiles.openfreemap.org/styles/liberty" :center="[147.33, -42.88]">
    <ScriptMapLibreScaleControl position="bottom-left" :options="{ unit: 'metric', maxWidth: 120 }" />
  </ScriptMapLibreMap>
</template>
```

`new maplibregl.ScaleControl()`{lang="ts"} reads `options` and `position` once, when it creates the control. `options.unit` also updates reactively through `setUnit()`{lang="ts"}. To apply any other change, change the component `key`.

::script-types{script-key="maplibre" filter="ScriptMapLibreScaleControl"}
::

## Sitemap

See the full [sitemap](/sitemap.md) for all pages.