GeolocateControl

React component that wraps the base library's GeolocateControl class (Mapbox | Maplibre).

Mapbox

import * as React from 'react';
import Map, {GeolocateControl} from 'react-map-gl';

function App() {
  return <Map
    mapboxAccessToken="<Mapbox access token>"
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    mapStyle="mapbox://styles/mapbox/streets-v9"
  >
    <GeolocateControl />
  </Map>;
}

Maplibre

import * as React from 'react';
import Map, {GeolocateControl} from 'react-map-gl/maplibre';

function App() {
  return <Map
    initialViewState={{
      longitude: -100,
      latitude: 40,
      zoom: 3.5
    }}
    mapStyle="https://api.maptiler.com/maps/streets/style.json?key=get_your_own_key"
  >
    <GeolocateControl />
  </Map>;
}

Properties

Reactive Properties

style: CSSProperties

CSS style override that applies to the control's container.

Callbacks

onGeolocate: (evt: GeolocateResultEvent) => void

Called on each Geolocation API position update that returned as success.

onError: (evt: GeolocateErrorEvent) => void

Called on each Geolocation API position update that returned as an error.

onOutOfMaxBounds: (evt: GeolocateResultEvent) => void

Called on each Geolocation API position update that returned as success but user position is out of map maxBounds.

onTrackUserLocationStart: (evt: GeolocateEvent) => void

Called when the GeolocateControl changes to the active lock state.

onTrackUserLocationEnd: (evt: GeolocateEvent) => void

Called when the GeolocateControl changes to the background state.

Other Properties

The properties in this section are not reactive. They are only used when the component first mounts.

Any options supported by the GeolocateControl class (Mapbox | Maplibre), such as

• positionOptions
• fitBoundsOptions
• trackUserLocation
• showAccuracyCircle
• showUserLocation

Plus the following:

position: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

Default: 'bottom-right'

Placement of the control relative to the map.

Methods

The underlying native GeolocateControl instance is accessible via a React ref hook. You may use it to call any imperative methods:

Mapbox

import * as React from 'react';
import {useRef, useEffect} from 'react';
import Map, {GeolocateControl} from 'react-map-gl';
import type mapboxgl from 'mapbox-gl';

function App() {
  const geoControlRef = useRef<mapboxgl.GeolocateControl>();

  useEffect(() => {
    // Activate as soon as the control is loaded
    geoControlRef.current?.trigger();
  }, [geoControlRef.current]);

  return <Map>
    <GeolocateControl ref={geoControlRef} />
  </Map>;
}

Maplibre

import * as React from 'react';
import {useRef, useEffect} from 'react';
import Map, {GeolocateControl} from 'react-map-gl/maplibre';
import type maplibregl from 'maplibre-gl';

function App() {
  const geoControlRef = useRef<maplibregl.GeolocateControl>();

  useEffect(() => {
    // Activate as soon as the control is loaded
    geoControlRef.current?.trigger();
  }, [geoControlRef.current]);

  return <Map>
    <GeolocateControl ref={geoControlRef} />
  </Map>;
}

Source

geolocate-control.ts