how to get long/lat user location in react-map-gl (mapbox)

Question

how can i get the user's longitude and latitude in react-map-gl (mapbox). I am showing the user's location, but how do I find out his coordinates. I am making a news map, and I need to automatically place a mark on the user's location. Help, please. I did not find anything suitable in the documentation for react-map-gl. I hope you'll give me a hand. My code:

import PinsContext from '../../context';
import { ReactComponent as MarkerIcon } from '../../assets/marker.svg';
import ReactMapGL, { GeolocateControl, Marker, Popup } from 'react-map-gl'
import './Map.scss'
const Maps = () => {
  const { pins, setPins } = useContext(PinsContext);
  const [value, setValue] = useState('');
  const sendNews = () => {
    setPins([
      ...pins,
      {
        id: `${newLocation.lat + Math.random()}`,
        lat: newLocation.lat,
        long: newLocation.long,
        text: value,
      },
    ]);
    setValue('');
    setNewLocation(null);
  };

  const handleKeyPress = e => {
    if (e.key === 'Enter') {
      sendNews()
    }
  }
  const [currentPinId, setCurrentPinId] = useState(null);
  const [newLocation, setNewLocation] = useState(null);

  const [viewport, setViewport] = useState({
    width: '100vw',
    height: '100vh',
    latitude: 48.858372,
    longitude: 2.294481,
    zoom: 8,
  }); 
  const onAddMarker = (e) => {
    const [long, lat] = e.lngLat;
    setNewLocation({
      lat,
      long,
    });
  };
  
  const handleMarkerClick = (id, lat, long) => {
    setCurrentPinId(id);
    setViewport({ ...viewport, latitude: lat, longitude: long });
  };
  
  
  
  const MapStyle = {
    position: 'absolute',
    zIndex: '2',
  }
  const PopupStyleText = {
    fontSize: '16px',
    maxWidth: '100px',
    height: '100px'
  }

  const geolocateStyle = {
    bottom: '50px',
    left: 0,
    margin: 10
  };
  const positionOptions = {enableHighAccuracy: true};
  
  return (
    <ReactMapGL
      {...viewport}
      mapboxApiAccessToken="pk.eyJ1IjoienViY292MDEiLCJhIjoiY2t1OG0yOTIyMDloajJ1bXp1bG14bDZtNyJ9.52s7E-zwqUjKUgeOjX25ew  "
      onViewportChange={(nextViewport) => setViewport(nextViewport)}
      onClick={onAddMarker}
      transitionDuration={40}
      style={MapStyle}
      mapStyle="mapbox://styles/zubcov01/cku8m5t3b3h8417o32iod27z4">
        
      <GeolocateControl
        style={geolocateStyle}
        positionOptions={positionOptions}
        trackUserLocation
        auto
      />
      {pins.map((pin) => (
        <div key={pin.id}>
          <div className="markerBlock">
            <Marker
              latitude={pin.lat}
              longitude={pin.long}
              offsetLeft={-20}
              offsetTop={-10}>
              <div onClick={() => handleMarkerClick(pin.id, pin.lat, pin.long)}>
                <MarkerIcon />
              </div>
            </Marker>
            <div className="popupBlock">
              <Popup
                latitude={pin.lat}
                longitude={pin.long}
                closeButton={false}
                closeOnClick={true}
                onClose={() => setCurrentPinId(null)}
                // anchor="top"
                dynamicPosition={true}
                anchor="bottom"
                >
                <div>
                  <span style={PopupStyleText}>{pin.text}</span>
                </div>
              </Popup>
            </div>
          </div>
        </div>
      ))}

      {newLocation && (
        <div>
          <Marker
            latitude={newLocation.lat}
            longitude={newLocation.long}
            offsetLeft={-20}
            offsetTop={-10}>
            <div>
              <MarkerIcon />
            </div>
          </Marker>
          <Popup
            latitude={newLocation.lat}
            longitude={newLocation.long}
            closeButton={true}
            closeOnClick={false}
            onClose={() => setNewLocation(null)}
            // anchor="top"
            dynamicPosition={true}
            anchor="bottom">
            <input
            className = 'input-marker'
              value={value}
              onChange={(e) => setValue(e.target.value)}
              type="text"
              placeholder="Текст новости"
              onKeyDown = {handleKeyPress}
              required
            />
            <button className = 'btn-marker'
            onClick={sendNews}>✔</button>
          </Popup>
        </div>
      )}
    </ReactMapGL>
  );
};

export default memo(Maps);```

score 1 · Answer 1 · edited Mar 24 '22 at 00:12

on GeolocateControl component there is a function through which you can get the user current location, like;

<GeolocateControl
  style={geolocateControlStyle}
  positionOptions={{ enableHighAccuracy: true }}
  trackUserLocation={true}
  onGeolocate={(position) => {
    // get latitude and longitude of user current location
    setNewLocation([position.coords.latitude, position.coords.longitude]);
  }}
/>

how to get long/lat user location in react-map-gl (mapbox)

1 Answers1