2.9 KiB
Geolocate Control
This is a React equivalent of Mapbox's GeolocateControl.
import * as React from 'react';
import { Component } from "react";
import ReactMapGL, {GeolocateControl} from "react-map-gl";
class Map extends Component {
state = {
viewport: {longitude: -122.45, latitude: 37.78, zoom: 14}
}
render() {
const {viewport} = this.state;
return (
<ReactMapGL {...viewport}
width="100vw"
height="100vh"
onViewportChange={viewport => this.setState({viewport})}>
<GeolocateControl
positionOptions={{enableHighAccuracy: true}}
trackUserLocation={true}
/>
</ReactMapGL>
);
}
}
Properties
Accepts all the options of Mapbox GeolocatControl.
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.
style (Object)
A React style object applied to Geolocate control button.
Check locate user example for basic styling.
label (String)
- default:
Geolocate
Label applied to the Geolocate control button.
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.