afv-library/samples/webapp-template-app-react-sample-b2e-experimental/.a4drules/skills/building-interactive-map/SKILL.md

name	description
building-interactive-map	Adds interactive Leaflet maps with geocoded markers to React pages. Use when the user asks to add a map, show locations on a map, display property pins, add a map view, or integrate mapping into the web application.

Interactive Map

When to Use

Use this skill when:

• Adding an interactive map to a page (property search, store locator, location detail)
• Displaying one or more markers/pins on a map
• Converting addresses to map coordinates (geocoding)
• Building a split-panel layout with map + list

---

Step 1 — Determine the map use case

Identify the scenario:

• Multi-marker search — map shows multiple pins alongside a scrollable list (e.g. property search, store locator)
• Single-location detail — map shows one pin for a specific address (e.g. property detail, contact page)
• Static overview — map centered on a region with no interactive markers

If unclear, ask:

"Should the map show a single location, multiple markers from a list, or just a general area overview?"

---

Step 2 — Install dependencies

The map requires leaflet and react-leaflet. Read implementation/leaflet-map.md for the exact dependency setup.

---

Step 3 — Choose implementation path

Read the corresponding guide:

• Map component — read implementation/leaflet-map.md for building the reusable <MapComponent>.
• Geocoding — read implementation/geocoding.md for converting addresses to lat/lng coordinates.

For a multi-marker search page, you will need both.

---

Step 4 — Wire the map into the page

Depending on the use case:

Multi-marker search layout

┌──────────────────────────────────────┐
│  Search bar / filters                │
├────────────────────┬─────────────────┤
│                    │  Scrollable     │
│   Map (2/3)        │  list (1/3)     │
│                    │                 │
└────────────────────┴─────────────────┘

• Map takes ~2/3 width on desktop, full width on mobile stacked above the list.
• List is scrollable with overflow-y-auto.
• Markers are geocoded from addresses in the list.

Single-location detail

• Place the map below the hero image or address section.
• Geocode the address on mount, render one marker.
• Show the map only after coordinates resolve (conditional render).

---

Verification

Before completing:

1. Map renders with visible tiles (no gray boxes).
2. Markers appear at correct locations.
3. Map is responsive (works on mobile widths).
4. SSR-safe — no window is not defined errors during build.
5. Run from the web app directory:

cd force-app/main/default/webapplications/<appName> && npm run lint && npm run build

• Lint: MUST result in 0 errors.
• Build: MUST succeed.