display-coordinates
Last updated
Last updated
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.
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.
bindRequired
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.
Also see:
bindlabelalign-contentalign-controlsSee capture-coordinates > align-controls
align-labelallow-draggingSee capture-coordinates > allow-dragging
allow-zoomSee capture-coordinates > allow-zoom
heightSee capture-coordinates > height
idlabel-caselabel-colorshow-if and hide-ifshow-markersSee capture-coordinates > show-markers
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:
getMapStateSee capture-coordinates > getMapState
scrollIntoViewSee capture-coordinates > scrollIntoView
setMapState
