diff --git a/docs/api-reference/geolocate-control.md b/docs/api-reference/geolocate-control.md index 2878cbb5..c59ceb2e 100644 --- a/docs/api-reference/geolocate-control.md +++ b/docs/api-reference/geolocate-control.md @@ -6,9 +6,9 @@ This is a React equivalent of Mapbox's [GeolocateControl](https://www.mapbox.com ```js import * as React from 'react'; -import ReactMapGL, {GeolocateControl} from "react-map-gl"; +import ReactMapGL, {GeolocateControl} from 'react-map-gl'; -const geolocateControlStyle= { +const geolocateControlStyle = { right: 10, top: 10 }; @@ -54,7 +54,7 @@ A Geolocation API [PositionOptions](https://developer.mozilla.org/en-US/docs/Web - default: `{maxZoom: 15}` -A [fitBounds](/docs/api-reference/web-mercator-viewport.md#fitboundsbounds-options-object) 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. +A [fitBounds](/docs/api-reference/web-mercator-viewport.md#fitboundsbounds-options-object) 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) @@ -68,6 +68,12 @@ If true the Geolocate Control becomes a toggle button and when active the map wi 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` @@ -132,7 +138,6 @@ Stop propagation of dblclick event to the map component. Can be used to stop map 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. diff --git a/src/components/geolocate-control.d.ts b/src/components/geolocate-control.d.ts index 7c5d2a4a..2263a60b 100644 --- a/src/components/geolocate-control.d.ts +++ b/src/components/geolocate-control.d.ts @@ -1,19 +1,21 @@ import {ReactElement} from 'react'; import {MapControlProps} from './use-map-control'; -type GeolocateControlProps = MapControlProps & Partial<{ - className: string, - style: Object, - label: string, - auto: boolean, - positionOptions: any, - fitBoundsOptions: any, - trackUserLocation: boolean, - showUserLocation: boolean, - showAccuracyCircle: boolean, - onViewStateChange?: Function, - onViewportChange?: Function, - onGeolocate?: Function -}>; +type GeolocateControlProps = MapControlProps & + Partial<{ + className: string; + style: Object; + label: string; + auto: boolean; + positionOptions: any; + fitBoundsOptions: any; + trackUserLocation: boolean; + showUserLocation: boolean; + showUserHeading: boolean; + showAccuracyCircle: boolean; + onViewStateChange?: Function; + onViewportChange?: Function; + onGeolocate?: Function; + }>; export default function GeolocateControl(props: GeolocateControlProps): ReactElement; diff --git a/src/components/geolocate-control.js b/src/components/geolocate-control.js index dfe61c5c..cda3c557 100644 --- a/src/components/geolocate-control.js +++ b/src/components/geolocate-control.js @@ -30,6 +30,7 @@ const propTypes = Object.assign({}, mapControlPropTypes, { trackUserLocation: PropTypes.bool, showUserLocation: PropTypes.bool, showAccuracyCircle: PropTypes.bool, + showUserHeading: PropTypes.bool, // Callbacks fired when the user interacted with the map. The object passed to the callbacks // contains viewport properties such as `longitude`, `latitude`, `zoom` etc. @@ -50,6 +51,7 @@ const defaultProps = Object.assign({}, mapControlDefaultProps, { fitBoundsOptions: {maxZoom: 15}, trackUserLocation: false, showUserLocation: true, + showUserHeading: false, showAccuracyCircle: true, onGeolocate: () => {}