louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ops/dispatch): tech pin drifts away from lat/lng on map zoom

Browse Source 
The map marker container was being created with an inline
`position:relative`, which overrode Mapbox GL's `.mapboxgl-marker`
class (which applies `position:absolute`). Mapbox writes
`transform: translate(<x>, <y>)` to that exact element on every
zoom/pan frame to project lat/lng → screen coordinates. With the
element kept in the document flow (relative), the transform is
interpreted against the document origin instead of the map pane,
so the pin visually drifts as the user zooms in on a tech.

Removing the inline `position:relative` lets the Mapbox class win.
The SVG ring and the avatar div are children with `position:absolute`
inside outer; absolute children only need a positioned ancestor to
form a containing block — `position:absolute` (Mapbox's value)
qualifies just as well as relative, so the avatar stays centered.
This commit is contained in:
louispaulb 2026-05-05 13:40:29 -04:00
parent a5cfe997b6
commit 490b9ce457
1 changed files with 9 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
apps/ops/src/composables/useMap.js
View File

@ -200,9 +200,16 @@ export function useMap (deps) {
const totalJobs = allToday.length
const completionPct = totalJobs > 0 ? completedJobs / totalJobs : 0
// Fixed-size outer wrapper — Mapbox anchors to this
// Fixed-size outer wrapper — Mapbox anchors to this. DO NOT set
// `position:relative` inline here: Mapbox GL's `.mapboxgl-marker`
// class applies `position:absolute` and is what gets the
// `transform: translate(...)` at every zoom/pan frame. An inline
// `relative` overrides that and the pin appears to drift away from
// its lat/lng on zoom. The svg + avatar children are positioned
// absolutely; that still works against an absolutely-positioned
// parent (any positioned element is a containing block).
const outer = document.createElement('div')
outer.style.cssText = `cursor:pointer;width:${SIZE}px;height:${SIZE}px;position:relative;`
outer.style.cssText = `cursor:pointer;width:${SIZE}px;height:${SIZE}px;`
outer.dataset.techId = tech.id
// SVG ring (load arc + completion arc) — fills entire container