Displaying a user's current location on a Mapbox map in React involves combining the browser's Geolocation API with Mapbox's map controls. The Geolocation API allows you to access the user's physical location, provided they grant permission. In a React app, you can call navigator.geolocation.getCurrentPosition to retrieve the user's latitude and longitude. This asynchronous call prompts the user for permission and returns their coordinates if allowed. Handling the user's response and possible errors—such as denied permissions or unavailable location data—is crucial for a robust user experience.

Once you have the user's coordinates, you can update the Mapbox map to center on that position. In React, this typically means using a state variable to store the user's location and then updating the map's center property accordingly. Additionally, you can add a marker to visually indicate the user's current position. This marker helps users orient themselves on the map and can be styled or animated for better visibility.

To center the map on the user's location, you update the map's center property to the coordinates received from the Geolocation API. In React, this often involves passing the new center as a prop or calling a method on the map instance if you are using refs. Adding a marker for the user's position involves rendering a Mapbox marker component at the same coordinates. You may also want to handle scenarios where geolocation is not available or the user denies permission by displaying an error message or fallback UI.

To summarize the process of centering the map on the user's location and adding a marker for their position in a React app with Mapbox, follow these steps:

1. Request the user's location using the browser's Geolocation API;
2. Wait for the user to grant or deny permission and handle possible errors;
3. If permission is granted, retrieve the latitude and longitude from the API response;
4. Update the map's center to the user's coordinates to focus the map on their location;
5. Add a marker at the user's coordinates to visually indicate their current position;
6. Provide fallback behavior or messaging if geolocation fails or is denied.

import { useRef, useEffect } from "react";
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

mapboxgl.accessToken = import.meta.env.VITE_MAPBOX_TOKEN;

function MapWithGeolocation() {
  const mapContainer = useRef(null);
  const map = useRef(null);

  useEffect(() => {
    if (map.current) return;

    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: "mapbox://styles/mapbox/streets-v11",
      center: [0, 0],
      zoom: 2,
    });

    // Request user's location
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          const { longitude, latitude } = position.coords;

          // Center map on user location
          map.current.setCenter([longitude, latitude]);
          map.current.setZoom(12);

          // Add marker for user position
          new mapboxgl.Marker({ color: "blue" })
            .setLngLat([longitude, latitude])
            .addTo(map.current);
        },
        () => {
          console.warn("Geolocation permission denied or unavailable");
        }
      );
    }

    return () => map.current.remove();
  }, []);

  return <div ref={mapContainer} style={{ height: "400px" }} />;
}