---
title: "Scale control display | JavaScript maps SDK"
description: "Learn to add and display map scale control."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Scale control display
This tutorial shows how to display a scale control on the map.
The measurement units for the scale control can be defined in the configuration object with options such as “metric,” “imperial,” or “nautical.” The default unit is set to “metric.”
## NPM module setup
1. Include the following code in your JavaScript file (Example: app.js).
```js
import * as maptilersdk from '@maptiler/sdk';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [-71.0131, 42.3585], // starting position [lng, lat]
zoom: 9.25, // starting zoom
scaleControl: true // add the scaleControl to the map
});
```
2. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
3. Change the control position to display the control on the `bottom-left` corner of the map. By default, the control is showing on the `bottom-right` corner of the map if `true`. You can specify a corner position (`"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`) to change the control position.
```js
const map = new maptilersdk.Map({
container: 'map', // container id
style: maptilersdk.MapStyle.STREETS,
center: [-71.0131, 42.3585], // starting position [lng, lat]
zoom: 9.25, // starting zoom
scaleControl: "bottom-left" // add the scaleControl to the bottom-left corner of the map
});
```
## Basic JavaScript setup
1. Add options to the map to load the scale control to the map. The `scaleControl` shows a distance scale.
```html
Display a map
```
2. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/developer/credentials/api-key/#secure-key) before you publish it.
3. Change the control position to display the control on the `bottom-left` corner of the map. By default, the control is showing on the `bottom-right` corner of the map if `true`. You can specify a corner position (`"top-left"`, `"top-right"`, `"bottom-left"`, `"bottom-right"`) to change the control position.
```js
const map = new maptilersdk.Map({
container: 'map', // container id
style: maptilersdk.MapStyle.STREETS,
center: [-71.0131, 42.3585], // starting position [lng, lat]
zoom: 9.25, // starting zoom
scaleControl: "bottom-left" // add the scaleControl to the bottom-left corner of the map
});
```
### Complete source code
```html
Display a scale control
```
## Learn more
Check out the [How to change the map labels language based on visitor’s location](../ip-map-language/) to learn how to get the country based on visitor’s location. This would allow you to change the control units depending on the country.
The `scaleControl` units (“metric”, “imperial” or “nautical”) can be set in the config object `config.unit` (default: “metric”)
For example:
```js
if (country_code === 'US' || country_code === 'MM' || country_code === 'LR') { //United States of America or Myanmar or Liberia
maptilersdk.config.unit = 'imperial';
}
```
Visit the [MapTiler SDK JS API reference](https://docs.maptiler.com/sdk-js/api/controls/#scalecontrol) to know all the `scaleControl` options. Like changing the display distance units
## Related examples
### [Measure distances](https://docs.maptiler.com/sdk-js/examples/measure/)
Examples
To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length.
### [Change attribution default position](https://docs.maptiler.com/sdk-js/examples/attribution-position/)
Examples
Position map attribution in the top-left corner on initialization.
### [Minimap control](https://docs.maptiler.com/sdk-js/examples/control-minimap/)
Tutorials
Display an overview minimap control to aid map navigation.