Links

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

capture-coordinates
display-coordinates
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.
Could not load image
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

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.
capture-coordinates
display-coordinates
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:

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.
capture-coordinates
display-coordinates
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
Default: unset
Specify the color of the marker background. The color attribute can be a named text-color or #HEX value.
capture-coordinates
display-coordinates
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 left icon in the row. Find a list of available icons here.
capture-coordinates
display-coordinates
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
Default: unset
Specify the color of the icon. The icon-color attribute can be a named text-color or #HEX value.
capture-coordinates
display-coordinates
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

show-if and hide-if