# Bundle the Leaflet marker icon locally

**Task**: AZ-451_refactor_leaflet_marker_icon
**Name**: Replace `unpkg.com` marker icon URL with a Vite-bundled asset
**Description**: Stop loading the Leaflet marker icon from `unpkg.com` at runtime. Import the PNG from the already-installed `leaflet` package as a Vite asset so the bundle is air-gap-friendly and the version matches the pinned dependency.
**Complexity**: 2 points
**Dependencies**: None
**Component**: `src/features/flights/mapIcons.ts`, bundled asset under `dist/assets/`
**Tracker**: AZ-451
**Epic**: AZ-447

## Problem

`src/features/flights/mapIcons.ts:18` sets `iconUrl: 'https://unpkg.com/leaflet@1.7.1/dist/images/marker-icon.png'`. This:

- Breaks AC-N3 / NFT-RES-03 / restriction E1 (air-gap-friendly bundle) — the app fetches from `unpkg.com` on every map mount.
- Pins `leaflet@1.7.1` in a URL while `package.json` pins `leaflet@^1.9.4` — a silent version mismatch.
- Cannot be intercepted by the e2e `tile-stub` (different host).

## Outcome

- No external CDN URL remains in `src/`.
- The marker icon renders from a bundled asset path produced by Vite (e.g., `/assets/marker-icon-<hash>.png`).
- The icon version matches the pinned `leaflet` package version.

## Scope

### Included
- `import markerIcon from 'leaflet/dist/images/marker-icon.png'` in `mapIcons.ts`.
- Updating `iconUrl` to use the imported asset.

### Excluded
- Any change to icon size, anchor, or color logic in `mapIcons.ts`.
- Adding new marker variants.

## Acceptance Criteria

**AC-1: No external CDN**
Given the repo after the change,
When `grep -r "unpkg.com" src/` runs,
Then it produces no matches.

**AC-2: Asset bundled by Vite**
Given a `bun run build`,
When the `dist/` directory is inspected,
Then a file matching `dist/assets/marker-icon-*.png` exists and `dist/index.html` or a chunk references it.

**AC-3: Marker still renders**
Given a manual smoke against the running dev server,
When the `FlightMap` displays a waypoint,
Then the marker icon is visible at the expected position (no broken-image placeholder).

## Blackbox Tests

| AC Ref | Initial Data / Conditions | What to Test | Expected Behavior | NFR References |
|--------|--------------------------|--------------|-------------------|----------------|
| AC-1   | Repo state after task lands | `grep -r unpkg.com src/` | No matches | Security / air-gap |
| AC-2   | `dist/` after build | `find dist/assets -name 'marker-icon-*.png'` | Exactly one match | Compat |
| AC-3   | Dev server running | Visual smoke | Marker visible | UX |

## Constraints

- Adhere to S9 (Leaflet 1.9.4) — use the pinned package's assets.
- The `customIcon` export shape MUST NOT change (callers depend on the `L.divIcon | L.icon` instance).

## Risks & Mitigation

**Risk 1: Type for the PNG import**
- *Risk*: TypeScript may complain about `import markerIcon from '...png'` without a module declaration.
- *Mitigation*: Vite's default `client.d.ts` (already referenced via `tsconfig.json` "types") provides the declaration. If TS still complains, extend `src/vite-env.d.ts` with the asset declaration.
