Add showUserHeading to GeolocateControl (#1580)

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.

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;

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: () => {}