location

The location component enables users to display a location on a map within a jig. It can be configured to appear in different formats, including the standard component layout, the jig header, or fullscreen mode. Additionally, display options can be set up to show the current location with markers or paths.

Configuration options

Some properties are common to all components, see Common component properties for a list and their 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

is AnimationDisabled

true or false to determine if map animation is disabled.

isFollowUserLocationEnabled

When enabled, the viewPoint will be centred on the user’s real-time location.

markers

Multiple markers can be configured to display on the map. There is a 10K limit for markers showing on the map. See multi-markers code example below. You can use an expression to provide the latitude and longitude points from a datasource. See multi-datasource code example below.

marker-item

anchorTo: - Anchor the marker to a specific point, either bottom-center or center.
radius - Display a circle around the marker. In the radius you can configure the color, unit (Default is kilometres).
icon - Choose an icon for the markers. You can style the icon color, emphasis, type, shape and size.

paths

Create one path from many points. The first point is the start destination, and the last is the end destination. There is a 10K limit for paths showing on the map. See path-multi-points code example below.

viewPoint

Controls the visible area of the map, defining what the user sees. It allows control over position, zoom and orientation. Options include: centerPosition: middle or top

zoomLevel

Defines the initial zoom level of the map. Zooming in enlarges the view, revealing finer details, improving readability, and enhancing location precision.

- type: component.location
    options:
      markers:
        data:
        - latitude: 40.759412
          longitude: -73.912306
        - latitude: 40.745368
          longitude: -74.057189
        - latitude: 40.76479429122513
          longitude: -73.97429291692742

 - type: component.location
    options:
      paths:
        data:
        - latitude: 40.759412
          longitude: -73.912306
        - latitude: 40.803495
          longitude: -73.950694
      address: [email protected][0].address

Action

open-map

The action.open-map lets you open your device's default map app (e.g., Google Maps, Apple Maps, or Waze) with the provided destination address. If multiple map apps are available, they will be listed for you to select one.

open-app-settings

The action.open-app-settings can be configured to show when location tracking permission is not granted. Tapping the action opens the device’s settings screen.

State Configuration

Key

Notes

[email protected].

location

State is the variable of the component.

System variable Configuration

Key

Notes

[email protected].

coords timestamp

See example.

Considerations

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 down 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.

- type: component.location
      options:
        viewPoint:
          centerPosition: middle 
          address: 768 5th Ave, New York, US
          zoomLevel: 14 
        # Add a pin to the exact address.  
        markers:
          data: [email protected]
          item:
            type: component.marker-item
            options:
              address: [email protected]
              children:
                type: component.icon
                options:
                  color: negative
                  icon: pin-1-map

- type: component.location
      options:
        viewPoint:
          centerPosition: middle 
          address: [email protected]
          zoomLevel: 14 
        # Add a pin to the exact address.  
        markers:
          data: [email protected]
          item:
            type: component.marker-item
            options:
              address: [email protected]
              children:
                type: component.icon
                options:
                  color: negative
                  icon: pin-1-map

datasources:
  location:
    type: datasource.sqlite
    options:
      provider: DATA_PROVIDER_DYNAMIC
      entities:
        - entity: default/location
      query: |
        SELECT
          '$.id',
          '$.address',
          '$.address-us',
          '$.category',  
          '$.lat',
          '$.lng'
        FROM [default/location] 
        WHERE '$.category' = "location"

Location using latitude and longitude

In this example a location is shown using the latitude and longitude coordinates in the address property.

children:
    - type: component.location
          options:
            viewPoint:
              # Center the address in the middle of the screen.
              centerPosition: middle
              # Specify the address using latitude and longitude.
              latitude: [email protected][0].latitude
              longitude: [email protected][0].longitude
            # Add endpoint marker icon for the address.  
            markers:
              data: [email protected][0]
              item:
                type: component.marker-item
                options:
                  latitude: [email protected]
                  longitude: [email protected]
                  children:
                    type: component.icon
                    options:
                      color: negative
                      icon: pin-1-map

datasources:
  appointments:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Empire State Building
          latitude: 40.748676182418976
          longitude: -73.98567513213604
          address: 20 W 34th St., New York, NY 10001, United States
          icon: home
        - id: 2
          name: Great Lawn Softball Field 6
          latitude: 40.782091612607864 
          longitude: -73.9655512166898
          address: 86th St Transverse, New York, NY 10024, United States
          icon: stadium-1-building

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.

children:
  - type: component.location
    options:
      viewPoint:
        address: |
          [email protected] 
          & ',' & @ctx.datasources.address.city
          & ',' & @ctx.datasources.address.country
      # Use a datasource to define the multiple markers.    
      markers:
        data: [email protected]

datasources:
 # First datasource with address.
  address: 
    type: datasource.static
    options:
      data:
        - id: 1
          street: 768 5th Ave
          city: New York
          country: US
  # Second datasource for points in latitude and longitude.
  points:
    type: datasource.static
    options:
      data:
        - latitude: 40.759412
          longitude: -73.912306
        - latitude: 40.745368
          longitude: -74.057189
        - latitude: 40.76479429122513
          longitude: -73.97429291692742

Location displaying paths

An interactive map displaying a path with three points, a starting point, middle and end point, with a marker-item at each point.

Examples: See the example using static data in GitHub.

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

- type: component.location
          options:
            viewPoint:
              # Starting address specified.
              centerPosition: middle
              latitude: 40.759412
              longitude: -73.912306
              isAnimationEnabled: false
              zoomLevel: 9
            # Add icon markers for the addresses.
            markers:
              data: [email protected]
              item:
                type: component.marker-item
                options:
                  latitude: [email protected]
                  longitude: [email protected]
                  children:
                    type: component.icon
                    options: 
                      icon: end-marker  
            # Paths defined in a datasource in latitude and longitude.                 
            paths:
              data: [email protected]

children:
   - type: component.location
          options:
            markers:
              data: [email protected]
              item:
                type: component.marker-item
                options:
                  latitude: [email protected]
                  longitude: [email protected]
                  children:
                    type: component.icon
                    options: 
                      icon: end-marker        
            paths:
              data: [email protected] 
            viewPoint:
              centerPosition: middle
              latitude: 40.759412
              longitude: -73.912306
              isAnimationEnabled: true
              zoomLevel: 9

datasources:
   coordinates:
      type: datasource.static
      options:
        data:
          - id: 1
            latitude: 40.769702
            longitude: -74.038241
          - id: 2
            latitude: 40.759412
            longitude: -73.912306
          - id: 3
            latitude: 40.803495
            longitude: -73.950694

Location radius

This example demonstrates how to add a circular radius around the specified location. Determine whether it is in kilometers or miles and set its size (value). Then, select the color of the radius.

Examples: See the full code example in GitHub.

title: Location with radius
type: jig.default

children:
  - type: component.location
    options:
      viewPoint:
        # Starting address specified.
        centerPosition: middle
        latitude: 40.759412
        longitude: -73.912306 
        address: [email protected]
      # Add the marker point that the radius will use as the center point.  
      markers:
        data: [email protected]
        item:
          type: component.marker-item
          options:
            latitude: [email protected]
            longitude: [email protected]
            # Specify the radius units, size (value) and color.
            radius:
              isEnabled: true
              # The value determines the radius circle, e.g. 4km.
              value: 4
              unit: kilometers
              color: color4
            children:
              type: component.icon
              options:
                icon: end-marker

Location full screen

In this example the component.location is used in the jig.fullscreen ensuring the map covers the entire jig.

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 Jigx Management.

title: Location fullscreen
type: jig.full-screen

component: 
  type: component.location
  options:
    viewPoint:
      # Center the address in the middle of the screen.
      centerPosition: middle
      # Specify the address using latitude and longitude.
      address: [email protected][0].street
      # Zoom in to enlarge the view, reveal finer details, improving readability, 
      # and enhance location precision.
      zoomLevel: 14
    # Add endpoint marker icon for the address.   
    markers:
      data: [email protected][0].street
      item:
        type: component.marker-item
        options:
          address: [email protected][0].street
          children:
            type: component.icon
            options:
              # Determine the size of the marker icon.
              size: large
              icon: end-marker

datasources:
  address: 
    type: datasource.static
    options:
      data:
        - id: 1
          street: 768 5th Ave
          city: New York
          country: US
        - id: 2
          street: 137 W 111th St
          city: New York
          country: US

Location as a header

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

Examples: See the code samples using static data in GitHub for small and medium headers.

header: 
  type: component.jig-header
  options:
    height: small
    children:
      type: component.location
      options:
        viewPoint:
          # Center the address in the middle of the screen.
          centerPosition: middle
          # Sepcify the address using a datasource.
          address: [email protected][0].address
          # Zoom in for map clearly.
          zoomLevel: 8
        # Add endpoint marker icon for the address.  
        markers:
          data: [email protected][0].address
          item:
            type: component.marker-item
            options:
              address: [email protected][0].address
              children:
                type: component.icon
                options:
                  # Determine the color of the marker icon.
                  color: negative
                  # Define the icon in the datasource.
                  icon: [email protected][0].icon

header: 
  type: component.jig-header
  options:
    height: medium
    children:
      type: component.location
      options:
        viewPoint:
          # Center the address in the middle of the screen.
          centerPosition: middle
          # Sepcify the address using a datasource.
          address: [email protected][0].address
          # Zoom in for map clearly.
          zoomLevel: 8
        # Add endpoint marker icon for the address.  
        markers:
          data: [email protected][0].address
          item:
            type: component.marker-item
            options:
              address: [email protected][0].address
              children:
                type: component.icon
                options:
                  # Determine the color of the marker icon.
                  color: negative
                  # Define the icon in the datasource.
                  icon: [email protected][0].icon

datasources:
  sites:
    type: datasource.static
    options:
      data:
        - id: 1
          name: Empire State Building
          latitude: 40.748676182418976
          longitude: -73.98567513213604
          address: 20 W 34th St., New York, NY 10001, United States
          icon: landmark-empire-state
        - id: 2
          name: Great Lawn Softball Field 6
          latitude: 40.782091612607864 
          longitude: -73.9655512166898
          address: 86th St Transverse, New York, NY 10024, United States
          icon: stadium-1-building

Good afternoon

location

Configuration options

Considerations

Examples and code snippets

Location using address

Location using latitude and longitude

Location with multiple markers

Location displaying paths

Location radius

Location full screen

Location as a header

See also