---
title: "display-coordinates"
description: "Overview"
permalink: /docs/build/ui-components/all-ui-components/display-coordinates/
---
# display-coordinates

## Overview

<Info title={"Version compatibility"}>

The `display-coordinates` component was introduced in version **4.82.0** of the JourneyApps Runtime.

</Info>

The `display-coordinates` component shows a specific location (or multiple locations) on a map.

### Light Mode

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-d0322a4c66f6f4805a1332af37cbac87bcdf6c78-2fdisplay-coordinates-light-8e563c7e.png)

### Dark Mode

![](./media/spaces-2f9tchlr67elhbojpvhhud-2fuploads-2fgit-blob-6928fe17f813021df7313b4015e1830bd37a3084-2fdisplay-coordinates-dark-9abaa5aa.png)

### Basic Example

The following example shows a GPS location defined in a view variable (using `marker`), as well as a series of GPS locations using a query (using `marker-query`).

In the example the user's current location is bound to the variable specified in the `display-coordinates` `bind` attribute (however, you could bind any location here). Markers allow you to visually display specific locations on a map. This is useful, for example, to show where the user's current location is in relation to other points of interest.

```xml
<var name="current_location" type="location" />
<var name="markers" type="array:location" />

<display-coordinates bind="current_location">
    <marker label="You are here" bind="current_location" icon="fa-home" />
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" label="This is an example label" />
</display-coordinates>
```

## Advanced Attributes

### `align-controls`

See [`capture-coordinates` > `align-controls`](/docs/build/ui-components/capture-coordinates/#align-controls)

### `allow-dragging`

See [`capture-coordinates` > `allow-dragging`](/docs/build/ui-components/capture-coordinates/#allow-dragging)

### `allow-zoom`

See [`capture-coordinates` > `allow-zoom`](/docs/build/ui-components/capture-coordinates/#allow-zoom)

### `height`

See [`capture-coordinates` > `height`](/docs/build/ui-components/capture-coordinates/#height)

### `show-markers`

See [`capture-coordinates` > `show-markers`](/docs/build/ui-components/capture-coordinates/#show-markers)

### `align-content`

<AttributeReference label="align-content" href="/docs/build/ui-components/common-attributes/align-content/" badge="advanced" tone="muted" />

### `align-label`

<AttributeReference label="align-label" href="/docs/build/ui-components/common-attributes/align-label/" badge="advanced" tone="muted" />

### `id`

<AttributeReference label="id" href="/docs/build/ui-components/common-attributes/id/" badge="advanced" tone="muted" />

### `label-case`

<AttributeReference label="label-case" href="/docs/build/ui-components/common-attributes/label-case/" badge="advanced" tone="muted" />

### `label-color`

<AttributeReference label="label-color" href="/docs/build/ui-components/common-attributes/label-color/" badge="advanced" tone="muted" />

### `show-if`

<AttributeReference label="show-if" href="/docs/build/ui-components/common-attributes/show-if/" badge="advanced" tone="muted" />

### `hide-if`

<AttributeReference label="hide-if" href="/docs/build/ui-components/common-attributes/hide-if/" badge="advanced" tone="muted" />

## Common Attributes

### `bind`

<SyntaxCard required />

`bind` is responsible for setting the current center of the map within the `display-coordinates` component. A marker will autogenerate at the center location if no `marker` or `marker-query` is defined. See [show-markers](#show-markers) for more information on hiding markers.

<Info>

Must be a variable or field of type `location`. See the reference on [data model fields](/docs/build/data-model-configuration/model/field/) for more details.

</Info>

```xml
<var name="map_center" type="location" />

<display-coordinates bind="map_center" />
```

Also see:

<AttributeReference label="bind" href="/docs/build/ui-components/common-attributes/bind/" />

### `label`

<AttributeReference label="label" href="/docs/build/ui-components/common-attributes/label/" />

## Component Methods

The following component methods are available when an [`id`](/docs/build/ui-components/common-attributes/id/) is assigned to the component and `component.displayCoordinates({id:'my-id'})` is called from JS/TS:

### `getMapState`

See [`capture-coordinates` > `getMapState`](/docs/build/ui-components/capture-coordinates/#getmapstate)

### `scrollIntoView`

See [`capture-coordinates` > `scrollIntoView`](/docs/build/ui-components/capture-coordinates/#scrollintoview)

### `setMapState`

See [`capture-coordinates` > `setMapState`](/docs/build/ui-components/capture-coordinates/#setmapstate)