---
title: "formatDistance / formatArea"
description: "Format raw meter and square-meter values into human-readable distance and area strings with adaptive units."
canonical_url: "https://mapbox.mhaibaraai.cn/en/docs/utils/measure"
---
# formatDistance / formatArea

> Format raw meter and square-meter values into human-readable distance and area strings with adaptive units.

## Introduction

`formatDistance` / `formatArea` format raw meter / square-meter values into human-readable strings with units: distances below one kilometer are rounded to whole meters, above that are shown with two decimal places in km; areas below one square kilometer are rounded to whole square meters, above that are shown with two decimal places in km². [useMeasure](https://mapbox.mhaibaraai.cn/docs/composables/use-measure) uses these functions to format its live readings.

Import from `@movk/mapbox/utils/measure` (not auto-imported).

## Usage

Formatted output for inputs of different magnitudes:

```vue
<template>
  <MeasureFormatExample />
</template>
```

## API

### `formatDistance()`

Format a distance value.

**meters** (`number`) *required*: Distance value in meters.

Returns `string`: whole meters below one kilometer (e.g. `850 m`), two decimal places in km above (e.g. `1.23 km`).

### `formatArea()`

Format an area value.

**squareMeters** (`number`) *required*: Area value in square meters.

Returns `string`: whole square meters below one square kilometer (e.g. `5000 m²`), two decimal places in km² above (e.g. `1.20 km²`).

## Changelog

See commit history for [src/runtime/utils/formatDistance  formatArea.ts](https://github.com/mhaibaraai/movk-mapbox/commits/main/src/runtime/utils/formatDistance  formatArea.ts).


## Sitemap

See the full [sitemap](https://mapbox.mhaibaraai.cn/sitemap.md) for all pages.