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

GeolocateControl

This is a React equivalent of Mapbox's GeolocateControl.

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

const geolocateControlStyle = {
  right: 10,
  top: 10
};

function App() {
  const [viewport, setViewport] = React.useState({
    longitude: -122.45,
    latitude: 37.78,
    zoom: 14
  });
  return (
    <ReactMapGL {...viewport} width="100vw" height="100vh" onViewportChange={setViewport}>
      <GeolocateControl
        style={geolocateControlStyle}
        positionOptions={{enableHighAccuracy: true}}
        trackUserLocation={true}
        auto
      />
    </ReactMapGL>
  );
}

Properties

Accepts all the options of Mapbox GeolocateControl.

onViewportChange (Function, optional)

Callback when the user interaction with this control requests a viewport update. If provided, will be called instead of the containing InteractiveMap's onViewportChange.

onGeolocate (Function, optional)

Callback when Geolocation API position updates. It is called with a Geolocation API PositionOptions object.

positionOptions (Object)

• default: {enableHighAccuracy: false, timeout: 6000}

A Geolocation API PositionOptions object.

fitBoundsOptions (Object)

• default: {maxZoom: 15}

A fitBounds options object to use when the map is panned and zoomed to the user's location. The default is to use a maxZoom of 15 to limit how far the map will zoom in for very accurate locations.

trackUserLocation (Boolean)

• default: false

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

showUserLocation (Boolean)

• default: true

By default a dot will be shown on the map at the user's location. Set to false to disable.

showUserHeading (Boolean)

• default: false

If true a heading indicator will be shown on the map at the user's location.

showAccuracyCircle (Boolean)

• default: true

By default, if showUserLocation is true , 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. Always disabled when showUserLocation is false.

className (String)

Assign a custom class name to the container of this control.

style (Object)

• default: {position: 'absolute'}

A React style object applied to this control.

label (String)

• default: 'Find My Location'

Label applied to the Geolocate control button.

disabledLabel (String)

• default: 'Location Not Available'

Label applied to the Geolocate control button if geolocation is disabled by the user.

auto (Boolean)

• default: false

Programmatically triggers geolocate when set to true. Initializing the component with true triggers inside componentDidMount where as changing to true at a later point triggers inside componentDidUpdate. Initally setting as or changing to false has no effect.

captureScroll (Boolean)

• default: false

Stop propagation of mouse wheel event to the map component. Can be used to stop map from zooming when this component is scrolled.

captureDrag (Boolean)

• default: true

Stop propagation of dragstart event to the map component. Can be used to stop map from panning when this component is dragged.

captureClick (Boolean)

• default: true

Stop propagation of click event to the map component. Can be used to stop map from calling the onClick callback when this component is clicked.

captureDoubleClick (Boolean)

• default: true

Stop propagation of dblclick event to the map component. Can be used to stop map from zooming when this component is double clicked.

capturePointerMove (Boolean)

• default: false

Stop propagation of pointermove event to the map component. Can be used to stop map from calling the onMouseMove or onTouchMove callback when this component is hovered.

Styling

Like its Mapbox counterpart, this control relies on the mapbox-gl stylesheet to work properly. Make sure to add the stylesheet to your page.

Source

geolocate-control.js