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.

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`

pagelabel

`required`

pagerequired

Advanced Attributes

`align-content`

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

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

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.

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.

pagelabel-case

`label-color`

pagelabel-color

`id`

pageid

`on-change`

Version compatibility

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

pageon-change

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

pageJS/TS Events

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`

pageshow-if pagehide-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.

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.

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.

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.

Previousbutton-group Nextmarker

Last updated 1 year ago

Overview

Basic Examples

Capture coordinates & markers

"Foreground" Capturing

"Background" Capturing

Standard Attributes

bind

label

required

Advanced Attributes

align-content

align-controls

align-label

allow-dragging

allow-zoom

height

label-case

label-color

id

on-change

on-location

show-if and hide-if

show-markers

Component Methods

getMapState

setMapState

scrollIntoView

`bind`

`label`

`required`

`align-content`

`align-controls`

`align-label`

`allow-dragging`

`allow-zoom`

`height`

`label-case`

`label-color`

`id`

`on-change`

`on-location`

`show-if` and `hide-if`

`show-markers`

`getMapState`

`setMapState`

`scrollIntoView`