Map, Click, Learn: A Builder’s Field Notes After Shipping an Interactive Map in a Weekend

I went into this thinking “Maps are gimmicks.” Then I shipped one and watched users treat it like a treasure hunt. This is a first-person write-up of how I turned a dull list of locations into a clickable, low-friction map—the kind that answers questions without a paragraph of copy. I’ll keep it human, practical, and a little diary-ish, because that’s how I actually work.

The add-on I chose was Interactive World Maps. I didn’t want a GIS degree; I wanted a weekend project with decent UX: hover, click, tooltip, done. I also promised myself two constraints to keep the page calm:

Below is the build, split between story (what happened) and workshop steps (what you can copy). I’ll also throw in checklists, because my future self forgets.

Friday, 19:40 — “Do we really need a map?”

The client sells region-specific bundles. The old layout was a grid of flags and country names. Pretty, but static. Support tickets kept asking the same things:

• “Which regions are grouped together?”
• “Do you ship here?”
• “What’s in the bundle for my area?”

A map wasn’t about “wow.” It was a UI that invites questions with a hover and answers with a click. So yes—we needed a map, provided I could keep it light.

I wrote the acceptance criteria on a sticky:

• Tap targets that make sense on phones.
• Tooltips that say something real (not “Country: France”).
• No jitter—no layout shift, no ghosts.
• Accessible—keyboard, contrast, and polite motion.

Saturday, 09:10 — The Setup (Workshop Style)

Goal: Don’t fight defaults; use the minimum viable knobs.

1) Choose the projection & scope
- I started global but quickly switched to region-focused views for sanity—world → continent → subregion. Less pin-density, more clarity.

2) Define the interaction model
- Hover = hint; click = detail.
- Tooltips contain one promise (“What you get in this region”) plus a tiny “view details” CTA that jumps to the relevant section.

3) Color & contrast
- Base map: quiet neutrals.
- Active region: a single brand accent.
- Never rely on color alone; add focus rings and underline on keyboard focus.

4) Data source
- Keep a compact JSON with region keys, labels, and short blurbs.
- No live API calls for v1; hydration happens on load to avoid spinner fatigue.

5) Performance budget
- Largest Contentful Paint (LCP) target under 2.5s on typical mobile.
- Limit fonts above the fold to one weight.
- Keep the map SVG under a reasonable size; lazy-load extended datasets below the fold.

That’s it. No heroics.

Saturday, 10:30 — UX: How People Actually Touch Maps

I watched three colleagues use a prototype on their phones. Two patterns stood out:

• They tap first, read later. So the click target must be generous, and the first line in the tooltip must earn its space.
• They scan by neighborhood, not alphabet. Grouping by proximity beats A–Z lists for discovery.

Rules I wrote down:

• Country/region hit boxes should forgive fat-finger taps (40px-ish).
• Tooltips open fast but not jumpy; use a small fade (150–200ms).
• Esc closes, Tab cycles highlights, Enter/Space toggles the focused region.
• On small screens, pan & zoom can wait; v1 just toggles regions and scrolls to detail sections.

I also added a “Reset view” button. Obvious in hindsight; saved two users an extra swipe.

Saturday, 12:00 — Content: Tooltips That Pull Their Weight

Fluff kills maps. The tooltip is a micro-pitch; keep it practical:

• One line promise: “Bundle includes X, ships from Y, ETA Z.”
• One action: “Compare regions” or “See pricing for [Region]”.
• One tiny reassurance: “Free returns in 30 days” or similar.

I killed the flag icons (too dense), kept the region name prominent, and used a consistent order for those three lines. Consistency = speed.

Saturday, 14:45 — Accessibility Pass (No Fancy Words, Just Care)

Maps are notorious for being pretty-but-opaque. I did a pass with a keyboard and a screen reader:

• Tab navigates regions, not invisible SVG paths.
• The focused region gets an outline and a visible name badge.
• Tooltips use ARIA roles and don’t trap focus.
• Motion respects prefers-reduced-motion.
• Color contrast meets minimum ratios; accent shades are adjusted for readability.

A map you can’t keyboard through isn’t a map—it’s wallpaper.

Saturday, 16:00 — The “Oh No” Moment (Diary)

I zoomed the browser and discovered the tooltip exceeded the viewport on smaller phones. It looked like a note taped halfway off screen.

Fix: put the tooltip in a portal/container anchored to the map corner, not the exact click centroid; add a little arrow to keep the illusion of pointing. Now it never goes off the rails, and the content stays legible. Boring solution, big difference.

Saturday, 17:20 — The Data Cleanse

Bad data ruins good UI. I trimmed the JSON to the minimum:

[
  { "key": "eu-west", "label": "Western Europe", "promise": "Local shipping, VAT included", "cta": "#eu-west" },
  { "key": "na", "label": "North America", "promise": "2–4 day delivery from US hubs", "cta": "#north-america" }
]

No prose. No HTML. Just the pieces the tooltip needs.

Saturday, 18:30 — Performance Pass (Not Chasing Badges)

I kept the “calm” rules:

• Fonts: local WOFF2; preload one weight; font-display: swap.
• Images: the map SVG is the image; detail promos load below the fold.
• CSS: extract a small critical slice for the hero + map wrapper; defer the rest.
• JS: no external libraries for v1; tiny utility for focus & tooltip placement.

My synthetic tests were boring—which is what I wanted. LCP held steady; no unexpected shift.

Sunday, 09:10 — Shipping Notes (What I’d Repeat)

• Start regional, not world-sized; earn complexity later.
• Write tooltips last—after you’ve watched someone hover and squint.
• Keyboard pass early, not as a mercy patch.
• Add a Reset button day one; it feels generous.
• Save the build as a preset (projection + palette + spacing + tooltip layout). Future you will send a thank you emoji.

The Copy-Me Checklist (30 Minutes)

• [ ] Projection chosen; region scope narrowed
• [ ] Tap targets ≥ 40px; hover + click behaviors defined
• [ ] Tooltip content: promise / action / reassurance (plain language)
• [ ] Keyboard: Tab through regions; Enter/Space toggle; Esc closes
• [ ] Motion: fades ≤ 200ms; prefers-reduced-motion respected
• [ ] Contrast meets AA; active region visibly distinct beyond color
• [ ] Tooltip never overflows viewport (anchored container)
• [ ] JSON trimmed to keys, labels, promises, anchors
• [ ] Critical CSS extracted; single font weight preloaded
• [ ] “Reset view” button wired and visible

Tape it near your monitor.

A Tiny Comparison (Why a Map Beat a Giant List)

List page pros: fast to build, easy to scan alphabetically. Cons: hides relationships and clusters, discourages exploration.

Map page pros: encourages discovery by neighborhood; answers “where am I?” at a glance; anchors detail sections to real geography. Cons: needs care for accessibility; demands calmer content.

I kept the list as a fallback below the map for readers who already know exactly what they want. Choice without noise.

FAQ I Keep Getting (Short, Human Answers)

Q: Do I need search on the map?
If your regions > 20 or some have tricky names, add a type-ahead input above the map. Otherwise, let the map be the discovery tool.

Q: Can I add pins with counts?
Be careful—count bubbles invite heatmap thinking and can overshadow content. Start with gentle dots and add counts only if they genuinely help decisions.

Q: Will motion help engagement?
Only if it’s on intent (hover/focus). Constant pulsing gets ignored—or worse, turns off users who don’t feel in control.

Q: What if someone can’t or won’t use the map?
Keep the list fallback and anchor links to sections. Good UX has a ramp and a staircase.

The Two Links I Actually Used (and Why)

When I scout addon patterns for a build, I browse WordPress Addons to compare options. For this project, I committed to Interactive World Maps and kept the rest of my notes in a boring runbook (I tag those notes with “gplpal” so I can find them later). That’s it—two links, placed where they make sense, not scattered like confetti.

Closing: The Map That Minds Its Manners

I didn’t ship a globe that spins like a DJ deck. I shipped a quiet, clickable atlas that answers “what do I get here?” and “how fast does it arrive?” in one breath. The surprise wasn’t engagement; it was relief—users stopped hunting, started choosing, and my support inbox exhaled a little.

The phrase Interactive World Maps shows up twice in my runbook for a reason: it’s now part of my baseline kit. Not because maps are flashy, but because sometimes a reader’s brain wants to point and let the page carry the conversation.

I’ll do it again. And next time, I’ll time-box it to one evening—because the rules are the same, and the preset is sitting there, waiting.