React-mapbox-gl: How to locate a user based on their real time Geo-location?

[kolharsam]

Basically, how can I implement this example: https://www.mapbox.com/mapbox-gl-js/example/locate-user/ using react-mapbox-gl?

[mklopets]

Using the onStyleLoad prop on the map (see docs), you can get a reference to the pure mapbox-gl-js map instance, that you can use to do everything listed in the mapbox-gl API spec – that also includes calling map.addControl(new mapboxgl.GeolocateControl(..... like shown in that example. For creating the Mapbox control that you'll add to the map, you'll need to import NavigationControl from the mapbox-gl package.

[kolharsam]

An example would be helpful. Thank you!

[mklopets]

See https://github.com/alex3165/react-mapbox-gl/issues/605#issuecomment-415473571 for an example of adding a map control. Does that help?

[rlueder]

It wasn't at first obvious to me either, so for anyone looking for an example:

import { GeolocateControl } from "mapbox-gl";

then

const onMapLoad = map => { map.addControl(new GeolocateControl()); };

and

<Map ... onStyleLoad={onMapLoad} />