Interactive Member-Mapping Tool (Next.js + Mapbox GL)
Overview
An interactive web map for plotting and exploring members across a geographic region, built on Next.js and Mapbox GL. Users browse pins on a county-level basemap with geocoder search and rectangle-draw selection tooling.
Why It Exists
The goal was a lightweight, deployable internal tool to visualize a member dataset on a real map, turning a flat list into a spatial, searchable view without standing up a heavy GIS stack.
What We Built
A Next.js 14 (App Router) application with a dedicated map route. The map layer uses react-map-gl/mapbox-gl with custom components: a Pin marker, a DrawControl (via @mapbox/mapbox-gl-draw plus the rectangle-mode plugin and @turf/bbox) for area selection, and a geocoder-control (@mapbox/mapbox-gl-geocoder) for place search. Data is supplied as static GeoJSON/JSON assets (constanta_county.json, membrii.json, data.json) for the county outline and member points. Styling is Tailwind CSS. The repo ships a Dockerfile and a k8s-deployment.yml, indicating containerized deployment to Kubernetes.
Technologies & Approach
Next.js + Tailwind for a fast, modern front end; Mapbox GL for performant vector mapping with first-class draw and geocoding plugins; static GeoJSON to keep the data layer simple and self-contained. Docker + Kubernetes manifests make it deployable as a standalone service.
Outcome / Impact
Delivered a working interactive map experience with search and area-selection over a real member dataset, packaged for container deployment. A compact demonstration of geospatial front-end work.
Capabilities Demonstrated
- Interactive vector mapping with Mapbox GL (markers, draw, geocoder)
- GeoJSON-driven county and point overlays
- Next.js 14 App Router + Tailwind front end
- Containerized delivery with Docker and Kubernetes manifests