react-map-gl/docs/api-reference/geolocate-control.md

GeolocateControl

React component that wraps GeolocateControl.

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

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

Methods

trigger(): boolean

Trigger a geolocation event.

Returns: true if successful.

Properties

Note that the following properties are not reactive. They are only used when the component first mounts.

Tracking options

positionOptions: PositionOptions

A Geolocation API PositionOptions object

trackUserLocation: boolean

Default: false

If true the GeolocateControl becomes a toggle button and when active the map will receive updates to the user's location as it changes.

Render options

fitBoundsOptions: FitBoundsOptions

Default: {maxZoom: 15}

A (fitBounds) options object to use when the map is panned and zoomed to the user's location.

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

Default: 'top-right'

Placement of the control relative to the map.

showAccuracyCircle: boolean

Default: true

Draw a transparent circle will be drawn around the user location indicating the accuracy (95% confidence level) of the user's location. Set to false to disable. This only has effect if showUserLocation is true.

showUserHeading: boolean

Default: false

If true, an arrow will be drawn next to the user location dot indicating the device's heading. This only has affect when trackUserLocation is true.

showUserLocation: boolean

Default: true

Show a dot on the map at the user's location. Set to false to disable.

Callbacks

onGeolocate: (evt: GeolocateEvent) => 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: GeolocateEvent) => void

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

onTrackUserLocationStart: (evt: MapboxEvent) => void

Called when the GeolocateControl changes to the active lock state.

onTrackUserLocationEnd: (evt: MapboxEvent) => void

Called when the GeolocateControl changes to the background state.