Components

location

8min

The location component allows the user to display a location on a map inside a

. The location can be set on the

to show in various options, such as in the standard component layout, in the

header, in fullscreen, and configuring actions to show the current location.

Configuration options



Options



address

The actual address of the location. Valid formats are: - address string - city, street, e.g. address: 20 W 34th St., New York, NY 10001, USA or in an expression calling a datasource [email protected] & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country - latitude and longitude, e.g. address: 40.759412, -73.912306 - DMS format

is AnimationDisabled

true or false to determine if map camera animation is disabled.

markersData

This allows the user to add multiple markers on the map. There is a limit for markers showing on the map of 10k. For example: - type: component.location options: markersData: - lat: 0 lng: 0 - lat: 0 lng: 0 - lat: 0 lng: 0

You can use an expression to provide the latitude and longitude points from a datasource, for example: markersData: | [email protected].{"lng": $number($.lng), "lat": $number($.lat)}

pathsData

Create one path from many points. The first point is the start destination, and the last is the end destination. There is a limit for paths showing on the map of 10k. for example: - type: component.location options: pathsData: - lat: 0 lng: 0 - lat: 0 lng: 0 address: [email protected]

zoomLevel

Defines the initial zoom level of the map

State Configuration

Key

Notes

location

  • State is the variable of the component.

activeItemId now

  • Global state variable that can be used throughout the solution.

Consideration

  • Test the layout of the location component when combining it with other components, as it can cause spacing issues.
  • To display a location as a full screen, use the jig.fullscreen type with the component.location. See the Fullscreen location example below.

Examples and code snippets 

Location using address

Document image


An interactive map displaying the location using the address.

Examples: See the example using static data on GitHub. See the example using dynamic data on GitHub.

Datasource: See the full datasource for static data on GitHub. See the full datasource for dynamic data in GitHub.

location (static)
location (dynamic)
datasources (static)
datasources (dynamic)


Location with multiple markers

Document image


An interactive map displaying multiple points.

Examples: See the example using static data in GitHub.

Datasources: See the full datasource for static data in GitHub.

location-multiple-markers (static)
datasources (static)


Location displaying path

Document image


An interactive map displaying path from starting point (the red marker) via stopover place (without marker) to the final point (the grey marker).

Examples: See the example using static data in GitHub.

Datasources: See the full datasource for static data in GitHub.

location-path (static-no -animation)
location-path (static- with-animation)
datasources (static)


Location using latitude and longitude

Address - Latitude & Longitude
Address - Latitude & Longitude


In this example a location is shown using the latitude and longitude coordinates in the address property. The component.location is used in the jig.fullscreen.



location-lat-lng.jigx


Location full screen

In this example a location is shown in full screen. The component.location is used in the jig.fullscreen.

Examples: See the example using dynamic data in GitHub.

Datasource: See the full datasource for dynamic data in GitHub

Using the code below requires data in the database, the jigx.sample solution has the data provided for location. You can use the location.csv file in GitHub and upload it via the Data configuration in

.

Fullscreen location
Fullscreen location

location-fullscreen-dynamic.jigx
datasources (dynamic)


Location as a header

Document image

Document image


The location component can be used as a small or medium size header in a jig. In the above screenshot the difference between the set heights is shown.

Examples:

Small: See the full code sample using static data in GitHubMedium: See the full code sample using static data in GitHub

location-as-header(small)
location-as-header(medium)


See also



Updated 24 Jul 2024
Doc contributor
Did this page help you?