The Story Behind Terrae
Why I built this library and what problems it solves
Inspiration
This project is inspired by MapCN, a project by Anmol Saini. Building on these foundations, I created Terrae to bring declarative map components to React with a focus on simplicity and composability.
Challenge
Working with interactive maps has been a challenge since my first experience with Leaflet and Vue.js back in 2018. The imperative nature of most map libraries, lack of community resources, and difficulty in building complex, declarative components made it frustrating.
Years later, while working at Credium, I faced similar frustrations with Next.js. I was looking for a solution that would work seamlessly with modern tooling like shadcn/ui, provide a declarative pattern instead of imperative code, and reduce the complexity of implementing interactive maps. Unfortunately, I couldn't find anything that met all these requirements.
My initial idea was to build on top of Google Maps, but I quickly realized it was too challenging and not opinionated enough for the kind of composable, declarative components I wanted to create. Mapbox GL JS proved to be the perfect fit—it's flexible, powerful, and has the right level of opinion to build beautiful, composable components on top of it.
Solution
Existing Mapbox implementations in React felt clunky and required too much boilerplate. So I built Terrae (pronounced TER-ray)—a collection of beautiful, composable map components that embrace declarative patterns, focus on the interactive parts of maps, and work seamlessly with React and shadcn/ui.
Join the Mission
Have an idea to make Terrae better? Whether it's a new component, a bug fix, or an improvement—I'd love to hear from you! Help me build a project that lasts for the open source community.