Aquí estoy usando la geocodificación inversa. Estoy tratando de representar el mapa de la ubicación del usuario enviando la latitud y la longitud a la API de geocodificación inversa, pero no está representando solo las coordenadas iniciales utilizadas como centro.

 import ReactDOM from "react-dom"; import React, { useRef, useEffect, useState } from "react"; import mapboxgl from "mapbox-gl"; import "./map.css"; mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_ACCESS_TOKEN; function Map() { const [mapData, setMapdata] = useState(null); const mapContainerRef = useRef(null); const popUpRef = useRef(new mapboxgl.Popup({ offset: 15 })); // initialize map when component mounts useEffect(() => { const map = new mapboxgl.Map({ container: mapContainerRef.current, // See style options here: https://docs.mapbox.com/api/maps/#styles style: "mapbox://styles/mapbox/streets-v11", center: [85, 27], // starting position zoom: 12.5, }); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(function (position) { map.on("load", function () { map.addSource("myLocation", { type: "geojson", // Use a URL for the value for the `data` property. data:`https://api.mapbox.com/geocoding/v5/mapbox.places/${position.coords.latitude}, ${position.coords.longitude}.json? access_token=${process.env.REACT_APP_MAPBOX_ACCESS_TOKEN}` }); }); }); } // clean up on unmount return () => map.remove(); }, []); return <div className="map-container" ref={mapContainerRef} />; } export default Map;