capture-coordinates
Last updated
Last updated
The capture-coordinates
component allows users to capture their current location. The captured location will be displayed on a map with a marker.
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.
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.
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)
bind
Required
Type: location
Default: unset
label
required
align-content
align-controls
Optional
Type: center
|left
| right
Default: left
align-label
allow-dragging
Optional
Type: boolean
Default: false
Allow panning the map through touch gestures or mouse click-and-drag movements.
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.
height
Optional
Type: integer
Default: 500
Specify the height (in pixel) of the capture-coordinates
/ display-coordinates
component.
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
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.
getMapState
Programmatically retrieve the current state of the map which will contain the current center and zoom position of the map.
setMapState
Programmatically set the center and/or zoom position of the map to a specific value.
scrollIntoView
Programmatically scroll until the capture-coordinates
component is visible in the view.
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 for more information on hiding markers.
Must be a variable or field of type location
. See the reference on for more details.
Specify the alignment of the map’s controls. Note: controls are visible when the or attributes are enabled.
on-location
is an event that calls a JS/TS or . See more details:
The following component methods are available when an is assigned to the component and component.captureCoordinates({id:'my-id'})
/ component.displayCoordinates({id:'my-id'})
is called from JS/TS: