Looking to develop a full-screen map using Next.js and Mapbox?

The objective is to ensure that the map covers the entire screen seamlessly.

Upon clicking on a specific point on the map, the application will promptly request a GeoJSON dataset of points.

You can access the GeoJSON dataset via this link: Schools List GeoJSON

While the GeoJSON dataset requested will encompass all the relevant data, the application will intelligently display only the pins located within a customizable radius of the clicked point.

The radius isn't fixed at 1km, allowing users to adjust it according to their preferences via a slider component.

For this project, we won't be utilizing any other material library. Instead, we'll be incorporating Radix UI for seamless integration.

It's important to note that the previous developer mentioned the use of a "headless UI" approach, although specifics remain unclear.

Additionally, the application must be fully responsive to ensure optimal usability across various devices, including mobile phones and tablets.