Replace Google Maps with Esri (ArcGIS) basemaps

Swaps the map provider behind the existing provider-neutral JobMapProps
interface: EsriJobMap.tsx (ArcGIS Maps SDK) replaces GoogleJobMap.tsx,
loaded via esri-loader's CDN script rather than bundled through webpack —
next dev's inline source-mapping of a library this size was OOM-killing
the whole host on first compile. Also fixes a bug in the fit-bounds camera
call: view.goTo() needs real Graphic/Geometry instances, not plain point
literals, so the map was never zooming to the plotted points.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ulhub
2026-08-16 21:06:05 +00:00
parent 5de7b4d7a2
commit 9eefe50401
8 changed files with 2231 additions and 314 deletions

View File

@@ -16,8 +16,8 @@ grant scoped, org-limited programmatic access.
This is an early-stage internal build (not yet hardened for production
exposure — see [Known gaps](#known-gaps)). The core domain, auth, MQTT
ingest, realtime map, and a device simulator are all implemented and
end-to-end verified. Google Maps is the only map provider; the codebase is
structured so an Esri implementation can be added alongside it later.
end-to-end verified. Esri (ArcGIS) is the map provider, behind a
provider-neutral interface so a different one could be swapped in later.
## Architecture
@@ -183,12 +183,13 @@ Next.js pages router, no UI framework (inline styles). Key pieces:
- `lib/use-job-stream.ts` — the `/api/ws` client hook (reconnects with
backoff, dispatches `points` vs `status` messages).
- `components/map/` — the map is behind a provider-neutral interface
(`JobMapProps`, `MapPoint`, `LiveStatus`) so a future Esri implementation
is a new component, not a rewrite. `components/map/google/GoogleJobMap.tsx`
is the only file that imports the Google Maps SDK: colored markers +
polylines per utility type (APWA color code), a blue "current position"
marker with an accuracy halo for live status, and click-to-inspect detail
popups.
(`JobMapProps`, `MapPoint`, `LiveStatus`) so swapping providers is a new
component, not a rewrite. `components/map/esri/EsriJobMap.tsx` is the only
file that imports the ArcGIS Maps SDK (`@arcgis/core`): a hybrid
(satellite + labels) basemap, colored markers + polylines per utility type
(APWA color code), a blue "current position" marker with an accuracy halo
for live status, and click-to-inspect detail popups (Esri's built-in
`Popup`, opened natively via each graphic's `popupTemplate`).
- Pages: `login`/`register`, `/` (job list with search/status filter),
`/jobs/new`, `/jobs/[jobId]` (detail + live map), `/settings/{members,
devices,api-keys}`.
@@ -258,7 +259,7 @@ Requires Docker (no local Node install needed — the containers do
everything).
```bash
cp .env.example .env # fill in JWT_SECRET, MQTT_BACKEND_PASSWORD, NEXT_PUBLIC_GOOGLE_MAPS_API_KEY
cp .env.example .env # fill in JWT_SECRET, MQTT_BACKEND_PASSWORD, NEXT_PUBLIC_ARCGIS_API_KEY
docker compose up -d --build
docker compose exec backend npm run db:seed # optional demo data
```