2470

pending completion

Build # 2470

Build Type

Pull #1116

travis-ci-com

Committed by

web-flow

Commit Message

<a href="https://github.com/visgl/react-map-gl/commit/<a class=hub.com/visgl/react-map-gl/commit/<a class="double-link" href="https://git"><a class=hub.com/visgl/react-map-gl/commit/<a class="double-link" href="https://git"><a class=hub.com/visgl/react-map-gl/commit/<a class="double-link" href="https://git"><a class=hub.com/visgl/react-map-gl/commit/d31c5ee1b669814c5499cf18346dced1d0fcc5c7">d31c5ee1b">&lt;a href=&quot;https://github.com/visgl/react-map-gl/commit/</a><a class="double-link" href="https://github.com/visgl/react-map-gl/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/visgl/react-map-gl/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/visgl/react-map-gl/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/visgl/react-map-gl/commit/d31c5ee1b669814c5499cf18346dced1d0fcc5c7">d31c5ee1b</a><a href="https://github.com/visgl/react-map-gl/commit/d31c5ee1b669814c5499cf18346dced1d0fcc5c7">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/visgl/react-map-gl/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/visgl/react-map-gl/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/visgl/react-map-gl/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/visgl/react-map-gl/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/visgl/react-map-gl/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/visgl/react-map-gl/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/visgl/react-map-gl/commit/d31c5ee1b669814c5499cf18346dced1d0fcc5c7&quot;&gt;d31c5ee1b&lt;/a&gt;&lt;a href=&quot;https://github.com/visgl/react-map-gl/commit/d31c5ee1b669814c5499cf18346dced1d0fcc5c7&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/visgl/react-map-gl/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://... (continued)

Pull Request Pull Request #1116: [Geolocate] Auto trigger when component loads

Run Details

265 of 799 branches covered (33.17%)

Branch coverage included in aggregate %.

5 of 5 new or added lines in 1 file covered. (100.0%)

584 of 1373 relevant lines covered (42.53%)

11.13 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

4.65

/src/components/geolocate-control.js

// @flow

/* global window */
import * as React from 'react';
import {createRef} from 'react';
import PropTypes from 'prop-types';
import WebMercatorViewport from 'viewport-mercator-project';

import mapboxgl from '../utils/mapboxgl';

import BaseControl from './base-control';
import Marker from './marker';
import MapState from '../utils/map-state';
import TransitionManager from '../utils/transition-manager';
import {isGeolocationSupported} from '../utils/geolocate-utils';

import type {BaseControlProps} from './base-control';

const LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {
  transitionDuration: 500
});

const noop = () => {};

const propTypes = Object.assign({}, BaseControl.propTypes, {
  // Custom className
  className: PropTypes.string,
  style: PropTypes.object,
  // Custom label assigned to the control
  label: PropTypes.string,
  // Auto trigger instead of waiting for click
  auto: PropTypes.bool,

  // mapbox geolocate options
  // https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol
  positionOptions: PropTypes.object,
  fitBoundsOptions: PropTypes.object,
  trackUserLocation: PropTypes.bool,
  showUserLocation: 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.
  onViewStateChange: PropTypes.func,
  onViewportChange: PropTypes.func,

  onGeolocate: PropTypes.func
});

const defaultProps = Object.assign({}, BaseControl.defaultProps, {
  className: '',
  style: {},
  label: 'Geolocate',
  auto: false,

  // mapbox geolocate options
  positionOptions: null,
  fitBoundsOptions: null,
  trackUserLocation: false,
  showUserLocation: true,

  onGeolocate: () => {}
});

export type GeolocateControlProps = BaseControlProps & {
  className: string,
  style: Object,
  label: string,
  auto: boolean,
  positionOptions: any,
  fitBoundsOptions: any,
  trackUserLocation: boolean,
  showUserLocation: boolean,
  onViewStateChange?: Function,
  onViewportChange?: Function,
  onGeolocate?: Function
};

type Coordinate = {
  longitude: number,
  latitude: number,
  accuracy: number
};
type Position = {
  coords: Coordinate
};
type State = {
  supportsGeolocation: boolean,
  markerPosition: ?Coordinate
};
type GeolocateControlOptions = {
  positionOptions?: any,
  fitBoundsOptions?: any,
  trackUserLocation?: boolean,
  showUserLocation?: boolean
};

export default class GeolocateControl extends BaseControl<
  GeolocateControlProps,
  State,
  HTMLDivElement
> {
  static propTypes = propTypes;
  static defaultProps = defaultProps;

  state = {
    supportsGeolocation: false,
    markerPosition: null
  };

  _mapboxGeolocateControl: any = null;

  _geolocateButtonRef: {current: null | HTMLButtonElement} = createRef();

  componentDidMount() {
    isGeolocationSupported().then(result => {
      this.setState({supportsGeolocation: result});
      this._setupMapboxGeolocateControl(result);
      if (this.props.auto) {
        this._triggerGeolocate();
      }
    });
  }

  componentDidUpdate(prevProps: GeolocateControlProps) {
    // trigger geolocate when prop auto changes to true
    // change to false has no effect
    if (this.state.supportsGeolocation && !prevProps.auto && this.props.auto) {
      this._triggerGeolocate();
    }
  }

  componentWillUnmount() {
    // re-implement MapboxGeolocateControl's _onRemove
    // clear the geolocation watch if exists
    if (this._mapboxGeolocateControl) {
      const geolocationWatchID = this._mapboxGeolocateControl._geolocationWatchID;
      if (geolocationWatchID !== undefined) {
        window.navigator.geolocation.clearWatch(geolocationWatchID);
        this._mapboxGeolocateControl._geolocationWatchID = undefined;
      }
    }
  }

  _setupMapboxGeolocateControl = (supportsGeolocation: boolean) => {
    if (!supportsGeolocation) {
      /* eslint-disable no-console, no-undef */
      console.warn(
        'Geolocation support is not available, the GeolocateControl will not be visible.'
      );
      /* eslint-enable no-console, no-undef */
      return;
    }

    // For null option, use Mapbox default value
    const controlOptions: GeolocateControlOptions = {
      // disable showUserLocation to avoid Mapbox accessing marker before rendering
      showUserLocation: false
    };
    ['positionOptions', 'fitBoundsOptions', 'trackUserLocation'].forEach(prop => {
      if (prop in this.props && this.props[prop] !== null) {
        controlOptions[prop] = this.props[prop];
      }
    });

    const control = new mapboxgl.GeolocateControl(controlOptions);
    this._mapboxGeolocateControl = control;

    // the following re-implement MapboxGeolocateControl's _setupUI
    // replace mapbox internal prop
    control._watchState = 'OFF';

    // replace mapbox internal UI elements
    control._geolocateButton = this._geolocateButtonRef.current;
    if (control.options.trackUserLocation && control._geolocateButton) {
      control._geolocateButton.setAttribute('aria-pressed', 'false');
    }

    // replace mapbox internal methods
    control._updateMarker = this._updateMarker;
    control._updateCamera = this._updateCamera;

    control._setup = true;

    // when the camera is changed (and it's not as a result of the Geolocation Control) change
    // the watch mode to background watch, so that the marker is updated but not the camera.
    const {eventManager} = this._context;
    if (control.options.trackUserLocation && eventManager) {
      eventManager.on('panstart', () => {
        if (control._watchState === 'ACTIVE_LOCK') {
          control._watchState = 'BACKGROUND';
          control._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background');
          control._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');
        }
      });
    }

    control.on('geolocate', this.props.onGeolocate);
  };

  _triggerGeolocate = () => {
    const control = this._mapboxGeolocateControl;
    control._map = this._context.map;

    if (this.props.showUserLocation) {
      control.on('geolocate', this._updateMarker);
      control.on('trackuserlocationend', this._updateMarker);
    }

    return this._mapboxGeolocateControl.trigger();
  };

  _updateMarker = (position: Position) => {
    if (position) {
      this.setState({markerPosition: position.coords});
    }
  };

  _getBounds = (position: Position) => {
    const center = new mapboxgl.LngLat(position.coords.longitude, position.coords.latitude);
    const radius = position.coords.accuracy;
    const bounds = center.toBounds(radius);

    return [[bounds._ne.lng, bounds._ne.lat], [bounds._sw.lng, bounds._sw.lat]];
  };

  _updateCamera = (position: Position) => {
    const {viewport} = this._context;

    const bounds = this._getBounds(position);
    const {longitude, latitude, zoom} = new WebMercatorViewport(viewport).fitBounds(bounds);

    const newViewState = Object.assign({}, viewport, {
      longitude,
      latitude,
      zoom
    });
    const mapState = new MapState(newViewState);
    const viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);

    const onViewportChange = this.props.onViewportChange || this._context.onViewportChange || noop;
    const onViewStateChange =
      this.props.onViewStateChange || this._context.onViewStateChange || noop;

    // Call new style callback
    onViewStateChange({viewState});

    // Call old style callback
    onViewportChange(viewState);
  };

  _renderButton = (type: string, label: string, callback: Function) => {
    return (
      <button
        key={type}
        className={`mapboxgl-ctrl-icon mapboxgl-ctrl-${type}`}
        ref={this._geolocateButtonRef}
        type="button"
        title={label}
        onClick={callback}
      >
        <span className="mapboxgl-ctrl-icon" aria-hidden="true" />
      </button>
    );
  };

  _renderMarker = () => {
    const {markerPosition} = this.state;
    const {showUserLocation} = this.props;
    if (!markerPosition || !showUserLocation) {
      return null;
    }

    return (
      // $FlowFixMe
      <Marker
        key="location-maker"
        className="mapboxgl-user-location-dot"
        longitude={markerPosition.longitude}
        latitude={markerPosition.latitude}
        onContextMenu={e => e.preventDefault()}
        captureDrag={false}
        captureDoubleClick={false}
      />
    );
  };

  _render() {
    if (!this.state.supportsGeolocation) {
      return null;
    }

    const {className, style, label} = this.props;
    return (
      <div>
        {this._renderMarker()}
        <div
          key="geolocate-control"
          className={`mapboxgl-ctrl mapboxgl-ctrl-group ${className}`}
          ref={this._containerRef}
          style={style}
          onContextMenu={e => e.preventDefault()}
        >
          {this._renderButton('geolocate', label, this._triggerGeolocate)}
        </div>
      </div>
    );
  }
}

1	// @flow
2
3	/* global window */
4	import * as React from 'react';
5	import {createRef} from 'react';
6	import PropTypes from 'prop-types';
7	import WebMercatorViewport from 'viewport-mercator-project';
8
9	import mapboxgl from '../utils/mapboxgl';
10
11	import BaseControl from './base-control';
12	import Marker from './marker';
13	import MapState from '../utils/map-state';
14	import TransitionManager from '../utils/transition-manager';
15	import {isGeolocationSupported} from '../utils/geolocate-utils';
16
17	import type {BaseControlProps} from './base-control';
18
19	const LINEAR_TRANSITION_PROPS = Object.assign({}, TransitionManager.defaultProps, {	1✔
20	transitionDuration: 500
21	});
22
23	const noop = () => {};	1✔
24
25	const propTypes = Object.assign({}, BaseControl.propTypes, {	1✔
26	// Custom className
27	className: PropTypes.string,
28	style: PropTypes.object,
29	// Custom label assigned to the control
30	label: PropTypes.string,
31	// Auto trigger instead of waiting for click
32	auto: PropTypes.bool,
33
34	// mapbox geolocate options
35	// https://docs.mapbox.com/mapbox-gl-js/api/#geolocatecontrol
36	positionOptions: PropTypes.object,
37	fitBoundsOptions: PropTypes.object,
38	trackUserLocation: PropTypes.bool,
39	showUserLocation: PropTypes.bool,
40
41	// Callbacks fired when the user interacted with the map. The object passed to the callbacks
42	// contains viewport properties such as `longitude`, `latitude`, `zoom` etc.
43	onViewStateChange: PropTypes.func,
44	onViewportChange: PropTypes.func,
45
46	onGeolocate: PropTypes.func
47	});
48
49	const defaultProps = Object.assign({}, BaseControl.defaultProps, {	1✔
50	className: '',
51	style: {},
52	label: 'Geolocate',
53	auto: false,
54
55	// mapbox geolocate options
56	positionOptions: null,
57	fitBoundsOptions: null,
58	trackUserLocation: false,
59	showUserLocation: true,
60
61	onGeolocate: () => {}
62	});
63
64	export type GeolocateControlProps = BaseControlProps & {
65	className: string,
66	style: Object,
67	label: string,
68	auto: boolean,
69	positionOptions: any,
70	fitBoundsOptions: any,
71	trackUserLocation: boolean,
72	showUserLocation: boolean,
73	onViewStateChange?: Function,
74	onViewportChange?: Function,
75	onGeolocate?: Function
76	};
77
78	type Coordinate = {
79	longitude: number,
80	latitude: number,
81	accuracy: number
82	};
83	type Position = {
84	coords: Coordinate
85	};
86	type State = {
87	supportsGeolocation: boolean,
88	markerPosition: ?Coordinate
89	};
90	type GeolocateControlOptions = {
91	positionOptions?: any,
92	fitBoundsOptions?: any,
93	trackUserLocation?: boolean,
94	showUserLocation?: boolean
95	};
96
97	export default class GeolocateControl extends BaseControl<
98	GeolocateControlProps,
99	State,
100	HTMLDivElement
101	> {
102	static propTypes = propTypes;	1✔
103	static defaultProps = defaultProps;	1✔
104
105	state = {	×
106	supportsGeolocation: false,
107	markerPosition: null
108	};
109
110	_mapboxGeolocateControl: any = null;	×
111
112	_geolocateButtonRef: {current: null \| HTMLButtonElement} = createRef();	×
113
114	componentDidMount() {
115	isGeolocationSupported().then(result => {	×
116	this.setState({supportsGeolocation: result});	×
117	this._setupMapboxGeolocateControl(result);	×
118	if (this.props.auto) {	×
119	this._triggerGeolocate();	×
120	}
121	});
122	}
123
124	componentDidUpdate(prevProps: GeolocateControlProps) {
125	// trigger geolocate when prop auto changes to true
126	// change to false has no effect
127	if (this.state.supportsGeolocation && !prevProps.auto && this.props.auto) {	×
128	this._triggerGeolocate();	×
129	}
130	}
131
132	componentWillUnmount() {
133	// re-implement MapboxGeolocateControl's _onRemove
134	// clear the geolocation watch if exists
135	if (this._mapboxGeolocateControl) {	×
136	const geolocationWatchID = this._mapboxGeolocateControl._geolocationWatchID;	×
137	if (geolocationWatchID !== undefined) {	×
138	window.navigator.geolocation.clearWatch(geolocationWatchID);	×
139	this._mapboxGeolocateControl._geolocationWatchID = undefined;	×
140	}
141	}
142	}
143
144	_setupMapboxGeolocateControl = (supportsGeolocation: boolean) => {	×
145	if (!supportsGeolocation) {	×
146	/* eslint-disable no-console, no-undef */
147	console.warn(	×
148	'Geolocation support is not available, the GeolocateControl will not be visible.'
149	);
150	/* eslint-enable no-console, no-undef */
151	return;	×
152	}
153
154	// For null option, use Mapbox default value
155	const controlOptions: GeolocateControlOptions = {	×
156	// disable showUserLocation to avoid Mapbox accessing marker before rendering
157	showUserLocation: false
158	};
159	['positionOptions', 'fitBoundsOptions', 'trackUserLocation'].forEach(prop => {	×
160	if (prop in this.props && this.props[prop] !== null) {	×
161	controlOptions[prop] = this.props[prop];	×
162	}
163	});
164
165	const control = new mapboxgl.GeolocateControl(controlOptions);	×
166	this._mapboxGeolocateControl = control;	×
167
168	// the following re-implement MapboxGeolocateControl's _setupUI
169	// replace mapbox internal prop
170	control._watchState = 'OFF';	×
171
172	// replace mapbox internal UI elements
173	control._geolocateButton = this._geolocateButtonRef.current;	×
174	if (control.options.trackUserLocation && control._geolocateButton) {	×
175	control._geolocateButton.setAttribute('aria-pressed', 'false');	×
176	}
177
178	// replace mapbox internal methods
179	control._updateMarker = this._updateMarker;	×
180	control._updateCamera = this._updateCamera;	×
181
182	control._setup = true;	×
183
184	// when the camera is changed (and it's not as a result of the Geolocation Control) change
185	// the watch mode to background watch, so that the marker is updated but not the camera.
186	const {eventManager} = this._context;	×
187	if (control.options.trackUserLocation && eventManager) {	×
188	eventManager.on('panstart', () => {	×
189	if (control._watchState === 'ACTIVE_LOCK') {	×
190	control._watchState = 'BACKGROUND';	×
191	control._geolocateButton.classList.add('mapboxgl-ctrl-geolocate-background');	×
192	control._geolocateButton.classList.remove('mapboxgl-ctrl-geolocate-active');	×
193	}
194	});
195	}
196
197	control.on('geolocate', this.props.onGeolocate);	×
198	};
199
200	_triggerGeolocate = () => {	×
201	const control = this._mapboxGeolocateControl;	×
202	control._map = this._context.map;	×
203
204	if (this.props.showUserLocation) {	×
205	control.on('geolocate', this._updateMarker);	×
206	control.on('trackuserlocationend', this._updateMarker);	×
207	}
208
209	return this._mapboxGeolocateControl.trigger();	×
210	};
211
212	_updateMarker = (position: Position) => {	×
213	if (position) {	×
214	this.setState({markerPosition: position.coords});	×
215	}
216	};
217
218	_getBounds = (position: Position) => {	×
219	const center = new mapboxgl.LngLat(position.coords.longitude, position.coords.latitude);	×
220	const radius = position.coords.accuracy;	×
221	const bounds = center.toBounds(radius);	×
222
223	return [[bounds._ne.lng, bounds._ne.lat], [bounds._sw.lng, bounds._sw.lat]];	×
224	};
225
226	_updateCamera = (position: Position) => {	×
227	const {viewport} = this._context;	×
228
229	const bounds = this._getBounds(position);	×
230	const {longitude, latitude, zoom} = new WebMercatorViewport(viewport).fitBounds(bounds);	×
231
232	const newViewState = Object.assign({}, viewport, {	×
233	longitude,
234	latitude,
235	zoom
236	});
237	const mapState = new MapState(newViewState);	×
238	const viewState = Object.assign({}, mapState.getViewportProps(), LINEAR_TRANSITION_PROPS);	×
239
240	const onViewportChange = this.props.onViewportChange \|\| this._context.onViewportChange \|\| noop;	×
241	const onViewStateChange =
242	this.props.onViewStateChange \|\| this._context.onViewStateChange \|\| noop;	×
243
244	// Call new style callback
245	onViewStateChange({viewState});	×
246
247	// Call old style callback
248	onViewportChange(viewState);	×
249	};
250
251	_renderButton = (type: string, label: string, callback: Function) => {	×
252	return (	×
253	<button
254	key={type}
255	className={`mapboxgl-ctrl-icon mapboxgl-ctrl-${type}`}
256	ref={this._geolocateButtonRef}
257	type="button"
258	title={label}
259	onClick={callback}
260	>
261	<span className="mapboxgl-ctrl-icon" aria-hidden="true" />
262	</button>
263	);
264	};
265
266	_renderMarker = () => {	×
267	const {markerPosition} = this.state;	×
268	const {showUserLocation} = this.props;	×
269	if (!markerPosition \|\| !showUserLocation) {	×
270	return null;	×
271	}
272
273	return (	×
274	// $FlowFixMe
275	<Marker
276	key="location-maker"
277	className="mapboxgl-user-location-dot"
278	longitude={markerPosition.longitude}
279	latitude={markerPosition.latitude}
280	onContextMenu={e => e.preventDefault()}	×
281	captureDrag={false}
282	captureDoubleClick={false}
283	/>
284	);
285	};
286
287	_render() {
288	if (!this.state.supportsGeolocation) {	×
289	return null;	×
290	}
291
292	const {className, style, label} = this.props;	×
293	return (	×
294	<div>
295	{this._renderMarker()}
296	<div
297	key="geolocate-control"
298	className={`mapboxgl-ctrl mapboxgl-ctrl-group ${className}`}
299	ref={this._containerRef}
300	style={style}
301	onContextMenu={e => e.preventDefault()}	×
302	>
303	{this._renderButton('geolocate', label, this._triggerGeolocate)}
304	</div>
305	</div>
306	);
307	}
308	}

visgl / react-map-gl / 2470

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous