2.5 KiB
Geolocate Control
This is a React equivalent of Mapbox's GeolocateControl.
import React, { 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.
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} - default: {}
A React style object applied to Geolocate control button.
Check locate user example for basic styling.
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.