Standard Components

Live Location

Built

Displays a real-time map tracking the current location of a resource or field worker. Shows the worker's avatar as a map pin with live position updates. The footer displays sharing status, active hours, and last sync time.

Author: Design TeamUpdated: 2026-03-06

Usage Guidance

When to use

  • +Tracking the real-time position of a field worker assigned to a job or activity.
  • +Providing dispatchers with at-a-glance visibility into where a resource currently is.
  • +Resource detail pages where live location context helps with scheduling and coordination.

When not to use

  • −Static address display — use Address Map instead for fixed locations.
  • −Tracking multiple resources simultaneously — use a dedicated team map view.
  • −Historical location trails or route playback — this component shows current position only.

Breeze UI Adherence

65
Breeze UI Adherence
Good
65% of styling uses Breeze UI tokens

Tokens Used

color4 tokens
color.border.default
Card border, footer divider, footer row top border
border-color
color.background.surface
Card background
background-color
color.text.default
Card header title, footer row values
color
color.text.subtle
Footer row labels, footer icons
color
spacing1 token
spacing.5
Header, footer row horizontal padding (20px)
padding-inline
sizing1 token
spacing.3.5
Header height (56px / 3.5rem)
height
typography2 tokens
font.size.sm
Header title, footer labels and values (14px)
font-size
font.weight.semibold
Header title weight (600)
font-weight
radius1 token
radius.lg
Card corner radius (8px)
border-radius
shadow1 token
shadow.sm
Card elevation shadow
box-shadow

Custom CSS — not covered by Breeze UI

⚠Avatar pin marker
w-10 h-10 rounded-full border-[3px] border-white shadow-lg object-cover / bg-gradient-to-br from-blue-400 to-purple-500

Custom avatar pin marker used as the map location indicator. Breeze UI does not have a map marker or avatar-pin component. Renders the resource's photo in a circular frame with white border, or falls back to a gradient circle with initials.

⚠Live badge
bg-green-500 text-white rounded-full px-2.5 py-0.5 + animate-pulse dot

Live badge with pulse animation. Breeze UI Badge/Lozenge components do not support the broadcast icon or pulsing dot animation needed for real-time status indication.

⚠Broadcast icon
fill-white w-3 h-3 (broadcast/signal SVG icon)

Custom broadcast icon inside the Live badge to communicate real-time tracking. No equivalent icon in the Breeze UI icon set for this specific use case.

⚠Footer two-row layout
border-t border-gray-200 px-5 py-3 flex justify-between (two stacked rows)

Two-row footer layout rendered inside the card body. The standard PageBuilderCardFrame footer is a single 56px bar — the Live Location component needs two distinct info rows, so the footer area is custom-built as body content.

⚠Stale indicator
bg-gray-400 rounded-full / opacity-70 transition (stale state)

Stale data indicator that transitions the Live badge to gray and reduces avatar opacity. Breeze UI does not provide tokens for data-freshness visual states.

⚠Map iframe cropping
overflow: hidden + iframe offset (top: -60px, left: -14px)

Crops the Google Maps iframe to hide third-party UI chrome (attribution bar, fullscreen button). Custom layout technique not covered by Breeze UI.

Widths
1/31/2defaultFull
Object Pages
JobsActivitiesResources

Settings

resourceFieldtext*

The field that references the resource/worker whose live location is displayed.

Default: Resource
refreshIntervalnumber

How often (in seconds) the component polls for updated location data. Range 10–300.

Default: 30
showSharingStatusboolean

Display the 'Sharing Location' status row in the footer with active sharing hours.

Default: true
showLastSyncboolean

Display the 'Last Sync' timestamp in the footer showing when location data was last received.

Default: true
initialZoomnumber

Initial zoom level for the map. Range 1 (world) to 20 (building). Default is closer than Address Map since tracking is more precise.

Default: 15

Attributes

resourceLocationGeoLocation

The current latitude and longitude of the tracked resource. Updated on each refresh interval.

{ lat: number, lng: number }
resourceNamestring

Display name of the tracked resource. Shown in the avatar tooltip.

resourceAvatarstring

URL to the resource's profile photo. Used as the map marker. Falls back to initials if unavailable.

sharingWindowTimeRange

The active location sharing window for the resource (start and end times).

{ start: string, end: string }
lastSyncAtstring

ISO timestamp of the most recent location update from the resource's device.

isActiveboolean

Whether the resource is currently sharing their location. Controls the Live badge state.

Changelog

2026-03-01v1.0

Initial component specification created with real-time tracking, avatar pin marker, and footer info rows.

2026-03-06v1.1

Added Breeze UI token mapping and adherence tracking. Defined stale data handling, privacy considerations, and polling strategy.