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)

The component will display GPS icon 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

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)

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)

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)

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

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.