# display-coordinates

## Overview

{% hint style="info" %}
**Version compatibility**

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

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

{% tabs %}
{% tab title="Light Mode" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-d0322a4c66f6f4805a1332af37cbac87bcdf6c78%2Fdisplay-coordinates-light.png?alt=media)
{% endtab %}

{% tab title="Dark Mode" %}
![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-6928fe17f813021df7313b4015e1830bd37a3084%2Fdisplay-coordinates-dark.png?alt=media)
{% endtab %}
{% endtabs %}

### 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>
```

## Standard Attributes

### `bind`

**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.

{% hint style="info" %}
Must be a variable or field of type `location`. See the reference on [data model fields](https://docs.journeyapps.com/reference/build/data-model-configuration/model/field) for more details.
{% endhint %}

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

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

Also see:

{% content-ref url="../xml-fields/bind" %}
[bind](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/bind)
{% endcontent-ref %}

### `label`

{% content-ref url="../xml-fields/label" %}
[label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label)
{% endcontent-ref %}

## Advanced Attributes

### `align-content`

{% content-ref url="../xml-fields/align-content" %}
[align-content](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-content)
{% endcontent-ref %}

### `align-controls`

See [`capture-coordinates` > `align-controls`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#align-controls)

### `align-label`

{% content-ref url="../xml-fields/align-label" %}
[align-label](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/align-label)
{% endcontent-ref %}

### `allow-dragging`

See [`capture-coordinates` > `allow-dragging`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#allow-dragging)

### `allow-zoom`

See [`capture-coordinates` > `allow-zoom`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#allow-zoom)

### `height`

See [`capture-coordinates` > `height`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#height)

### `id`

{% content-ref url="../xml-fields/id" %}
[id](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/id)
{% endcontent-ref %}

### `label-case`

{% content-ref url="../xml-fields/label-case" %}
[label-case](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-case)
{% endcontent-ref %}

### `label-color`

{% content-ref url="../xml-fields/label-color" %}
[label-color](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/label-color)
{% endcontent-ref %}

### `show-if` and `hide-if`

{% content-ref url="../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

### `show-markers`

See [`capture-coordinates` > `show-markers`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#show-markers)

## Component Methods

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

### `getMapState`

See [`capture-coordinates` > `getMapState`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#getmapstate)

### `scrollIntoView`

See [`capture-coordinates` > `scrollIntoView`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#scrollintoview)

### `setMapState`

See [`capture-coordinates` > `setMapState`](https://docs.journeyapps.com/reference/build/ui-components/capture-coordinates#setmapstate)