What's NewDeveloper CommunitySupportStatus
Search
⌃K
Links

capture-coordinates

Overview

The capture-coordinates component was visually updated in version 4.82.0 of JourneyApps Runtime.
The capture-coordinates component allows users to capture their current location. The captured location will be displayed on a map with a marker.
Light Mode
Dark Mode

Basic Examples

Capture coordinates & markers

The following example shows how GPS location capturing can show a mix between marker-query and marker nodes.
In the example the captured location will be bound to the variable specified in the capture-coordinates bind attribute. Markers are simply locations that are being visually highlighted on a map. This is useful to, for example, show where the captured location is in relation to other points of interest.
<var name="current_location" type="location" />
<var name="markers" type="query:location" />
​
<capture-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" />
</capture-coordinates>

"Foreground" Capturing

The following example shows how GPS location capturing can be performed in the "foreground" i.e. the user sees a map showing how their GPS location is captured.
<var name="current_location" type="location" />
<capture-coordinates label="My Location" bind="current_location" required="false" />

"Background" Capturing

Using the show-if configuration option, it is also possible to capture a GPS location in the background (i.e. the map pictured in the screenshot above is not shown)
<var name="current_location" type="location" />
<capture-coordinates show-if="false" bind="current_location" required="false" />

Standard Attributes

bind

Required
Type: location
Default: unset
The capture-coordinates component uses the GPS location of the device and sets this value on the bind variable/field. This value will update as accuracy increases of the device's GPS location. A marker will autogenerate at the bound location if no <marker /> or <marker-query /> is defined. See show-markers for more information on hiding markers.
Must be a variable or field of type location. See the reference on data model fields for more details.
<var name="current_location" type="location" />
​
<capture-coordinates bind="current_location" />

label

required

Advanced Attributes

align-content

align-controls

Version compatibility
align-controls was introduced in version 4.86.1 of the JourneyApps Runtime.
Optional
Type: center|left | right
Default: left
Specify the alignment of the map’s controls. Note: controls are visible when the allow-zoom or allow-dragging attributes are enabled.
main.view.xml
<columns>
<column>
<info>align-controls="center"</info>
<capture-coordinates align-controls="center" allow-zoom="true" allow-dragging="true" label="">
<marker label="" latitude="39.7392" longitude="-104.9903" />
</capture-coordinates>
</column>
<column>
<info>align-controls="left"</info>
<capture-coordinates align-controls="left" allow-zoom="true" allow-dragging="true" label="">
<marker label="" latitude="39.7392" longitude="-104.9903" />
</capture-coordinates>
</column>
<column>
<info>align-controls="right"</info>
<capture-coordinates align-controls="right" allow-zoom="true" allow-dragging="true" label="">
<marker label="" latitude="39.7392" longitude="-104.9903" />
</capture-coordinates>
</column>
</columns>

align-label

allow-dragging

Version compatibility
allow-dragging was introduced in version 4.82.0 of the JourneyApps Runtime.
Optional
Type: boolean
Default: false
Allow panning the map through touch gestures or mouse click-and-drag movements.
<var name="current_location" type="location" />
​
<capture-coordinates bind="current_location" allow-dragging="true" />

allow-zoom

Version compatibility
allow-zoom was introduced in version 4.82.0 of the JourneyApps Runtime.
Optional
Type: boolean
Default: false
Display the zoom controls on the component and allow changing the zoom level of the map with touch gestures or by scrolling.
capture-coordinates
display-coordinates
main.view.xml
<var name="current_location" type="location" />
​
<capture-coordinates bind="current_location" allow-zoom="true" />
main.view.xml
<var name="current_location" type="location" />
​
<display-coordinates bind="current_location" allow-zoom="true" />

height

Optional
Type: integer
Default: 500
Specify the height (in pixel) of the capture-coordinates / display-coordinates component.
capture-coordinates
display-coordinates
main.view.xml
<var name="current_location" type="location" />
​
<capture-coordinates bind="current_location" height="500" />
main.view.xml
<var name="current_location" type="location" />
​
<display-coordinates bind="current_location" height="500" />

label-case

Version compatibility
label-case was introduced in version 4.81.0 of the JourneyApps Runtime.

label-color

id

on-change

Version compatibility
on-change was introduced in version 4.82.0 of the JourneyApps Runtime.

on-location

Version compatibility
on-location was introduced in version 4.82.0 of the JourneyApps Runtime.
Optional
Default: unset
Triggered when: The user selects a location within the map
Event parameter: $value
Return value: Location object containing the latitude and longitude
on-location is an event that calls a JS/TS $:function or navigation. See more details:
main.view.xml
<var name="current_location" type="location" />
​
<capture-coordinates bind="current_location" on-location="$:onLocation($value)"/> />
main.js
function onLocation(location) {
console.log(location);
// Example:
// Object{latitude: 39.7553694, longitude: -105.0195773}
}
Set allow-zoom and allow-dragging to true to allow users to navigate to different locations on the map.

show-if and hide-if

show-markers

Optional
Type: boolean
Default: true
Show or hide all the markers on the map. show-if/hide-if on individual markers is also available.
capture-coordinates
display-coordinates
main.view.xml
<var name="current_location" type="location" />
​
<capture-coordinates bind="current_location" show-markers="false" />
main.view.xml
<var name="current_location" type="location" />
​
<display-coordinates bind="current_location" show-markers="false" />

Component Methods

The following component methods are available when an id is assigned to the component and component.captureCoordinates({id:'my-id'}) / component.displayCoordinates({id:'my-id'}) is called from JS/TS:

getMapState

Version compatibility
getMapState was introduced in version 4.82.0 of the JourneyApps Runtime.
Programmatically retrieve the current state of the map which will contain the current center and zoom position of the map.
capture-coordinates
display-coordinates
main.view.xml
<capture-coordinates id="my-id" bind="current_location" />
main.js
try{
component.captureCoordinates({id: 'my-id'}).getMapState();
}catch (e) {
// handle exception here
}
main.view.xml
<display-coordinates id="my-id" bind="current_location" />
main.js
try{
component.displayCoordinates({id: 'my-id'}).getMapState();
}catch (e) {
// handle exception here
}

setMapState

Version compatibility
setMapState was introduced in version 4.82.0 of the JourneyApps Runtime.
Programmatically set the center and/or zoom position of the map to a specific value.
capture-coordinates
display-coordinates
main.view.xml
<capture-coordinates id="my-id" bind="current_location" />
main.js
try{
component.captureCoordinates({id: 'my-id'}).setMapState({
zoom: 12,
center: new Location({longitude: -33.00, latitude: -10.00})
});
}catch (e) {
// handle exception here
}
main.view.xml
<display-coordinates id="my-id" bind="current_location" />
main.js
try{
component.displayCoordinates({id: 'my-id'}).setMapState({
zoom: 12,
center: new Location({longitude: -33.00, latitude: -10.00})
});
}catch (e) {
// handle exception here
}

scrollIntoView

Programmatically scroll until the capture-coordinates component is visible in the view.
Previous
button-group
Next
marker
Last modified 5mo ago