MapBox App

This application is a MapBox 3D Building Explorer. It is a Next.js web application designed to let users search for addresses and view them on an interactive 3D satellite map.

Here are the key features and characteristics of the app:

Core Features

Address Search with Autocomplete: Uses the Mapbox Search JS SDK to provide real-time suggestions as you type an address.

Geocoding: Converts the selected address into precise map coordinates using the Mapbox Geocoding API.

3D Building Visualization: Renders extruded (3D) buildings on top of a satellite base map, giving a realistic view of urban environments.

Building Highlighting: Automatically identifies and highlights the nearest building to your search result on the map.

Interactive Map Controls: Includes custom buttons to zoom, rotate (adjust bearing), and tilt (adjust pitch) the map view.

Technology Stack

Framework: Next.js 15 (using the modern App Router)

UI Library: React 19

Maps: Mapbox GL JS integrated via react-map-gl

Styling: Tailwind CSS for utility-first styling

Testing & Quality: Jest and React Testing Library for unit testing, and ESLint for code quality checks.

In summary, it's a modern, React-based mapping tool that allows users to seamlessly find a location and explore its surrounding 3D architecture using Mapbox's advanced mapping capabilities.