Clustered map
Every recommended spot, clustered on the map.
Copies a short instruction with your private download link. Paste it into your agent: it downloads the whole skill (the source code, the setup steps and the mistakes we already made for you) and builds the screen.
Works with
What it does
SwiftUI's Map has no built-in clustering, and hundreds of custom Annotation views make it stutter and drop gestures. This screen shows every recommended spot at any zoom level while keeping the annotation count bounded:
- Zoomed out (visible latitude span > 0.25°) — spots are grouped on a coarse grid (or by city, when you give each spot a
clusterKey) into coral count bubbles at each group's centroid. Tap a bubble and the camera flies in to frame its members. - In between (more than 100 spots visible) — a finer grid turns each cell into a bucket pin: the best-rated spot's pin plus a coral count badge. Tap to zoom 3.5x and the bucket splits.
- Street level (100 or fewer visible) — every spot is a pin: the recommending curator's avatar with a tinted category badge. Tap to select (bigger, coral ring) and a preview card slides up with cover, name, rating, category, neighborhood · price, curator and likes. Tap the card to open your detail page; tap the map or the × to dismiss.
Category chips float over the top ("All" + whatever categories exist, most common first, or the order you pass in categories). Everything is native MapKit — the shipped app this was extracted from showed Google Places data, but rendering and clustering are pure SwiftUI.Map, no Google or third-party SDK.
What you get
- ✓1,142 lines of source code, ready to paste
- ✓Architecture
- ✓Dependencies
- ✓Implementation
- ✓Usage
- ✓Integration Checklist
- ✓Common Customizations
- ✓Known Pitfalls