Build notes
Building a map that stays out of your way.
A short look at nearby searches, clusters and the details that sit behind a map pin.
Edited 16 Oct 2026 · Sources & inspiration ↓
When you need a washroom, the technology behind the map should not be something you have to think about. Search, choose a place, read what is known, and get on with the trip.
Behind that simple sequence, Lavvi uses a Next.js web app, Supabase and PostGIS for location data, and Mapbox for the map. Here are two parts of the implementation that help make the screen manageable.
Ask for places around a location
Lavvi’s database migrations use PostGIS distance queries for nearby searches. ST_DWithin tests whether locations fall within a chosen distance; its geography form uses metres. This lets the database narrow the search before results reach the page.[1]
Make a crowded view readable
At a wider zoom, individual markers can overlap. Lavvi’s cluster layer uses use-supercluster, which wraps Mapbox’s Supercluster library, to group nearby points. Zooming in reveals more detail.
The library documentation is credited below. Using an open-source tool is part of the implementation, and its authors deserve a mention.[2]
Keep the claims measurable
A description of the stack is not a performance benchmark. This note makes no fixed frame-rate, loading-time or offline-availability promise. Those would need measurements on named devices and connections.
The practical question is whether someone can find a place and understand its details. That is what the design and engineering need to serve.
The reading behind this letter
Sources & inspiration
Based on Lavvi’s current web implementation and database migrations. Technical references are linked below.
- PostGIS projectST_DWithin documentation
Technical reference for the distance query described above.
- Mapbox · open-source projectSupercluster
Clustering library used through use-supercluster; credit for the underlying implementation.
Spotted something we should correct? Write to Lavvi.