capture-coordinates

Overview

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.

<var name="current_location" type="location" />

<capture-coordinates bind="current_location" />

label

required

Advanced Attributes

align-content

align-controls

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.

<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

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

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.

<var name="current_location" type="location" />

<capture-coordinates bind="current_location" allow-zoom="true" />

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

<var name="current_location" type="location" />

<capture-coordinates bind="current_location" height="500" />

<var name="current_location" type="location" />

<display-coordinates bind="current_location" height="500" />

label-case

label-color

id

on-change

on-location

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:

<var name="current_location" type="location" />

<capture-coordinates bind="current_location" on-location="$:onLocation($value)"/> />

function onLocation(location) {
    console.log(location);
    // Example:
    // Object{latitude: 39.7553694, longitude: -105.0195773}
}

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.

<var name="current_location" type="location" />

<capture-coordinates bind="current_location" show-markers="false" />

<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

Programmatically retrieve the current state of the map which will contain the current center and zoom position of the map.

<capture-coordinates id="my-id" bind="current_location" />

try{
  component.captureCoordinates({id: 'my-id'}).getMapState();
}catch (e) {
  // handle exception here
}

<display-coordinates id="my-id" bind="current_location" />

try{
  component.displayCoordinates({id: 'my-id'}).getMapState();
}catch (e) {
  // handle exception here
}

setMapState

Programmatically set the center and/or zoom position of the map to a specific value.

<capture-coordinates id="my-id" bind="current_location" />

try{
  component.captureCoordinates({id: 'my-id'}).setMapState({
    zoom: 12,
    center: new Location({longitude: -33.00, latitude: -10.00})
  });
}catch (e) {
  // handle exception here
}

<display-coordinates id="my-id" bind="current_location" />

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.