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.

multiple-markers

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

markers-datasource

path-multi-points

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

Location from 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)

- 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

location (dynamic)

datasources (dynamic)

datasources (static)

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.

location-lat-lng.jigx

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      

datasource

Location with multiple markers

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)

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 (static)

Location displaying paths

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

location-path (static-no -animation)

- 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]            

location-path (static- with-animation)

datasources (static)

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.

Location with a radius

location-radius.jigx

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      

datasource

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.

Fullscreen location

location-fullscreen.jigx

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

Location as a header

Location in 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.

location-as-header(small)

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

location-as-header(medium)

datasource

See also

• State