React-Map-GL – Locating user on the map

Whenever you are dealing with map applications, one of the common requirements is locating the user on the map.

In today’s blog post I will show you how to locate the user on the map and show a marker on the user location using react-map-gl‘s inbuilt GeolocateControl and Marker components.

In this post, I will skip the initial application setup steps and proceed with next steps. You can read my previous blog post for the initial setup process.

You can use the repo from GitHub as a base code for following blog post.

Using GeolocateControl component

First we use GeolocateControl control component.

<GeolocateControl positionOptions={{ enableHighAccuracy: true }} showUserLocation={true} />
Code language: Java (java)
https://gist.github.com/sureshgadupu/8e61e74f352361f50d0afbcd0c432e44

The component will display GPS icon the map.

GPS icon on the map

When the user clicks on the GPS icon, the map zooms and takes you to the location where the user is located. The zoom level applied will depend on the accuracy of the geolocation provided by the device.

On my laptop, I have experienced 2 different levels of zooms with edge and Chrome browser. While Edge browser always zooms to near my location in Christchurch, Chrome browser most of the time zooms to Christ church city and some times zooms to near to my location.

Below screenshot and video shows Chrome browser showing user location

user location on chrome

Below screenshot and video shows Edge browser showing user location

Showing Marker

Now we will try to show the icon for the user location. For that, we need to capture the longitude and latitude of user location.

First we create a status variable to hold user location co-ordinates

const [userLocation, setUserLocation] = useState({});
Code language: Java (java)
https://gist.github.com/sureshgadupu/a561319198cd700e4a3081328af03fa0

GeolocateControl component has onGeolocate property which takes a callback method. When the user clicks on GPS icon, it generates a PositionOptions object which contains latitude and longitude information and passed on to the onGeolocate callback method.

When the user clicks on GPS icon, we capture the latitude and longitude information and store them in userLocation status variable.

<div style={geolocateStyle}> <GeolocateControl positionOptions={{ enableHighAccuracy: true }} showUserLocation={true} onGeolocate={(PositionOptions) => { setUserLocation({ ...userLocation, latitude: PositionOptions["coords"].latitude, longitude: PositionOptions["coords"].longitude, }); }} /> </div>
Code language: Java (java)
https://gist.github.com/sureshgadupu/f84a27816fb6ccb8a386b1ba586b9970

We use the captured latitide and longitude to show the icon using Marker component.

{Object.keys(userLocation).length > 0 ? ( <Marker longitude={userLocation.longitude} latitude={userLocation.latitude} > <svg height={SIZE} viewBox="0 0 24 24" style={{ cursor: "pointer", fill: "#d00", stroke: "none", transform: `translate(${-SIZE / 2}px,${-SIZE}px)`, }} > <title>You are here</title> <path d={ICON} /> </svg> </Marker> ) : null}
Code language: Java (java)
https://gist.github.com/sureshgadupu/4e2c04f868a9b6fc531a46d501b90306

After above changes we can see them in action in below videos in different browsers

Chrome Browser
Edge Browser

In my testing Edge browser showing pointer close to my location compared to Chrome browser. If your device contains GPS then you can expect better results.

If you want to directly move the map to user location automatically when the application opens use auto={true} property on GeolocateControl component.

You can download the source code for this blog post from GitHub.

Similar Posts