Custom maps are surprisingly painful to build. Mapbox Studio is powerful but expensive and locks you into their platform. Google Maps styling is limited and proprietary. Raw MapLibre gives you control but demands GIS expertise most teams don't have. The result? Most products ship with default map styles that clash with their brand.
We wanted something in between: AI-powered styling that works in plain English, brand colour extraction from any URL, and code you actually own.
What we built
Thirdmap is an AI-powered map styling tool. Type a prompt like "dark navy ocean with gold roads" and watch 93 map layers update instantly. Paste any URL and it extracts the brand's colour palette, then applies it to your map in seconds.
The key innovation is what we call semantic layer groups. Instead of exposing 93 individual map layers (water, highways, residential roads, parks, buildings, labels...), we grouped them into 17 human-readable categories. This abstraction powers both the visual controls and the AI—Claude can work with "water" and "roads" instead of memorising obscure layer IDs.
When you're done, export everything: Style JSON for any Mapbox-compatible renderer, standalone HTML that works offline, React components, or shareable URLs with the entire style compressed into the hash. No subscription, no vendor lock-in. You own the code.
How we built it
The stack: React 19 with TypeScript and Vite, MapLibre GL JS v5 for rendering, Zustand for state management, and Anthropic's Claude for the AI styling. We chose MapLibre over Mapbox specifically to avoid vendor lock-in—it's fully open source and follows the same style specification.
The trickiest architectural decision was the style diffing system. The Mapbox Style Spec is a 5,000+ line JSON document. We couldn't just replace the entire style on every change—the map would flicker and performance would tank. Instead, we built a reactive sync hook that compares the previous and current styles, then patches only the changed properties.
For the share URLs, we compress the entire style JSON using the browser's native CompressionStream API (gzip), then base64 encode it into a URL-safe hash. A massive style document shrinks to a shareable link.
Honest reflections
What went well: the semantic layer abstraction was the right call. It made both the UI and the AI dramatically simpler. Users see "water" and "roads", not layer_carto_dark_water_v3_line_15. Claude can reason about styling in human terms.
What was harder than expected: MapLibre strictly validates paint properties per layer type. Early in the build, the AI was applying fill-color to everything, including line and symbol layers. MapLibre would silently fail or throw cryptic errors. We had to build type-aware property mapping—fill-color for polygons, line-color for lines, text-color for labels.
The other gotcha was fuzzy matching. We initially used .includes() to match layer IDs, which caused cascading bugs when layer names partially overlapped. Lesson learned: always use exact matching for identifiers.
What we'd do differently: we shipped with zero test coverage. The project moved fast and we prioritised features over tests. That's fine for a solo week-long build, but it's tech debt we'll need to address before adding more features.
The methodology in action
This is week 15 of our 52 Products challenge—building one working product per week for a year. Thirdmap demonstrates the same approach we use in Build Sprints for clients: fixed timeframe, real deployed code, no endless discovery phases.
The semantic abstraction pattern is something we've used repeatedly across sprints. Find the right level of abstraction for your domain, and suddenly both humans and AI can work with it. It's not about building features—it's about finding the primitives that make features simple.
Try it yourself
Thirdmap is live at thirdmap.com. It's free to use—bring your own Anthropic API key if you want AI styling, or just use the visual controls. No sign-up required.
If you're building a product that needs custom maps and don't want to spend months fighting with GIS tools, this might save you some time. And if you want help shipping your own MVP in a week rather than a quarter, that's what we do at Precode.
