marker

Version compatibility

marker was introduced in version 4.82.0 of the JourneyApps Runtime.

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

Below is an example of using capture-coordinates along with multiple custom markers.

main.view.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>

main.js

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
    });
}

Below is an example of using display-coordinates along with multiple custom markers.

main.view.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>

main.js

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();
}

Standard Attributes

`bind`

pagebind

bind can be replaced with latitude and longitude.

`label`

Optional

Type: string (static text, a format string or the return value of a JS/TS function)

Default: unset

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

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

Also see:

pagelabel

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

latitude and longitude can be replaced with bind.

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

Advanced Attributes

`color`

Optional

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

Default: unset

Specify the color of the marker background.

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

`icon`

Optional

Type: string

Default: fa-circle

Specify the icon shown in the marker. Find a list of available icons here.

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

`icon-color`

Optional

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

Default: unset

Specify the color of the icon.

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

View XML using marker:

main.view.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>

View JS using marker:

main.js

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

View XML using marker-query:

main.view.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>

View JS using marker-query:

main.js

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

`on-press`

pageon-press

`show-if` and `hide-if`

pageshow-if pagehide-if

Previouscapture-coordinates Nextmarker-query

Last updated 1 year ago

Overview

Example - Binding Multiple Markers

Standard Attributes

bind

label

latitude and longitude

Advanced Attributes

color

icon

icon-color

on-press

show-if and hide-if

`bind`

`label`

`latitude` and `longitude`

`color`

`icon`

`icon-color`

`on-press`

`show-if` and `hide-if`