Handle proximity for event logging; fix geolocate button

Author: mpothier

CHANGELOG.md

@@ -9,7 +9,7 @@
 
 - Enables use of the value `'ip'` for `proximity` to bias around a user's location [#453](https://github.com/mapbox/mapbox-gl-geocoder/pull/453)
 - Adds `setAccessToken` method to update the accessToken after the Geocoder has been initialized [#449](https://github.com/mapbox/mapbox-gl-geocoder/pull/449)
-- Added geolocate functionality [#444](https://github.com/mapbox/mapbox-gl-geocoder/pull/444)
+- Added geolocate functionality to find user's location via the Browser API [#444](https://github.com/mapbox/mapbox-gl-geocoder/pull/444)
 - Upgraded system font stack to include Apple fonts. This is used for text if Open Sans is not available [#438](https://github.com/mapbox/mapbox-gl-geocoder/pull/438)
 - Adds `flipCoordinates` boolean option to support `lon,lat` coordinate order for reverse geocodes [#435](https://github.com/mapbox/mapbox-gl-geocoder/pull/435)
 

lib/events.js

@@ -149,9 +149,17 @@ MapboxEventManager.prototype = {
  * @returns {Object} an event payload
  */
  getEventPayload: function (event, geocoder) {
+ // Handle proximity, whether null, lat/lng coordinate object, or 'ip'
  var proximity;
- if (!geocoder.options.proximity) proximity = null;
- else proximity = [geocoder.options.proximity.longitude, geocoder.options.proximity.latitude];
+ if (!geocoder.options.proximity) {
+ proximity = null;
+ } else if (typeof geocoder.options.proximity === 'object') {
+ proximity = [geocoder.options.proximity.longitude, geocoder.options.proximity.latitude];
+ } else if (geocoder.options.proximity === 'ip') {
+ proximity = [999,999]; // Alias for 'ip' in event logs
+ } else {
+ proximity = geocoder.options.proximity;
+ }
 
  var zoom = (geocoder._map) ? geocoder._map.getZoom() : undefined;
  var payload = {

lib/index.js

@@ -262,9 +262,15 @@ MapboxGeocoder.prototype = {
  el.appendChild(actions);
 
  if (this.options.enableGeolocation && this.geolocation.isSupport()) {
- this._geolocateEl = this.createIcon('geolocate', '<path d="M12.999 3.677L2.042 8.269c-.962.403-.747 1.823.29 1.912l5.032.431.431 5.033c.089 1.037 1.509 1.252 1.912.29l4.592-10.957c.345-.822-.477-1.644-1.299-1.299z" fill="#4264fb"/>');
- actions.appendChild(this._geolocateEl);
+ this._geolocateEl = document.createElement('button');
+ this._geolocateEl.setAttribute('aria-label', 'Geolocate');
  this._geolocateEl.addEventListener('click', this._geolocateUser);
+ this._geolocateEl.className = 'mapboxgl-ctrl-geocoder--button';
+
+ var geolocateIcon = this.createIcon('geolocate', '<path d="M12.999 3.677L2.042 8.269c-.962.403-.747 1.823.29 1.912l5.032.431.431 5.033c.089 1.037 1.509 1.252 1.912.29l4.592-10.957c.345-.822-.477-1.644-1.299-1.299z" fill="#4264fb"/>');
+ this._geolocateEl.appendChild(geolocateIcon);
+
+ actions.appendChild(this._geolocateEl);
  this._showGeolocateButton();
  }