location
The location widget displays a map or location on its surface. Configure it within a under the widgets property, then reference its name (widgetId) and define its size in a grid-item component.
Core 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. |
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.
This example demonstrates how to configure a widget within a default 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.
This example demonstrates how to configure a widget within a default 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.
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.
