EDS Job Map
About
Officers browsing available extra-duty jobs previously had to scan a flat list with no sense of where a job actually was relative to them.
I built a bidirectional map-table interface, clicking anywhere on the map draws a search radius centered on that point, instantly filtering both the pin set and the table to jobs within range.
Selecting a pin highlights its matching row, and selecting a row flies the map to that pin, keeping both views in sync as officers narrow down jobs geographically.
Accomplishments
Built a click-to-set radius search: clicking any point on the map generates a filter radius, computes distance client-side, and narrows the job list in real time with no server round-trip
Synchronized map and table state through a shared reducer, so pin selection highlights the matching table row and row selection pans the map to the corresponding pin
Designed the interaction to update two independent UI surfaces (map + table) from a single user action, reducing the steps officers need to locate and evaluate nearby jobs
Integrated Mapbox GL JS with custom geometry utilities (haversine distance, circle generation) to avoid pulling in a heavier third-party geo library
Mapbox GL JS
React
Context API
useReducer
JavaScript
custom geospatial utilities (haversine distance, circle polygon generation)
List-to-map sync
Pin-to-list sync
Click-to-filter radius search
liveUpdate
