The Live Map — Your Operations Overview

The live map lives at /map and uses Mapbox GL to render an interactive satellite/street basemap that automatically switches between light and dark themes as the app theme changes. The map shows two layers of data simultaneously: job pins (colored circles representing individual jobs at their property addresses) and technician markers (circular avatar badges positioned at each technician's home base or live tracking location). Both layers load incrementally — technician markers appear one at a time as their home addresses are resolved rather than all at once.

Job pins use status-based colors: pending jobs render in red, assigned or in-progress jobs render in blue, and other statuses use a muted gray. When many jobs are clustered in the same geographic area, the map groups them into a cluster bubble showing the total count. Cluster bubbles turn red if any job inside them is Pending, alerting dispatchers to unassigned work even before they zoom in. Clicking a cluster zooms the map in past the cluster threshold (zoom level 14) to reveal the individual job pins underneath.

Clicking an individual job pin opens a popup showing the property address, job status badge, priority badge, customer name, scheduled date and time, media types, and estimated duration. It also fires the job selection handler, which highlights the job and — if you navigate to the details — pulls up the full job panel. Technician markers show the technician's initials, a colored ring indicating their availability status (green ring for available, gray for unavailable), and a popup on click with their name, location, total jobs, on-time rate, and rating.

Role filtering is automatic. Company owners, admins, and project managers see all active jobs and all technicians on the map. Technicians see only the jobs assigned to them and their own marker. Editors see their assigned jobs but no technician markers. Delivered jobs are excluded from the map for all roles — the map shows only active work that needs attention. On iOS, CompanyJobsMapView (at apps/vremly-ios-swift/Vremly/Views/Company/CompanyJobsMapView.swift) uses MapboxMaps with the same clustering threshold and renders the same technician-marker pattern, adding a 'car' badge on live-tracking technicians who are currently en route.

The map auto-fits its bounds on initial load to include all visible job pins and technician markers. Deselecting a job (clicking the same marker again) returns the map to the full-fit view. Zoom and compass controls appear in the bottom-right corner. A 'fit routes' button also appears in the bottom-right when route data is loaded — clicking it re-fits the viewport to show all computed routes.