location

The location widget displays a map or location on its surface. Configure it within a jig under the widgets property, then reference its name (widgetId) and define its size in a grid-item component.

Location widgets

Configuration options

Core structure
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 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

Other options
bottom	The component will be added to the bottom of the widget.
footer	Add text to the footer of the widget.
footerAlign	Align the footer text to left, right, center.
top	The component will be added to the top of the widget.

Considerations

• Widgets are displayed on jigs in the grid component or jig.grid by referencing the widgetId (Widget Name).

• The location widget can only be used on grid-items with widget sizes of 2x2, 2x4, 4x2, 4x4.

Examples and code snippets

location widget using address (4x2)

Location widget with address

This example demonstrates how to configure a widget within a default jig and display it on a jig.grid using a 4x2 layout. The widget focuses on showcasing a specific location based on the provided address.

Examples: See the complete example using static data in GitHub. See the complete example using dynamic data in GitHub.

Datasources: See the complete datasource for dynamic data in GitHub.

location-widget (static)

widgets:
  # Provide name for the widget that will be used as the widgetId.
  widgetAddress:
    type: widget.location
    instanceId: address
    options:
      viewPoint:
        centerPosition: middle
        # Add the address of the location.
        address: Národní 135/14, 110 00 Praha
      # Add a pin to the exact address.  
      markers:
        # To add a pin to the exact location, configure a marker & icon.
        data: [email protected][0]
        item:
          type: component.marker-item
          options:
            address: [email protected][0].street
            children:
              type: component.icon
              options:
                # Specify the color of the icon.
                color: negative
                # Specify the type of icon.
                icon: pin-1-map 

location-widget (dynamic)

location-grid.jigx

datasource

grid-item

location widget with multiple markers (4x2)

Location widget with multiple markers

This example demonstrates how to configure a widget within a default jig and display it on a jig.grid using a 4x2 layout. The widget focuses on showcasing multiple markers based on the provided coordinates.

Examples:

See the complete example using static data in GitHub.

multiple-markers (static)

widgets:
  # Provide name for the widget that will be used as the widgetId.
  widgetMarkers:
    type: widget.location
    options:
      viewPoint:
        centerPosition: middle
        # Add the address of the location using a datasource.
        address: |
          [email protected][1].street 
          & ',' & @ctx.datasources.address[1].city
          & ',' & @ctx.datasources.address[1].country 
        # Adjust the zoomlevel to fit the location markers in the widget.  
        zoomLevel: 8
      # Specify the markers using latitude & longitude co-ordinates.  
      markers:
        data: [email protected]

location-grid.jigx

datasource

grid-item

location widget displaying path (4x4)

Location widget with path

This example demonstrates how to configure a widget within a default jig and display it on a jig.grid using a 4x4 layout. The widget focuses on showcasing paths based on provided points that use coordinates.

Examples: See the complete example using static data in GitHub.

location-widget-path (static)

widgets:
  # Provide name for the widget that will be used as the widgetId.
  widgetPath:
    type: widget.location
    options:
      viewPoint:
        centerPosition: middle
        # Add the address using coordinates.
        latitude: 40.759412
        longitude: -73.912306
        isAnimationEnabled: true
        zoomLevel: 9
      # Add icon markers for the addresses.
      markers:
        data: [email protected]
        item:
          type: component.marker-item
          options:
            anchorTo: bottom-center
            latitude: [email protected]
            longitude: [email protected]
            children:
              type: component.icon
              options: 
                # Specify the icon to be used as the marker.
                icon: end-marker  
      # Paths defined in a datasource in latitude and longitude.                 
      paths:
        data: [email protected] 

location-grid.jigx

datasource

grid-item

location widget with longitude and latitude (2x4)\/col

This example demonstrates how to configure a widget within a default jig and display it on a jig.grid using a 2x4 layout with longitude and latitude coordinates. A component.title is configured to display the name and address of the location.

Location widget with coordinates

location-lat-long_2x4.jigx

widgets:
  # Provide name for the widget that will be used as the widgetId.
  widgetLatitude:
    type: widget.location
    options:
      # Configure a title to display on the widget with a left icon.
      bottom:
        type: component.titles
        options:
          title: Museum
          subtitle: 131 W 55th St, New York
          align: left
          icon: pin
      viewPoint:
        centerPosition: middle
        # Specify the address using latitude and longitude.
        latitude: [email protected][2].latitude
        longitude: [email protected][2].longitude
      # Add endpoint marker icon for the address.  
      markers:
        data: [email protected][2]
        item:
          type: component.marker-item
          options:
            latitude: [email protected]
            longitude: [email protected]
            children:
              type: component.icon
              options:
                # Specify the color of the icon.
                color: negative
                # Specify the icon to be used as the marker.
                icon: [email protected][2].icon 

location-grid.jigx

datasource

grid-item