Work14
Business Map
An interactive OpenStreetMap app for exploring business locations from Airtable, with clustering, search, radius analysis, and place details.
- Role
- Fullstack
- Built for
- Personal
- Status
- private
- Stack
- Next.js, React, TypeScript, Leaflet, OpenStreetMap, Airtable API
The project
A personal project to explore map-based interfaces with OpenStreetMap and Leaflet. It loads thousands of business locations from an Airtable base and plots them on an interactive map, making it easy to see where businesses cluster and how many are within reach of any point.
Map features:
- OpenStreetMap tiles rendered with Leaflet and React Leaflet
- Marker clustering that groups nearby pins and expands smoothly as you zoom in
- Category-colored pins with custom icons, and nearby duplicates spread apart so none overlap
- Search across names, categories, and locations, flying the map to the selected place
- Radius analysis: drop a pin, set a distance, and count every place inside the circle
Data and UI:
- Records streamed in batches from Airtable, so the map fills in progressively
- Server-side caching for fast reloads
- Detail panel with address, website, contact details, opening hours, and a Google Maps link
- Shortlist places and filter the map down to just those
- Responsive layout for desktop and mobile
Next project
All work