display-coordinates
Overview
The display-coordinates
component shows a specific location (or multiple locations) on a map.

Basic Example
The following example shows a GPS location defined in a view variable (using marker
), as well as a series of GPS locations using a query (using marker-query
).
In the example the user's current location is bound to the variable specified in the display-coordinates
bind
attribute (however, you could bind any location here). Markers allow you to visually display specific locations on a map. This is useful, for example, to show where the user's current location is in relation to other points of interest.
<var name="current_location" type="location" />
<var name="markers" type="array:location" />
<display-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" />
</display-coordinates>
Standard Attributes
bind
bind
Required
bind
is responsible for setting the current center of the map within the display-coordinates
component. A marker will autogenerate at the center location if no marker
or marker-query
is defined. See show-markers for more information on hiding markers.
<var name="map_center" type="location" />
<display-coordinates bind="map_center" />
Also see:
bindlabel
labellabel
Advanced Attributes
align-content
align-contentalign-content
align-controls
align-controls
See capture-coordinates
> align-controls
align-label
align-labelalign-label
allow-dragging
allow-dragging
See capture-coordinates
> allow-dragging
allow-zoom
allow-zoom
See capture-coordinates
> allow-zoom
height
height
See capture-coordinates
> height
id
idid
label-case
label-caselabel-case
label-color
label-colorlabel-color
show-if
and hide-if
show-ifhide-ifshow-if
and hide-if
show-markers
show-markers
See capture-coordinates
> show-markers
Component Methods
The following component methods are available when an id
is assigned to the component and component.displayCoordinates({id:'my-id'})
is called from JS/TS:
getMapState
getMapState
See capture-coordinates
> getMapState
scrollIntoView
scrollIntoView
See capture-coordinates
> scrollIntoView
setMapState
setMapState
Last updated