A custom interactive map I built at Other Tomorrows for the Emerald Necklace Conservancy — the historic chain of parks that threads through Boston, from Charlesgate down through the Back Bay Fens, the Riverway, and Jamaica Pond to the Arnold Arboretum and Franklin Park. The Conservancy wanted visitors to be able to hold the whole necklace in their hand: to feel that these aren't eight separate parks but one connected system, and to freely explore any part of it — down to a single overlook, fountain, or trailhead — right from their phone.
I came onto the project after the first round of design and took the map over — the part I own here is the interaction. I reworked it around one question: how do you let someone roam the whole system freely, follow their curiosity from one park to the next, and open up the story of any place, without ever feeling lost or handled? Most of what I did lives in that layer — the movement, the states, the moment-to-moment feel of exploring.
How it works
See it all at once, and looking for a place becomes wandering, not searching.
It opens on the full necklace so the through-line reads at a glance, then invites you in. Pan and zoom the system, tap a park to focus it, or tap a point of interest to open its details — photo, hours, accessibility, the story of the place — with a filter panel to narrow by park, facility, or activity. Everything is tuned to feel like exploring rather than searching: the parks ease into their green, overlapping pins fan apart so none get buried, and even the loading moment keeps you company — finding a sun-basking painted turtle, drawn from the critters that actually live along the Necklace.
The build
One React component drops into Framer: Mapbox, a custom tileset, Airtable content, and a Worker hiding the keys.
One custom React component that drops straight into the Conservancy's Framer site. Mapbox GL renders a bespoke style over a custom Emerald Necklace tileset; all the content lives in Airtable and is pulled through a small Cloudflare Worker, so no keys ever reach the browser. It's data-driven by convention — add a field named Filter--Activities in Airtable and an "Activities" filter just appears, no code change needed. And to keep it fast and cheap, the billable Mapbox map doesn't even load until your first interaction; before that it's a static image of the necklace. Built with Claude Code, matched to the design screen by screen.
What I care most about is that it stays genuinely fun to move through while still delivering the one idea that matters most — that the Emerald Necklace is a single, continuous system, not a scatter of parks. It's live for the Conservancy now; the version here is my own.