# marker

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

`marker` was introduced in version **4.82.0** of the JourneyApps Runtime.
{% endhint %}

## Overview

A `marker` can visually highlight a specific location on a map within either the `capture-coordinates` or `display-coordinates` UI component.

### Example - Binding Multiple Markers

{% tabs %}
{% tab title="capture-coordinates" %}
Below is an example of using `capture-coordinates` along with multiple custom markers.

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-9afd4aa86d0d2c6d4cc30a62be24081024537887%2Fcapture-coordinates-bind-markers.png?alt=media)

{% code title="main.view\.xml" %}

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

<capture-coordinates label="My Location" bind="current_location" allow-zoom="true" allow-dragging="true" >  
    <marker bind="map_center" icon="fa-user"/>
    <marker bind="high_school" icon="fa-graduation-cap" />
    <marker bind="food" icon="fa-utensils" />
</capture-coordinates>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function init() {
    view.map_center = new Location({
      latitude: 39.7562259,
      longitude: -105.0094353
    });
    view.high_school = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
    view.food = new Location({
      latitude: 39.7497094,
      longitude: -105.0053815
    });
}
```

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
Below is an example of using `display-coordinates` along with multiple custom markers.

![](https://docs.journeyapps.com/component/display-coordinates/docs-public/assets/display-coordinates-bind-markers.png)

{% code title="main.view\.xml" %}

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

<display-coordinates label="My Location" bind="map_center" allow-zoom="true" allow-dragging="true" >
    <marker bind="map_center" icon="fa-building"/>
    <marker bind="high_school" icon="fa-graduation-cap" />
    <marker bind="food" icon="fa-utensils" />
    <marker bind="my_location" icon="fa-user" />
</display-coordinates>
```

{% endcode %}

{% code title="main.js" %}

```javascript
function init() {
    view.map_center = new Location({
      latitude: 39.7562259,
      longitude: -105.0094353
    });
    view.high_school = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
    view.food = new Location({
      latitude: 39.7497094,
      longitude: -105.0053815
    });
    view.my_location = journey.hardware.getCurrentLocation();
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Standard Attributes

### `bind`

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

{% hint style="info" %}
`bind` can be replaced with [`latitude` and `longitude`](#latitude-and-longitude).
{% endhint %}

### `label`

**Optional**

**Type:** `string` (static text, a [format string](https://docs.journeyapps.com/reference/app-features/xml-format-strings) or the return value of a [JS/TS function](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml))

**Default**: unset

Text to display above the marker in a floating bubble. Text is displayed once a user interacts with the marker.

{% tabs %}
{% tab title="capture-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" label="This is an example label" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" label="This is an example label" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" label="This is an example label" />
</display-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

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

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

Also see:

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

### `latitude` and `longitude`

**Optional**

**Type**: `location`

**Default**: unset

Specifies at which latitude and longitude the marker will be positioned on the map. Use `latitude` and `longitude` from the `location` variable/field to specify the marker location.

{% hint style="info" %}
`latitude` and `longitude` can be replaced with [`bind`](#bind).
{% endhint %}

{% tabs %}
{% tab title="capture-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" />
</display-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" />
</display-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

## Advanced Attributes

### `color`

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: unset

Specify the color of the marker background.&#x20;

{% tabs %}
{% tab title="capture-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" color="#000" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" color="#000" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" color="#000" />
</display-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" color="#000" />
</display-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

### `icon`

**Optional**

**Type**: `string`

**Default**: `fa-circle`

Specify the icon shown in the marker. Find a list of available icons [here](https://docs.journeyapps.com/reference/build/ui-components/all-ui-components/icons).

{% tabs %}
{% tab title="capture-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" />
</display-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" />
</display-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

### `icon-color`

**Optional**

**Type**: `string` - can be a named color or #HEX value

**Default**: unset

Specify the color of the `icon`.&#x20;

{% tabs %}
{% tab title="capture-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<capture-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" icon-color="#000" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
      latitude: 39.7553694,
      longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<capture-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" icon-color="#000" />
</capture-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}

{% tab title="display-coordinates" %}
View XML using `marker`:

{% code title="main.view\.xml" %}

```xml
<var name="current_location" type="location" />
<var name="marker" type="location" />

<display-coordinates bind="current_location">
    <marker latitude="{marker.latitude}" longitude="{marker.longitude}" icon="fa-star" icon-color="#000" />
</display-coordinates>
```

{% endcode %}

View JS using `marker`:

{% code title="main.js" %}

```javascript
function init() {
    // Example marker
    view.marker = new Location({
        latitude: 39.7553694,
        longitude: -105.0195773
    });
}
```

{% endcode %}

View XML using `marker-query`:

{% code title="main.view\.xml" %}

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

<display-coordinates bind="current_location">
    <marker-query query="markers" latitude="{location.latitude}" longitude="{location.longitude}" icon="fa-star" icon-color="#000" />
</display-coordinates>
```

{% endcode %}

View JS using `marker-query`:

{% code title="main.js" %}

```javascript
function init() {
    view.markers = DB.custom_marker.where('location != ?', null).toArray();
}
```

{% endcode %}
{% endtab %}
{% endtabs %}

### `on-press`

{% content-ref url="../../xml-fields/on-press" %}
[on-press](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/on-press)
{% 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 %}