display-coordinates

Overview

Version compatibility

The display-coordinates component was introduced in version 4.82.0 of the JourneyApps Runtime.

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

Light Mode

Dark Mode

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

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.

Must be a variable or field of type location. See the reference on data model fields for more details.

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

<display-coordinates bind="map_center" />

Also see:

pagebind

label

pagelabel

Advanced Attributes

align-content

pagealign-content

align-controls

See capture-coordinates > align-controls

align-label

pagealign-label

allow-dragging

See capture-coordinates > allow-dragging

allow-zoom

See capture-coordinates > allow-zoom

height

See capture-coordinates > height

id

pageid

label-case

pagelabel-case

label-color

pagelabel-color

show-if and hide-if

pageshow-ifpagehide-if

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

See capture-coordinates > getMapState

scrollIntoView

See capture-coordinates > scrollIntoView

setMapState

See capture-coordinates > setMapState