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
[email protected].
location
State is the variable of the component.
[email protected].
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
﻿
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)
children:
  - type: component.location
    options:
      address: [email protected] & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      zoomLevel: 9
children:
  - type: component.location
    options:
      address: =@ctx.datasources.address.street & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      zoomLevel: 9
﻿
Location with multiple markers
﻿
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)
children:
  - type: component.location
    options:
      address: [email protected] & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      markersData: [email protected]
children:
  - type: component.location
    options:
      address: =@ctx.datasources.address.street & ',' & @ctx.datasources.address.city & ',' & @ctx.datasources.address.country
      markersData: =@ctx.datasources.points
﻿
Location displaying path
﻿
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)
children:
          - type: component.location
            options:
              pathsData: [email protected]
              isAnimationDisabled: true
children:
          - type: component.location
            options:
              pathsData: =@ctx.datasources.coordinates
              isAnimationDisabled: true
﻿
Location using latitude and 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
title: Location with multiple markers
type: jig.default
children:
  - type: component.location
    options:
      address: 40.759412, -73.912306
title: Location with multiple markers
type: jig.default
children:
  - type: component.location
    options:
      address: 40.759412, -73.912306
﻿
 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
﻿
location-fullscreen-dynamic.jigx
datasources (dynamic)
# datasources/adhoc-components/location.jigx
type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC
  entities:
    - default/location
  query: |
    SELECT
      '$.id',
      '$.address',
      '$.address-us',
      '$.category',  
      '$.lat',
      '$.lng'
    FROM [default/location] WHERE '$.category' = "location"
# datasources/adhoc-components/location.jigx
type: datasource.sqlite
options:
  provider: DATA_PROVIDER_DYNAMIC
  entities:
    - default/location
  query: |
    SELECT
      '$.id',
      '$.address',
      '$.address-us',
      '$.category',  
      '$.lat',
      '$.lng'
    FROM [default/location] WHERE '$.category' = "location"
﻿
Location as a header
﻿
﻿
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 GitHub. 
Medium: See the full code sample using static data in GitHub. 
location-as-header(small)
location-as-header(medium)
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.location
      options:
        address: 20 W 34th St., New York, NY 10001, USA
        zoomLevel: 8
        isAnimationDisabled: false
        markersData:
          - lat: 40.7484445
            lng: -73.9878531
header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.location
      options:
        address: 20 W 34th St., New York, NY 10001, USA
        zoomLevel: 8
        isAnimationDisabled: false
        markersData:
          - lat: 40.7484445
            lng: -73.9878531
﻿
See also
﻿State﻿﻿
﻿

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
[email protected].	location	State is the variable of the component.
[email protected].	activeItemId now	Global state variable that can be used throughout the solution.