Components

location

9min

The location component enables users to display a location on a map within a . 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 =@ctx.datasources.address.street & ',' & @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.
For example:
- type: component.location
    options:
      markers:
        data:
        - latitude: 40.759412
          longitude: -73.912306
        - latitude: 40.745368
          longitude: -74.057189
        - latitude: 40.76479429122513
          longitude: -73.97429291692742 
You can use an expression to provide the latitude and longitude points from a datasource, for example:
markers:
   data: |
      =@ctx.datasources.jobs.{"lng": $number($.lng), "lat": $number($.lat)}
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.
for example:
 - type: component.location
    options:
      paths:
        data:
        - latitude: 40.759412
          longitude: -73.912306
        - latitude: 40.803495
          longitude: -73.950694
      address: =@ctx.datasources.location[0].address
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.
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.
State Configuration
Key
Notes
=@ctx.component.state.
location
State is the variable of the component.
System variable Configuration
Key
Notes
=@ctx.system.locationPermisions.foreground
isGranted
status
Determines the status of the permissions and evaluates if permissions are granted. See System locationPermissions﻿ example.
=@ctx.system.geolocation.
coords
timestamp
See System geolocation﻿ 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 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)
location (dynamic)
datasources (dynamic)
datasources (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: =@ctx.datasources.address
          item:
            type: component.marker-item
            options:
              address: =@ctx.datasources.address.street
              children:
                type: component.icon
                options:
                  color: negative
                  icon: pin-1-map
- 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: =@ctx.datasources.address
          item:
            type: component.marker-item
            options:
              address: =@ctx.datasources.address.street
              children:
                type: component.icon
                options:
                  color: negative
                  icon: pin-1-map
﻿
Address - Latitude & Longitude
﻿
In this example a location is shown using the latitude and longitude coordinates in the address property. 
﻿
location-lat-lng.jigx
datasource
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: =@ctx.datasources.appointments[0].latitude
              longitude: =@ctx.datasources.appointments[0].longitude
            # Add endpoint marker icon for the address.  
            markers:
              data: =@ctx.datasources.appointments[0]
              item:
                type: component.marker-item
                options:
                  latitude: =@ctx.current.item.latitude
                  longitude: =@ctx.current.item.longitude
                  children:
                    type: component.icon
                    options:
                      color: negative
                      icon: pin-1-map      
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: =@ctx.datasources.appointments[0].latitude
              longitude: =@ctx.datasources.appointments[0].longitude
            # Add endpoint marker icon for the address.  
            markers:
              data: =@ctx.datasources.appointments[0]
              item:
                type: component.marker-item
                options:
                  latitude: =@ctx.current.item.latitude
                  longitude: =@ctx.current.item.longitude
                  children:
                    type: component.icon
                    options:
                      color: negative
                      icon: pin-1-map      
﻿
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:
      viewPoint:
        address: |
          =@ctx.datasources.address.street 
          & ',' & @ctx.datasources.address.city
          & ',' & @ctx.datasources.address.country
      # Use a datasource to define the multiple markers.    
      markers:
        data: =@ctx.datasources.points
children:
  - type: component.location
    options:
      viewPoint:
        address: |
          =@ctx.datasources.address.street 
          & ',' & @ctx.datasources.address.city
          & ',' & @ctx.datasources.address.country
      # Use a datasource to define the multiple markers.    
      markers:
        data: =@ctx.datasources.points
﻿
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)
location-path (static- with-animation)
datasources (static)
- 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: =@ctx.datasources.points
              item:
                type: component.marker-item
                options:
                  latitude: =@ctx.current.item.latitude
                  longitude: =@ctx.current.item.longitude
                  children:
                    type: component.icon
                    options: 
                      icon: end-marker  
            # Paths defined in a datasource in latitude and longitude.                 
            paths:
              data: =@ctx.datasources.points            
- 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: =@ctx.datasources.points
              item:
                type: component.marker-item
                options:
                  latitude: =@ctx.current.item.latitude
                  longitude: =@ctx.current.item.longitude
                  children:
                    type: component.icon
                    options: 
                      icon: end-marker  
            # Paths defined in a datasource in latitude and longitude.                 
            paths:
              data: =@ctx.datasources.points            
﻿
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.
Location with a radius
﻿
location-radius.jigx
datasource
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: =@ctx.datasources.points
      # Add the marker point that the radius will use as the center point.  
      markers:
        data: =@ctx.datasources.points
        item:
          type: component.marker-item
          options:
            latitude: =@ctx.current.item.latitude
            longitude: =@ctx.current.item.longitude
            # 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      
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: =@ctx.datasources.points
      # Add the marker point that the radius will use as the center point.  
      markers:
        data: =@ctx.datasources.points
        item:
          type: component.marker-item
          options:
            latitude: =@ctx.current.item.latitude
            longitude: =@ctx.current.item.longitude
            # 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      
﻿
In this example the component.location is used in the jig.fullscreen ensuring the map covers the entire .
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.jigx
datasources
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: =@ctx.datasources.address[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: =@ctx.datasources.address[0].street
      item:
        type: component.marker-item
        options:
          address: =@ctx.datasources.address[0].street
          children:
            type: component.icon
            options:
              # Determine the size of the marker icon.
              size: large
              icon: end-marker
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: =@ctx.datasources.address[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: =@ctx.datasources.address[0].street
      item:
        type: component.marker-item
        options:
          address: =@ctx.datasources.address[0].street
          children:
            type: component.icon
            options:
              # Determine the size of the marker icon.
              size: large
              icon: end-marker
﻿
Location in header
﻿
The location component can be used as a small or medium size header in a . 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)
location-as-header(medium)
datasource
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: =@ctx.datasources.sites[0].address
          # Zoom in for map clearly.
          zoomLevel: 8
        # Add endpoint marker icon for the address.  
        markers:
          data: =@ctx.datasources.sites[0].address
          item:
            type: component.marker-item
            options:
              address: =@ctx.datasources.sites[0].address
              children:
                type: component.icon
                options:
                  # Determine the color of the marker icon.
                  color: negative
                  # Define the icon in the datasource.
                  icon: =@ctx.datasources.sites[0].icon
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: =@ctx.datasources.sites[0].address
          # Zoom in for map clearly.
          zoomLevel: 8
        # Add endpoint marker icon for the address.  
        markers:
          data: =@ctx.datasources.sites[0].address
          item:
            type: component.marker-item
            options:
              address: =@ctx.datasources.sites[0].address
              children:
                type: component.icon
                options:
                  # Determine the color of the marker icon.
                  color: negative
                  # Define the icon in the datasource.
                  icon: =@ctx.datasources.sites[0].icon
﻿
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 =@ctx.datasources.address.street & ',' & @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. For example: - type: component.location options: markers: data: - latitude: 40.759412 longitude: -73.912306 - latitude: 40.745368 longitude: -74.057189 - latitude: 40.76479429122513 longitude: -73.97429291692742 You can use an expression to provide the latitude and longitude points from a datasource, for example: markers: data: \| =@ctx.datasources.jobs.{"lng": $number($.lng), "lat": $number($.lat)}
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. for example: - type: component.location options: paths: data: - latitude: 40.759412 longitude: -73.912306 - latitude: 40.803495 longitude: -73.950694 address: =@ctx.datasources.location[0].address
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.

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.

State Configuration	Key	Notes
=@ctx.component.state.	location	State is the variable of the component.

System variable Configuration	Key	Notes
=@ctx.system.locationPermisions.foreground	isGranted status	Determines the status of the permissions and evaluates if permissions are granted. See System locationPermissions example.
=@ctx.system.geolocation.	coords timestamp	See System geolocation example.