Version 4 changes

CHANGELOG.md

@@ -1,3 +1,28 @@
+## Master
+
+### Breaking Changes ⚠️
+- Support for the Mapbox GL JS 0.47.0 API. This is compatible with 0.47.0 and later, and may not be compatible with earlier versions [#219](https://github.com/mapbox/mapbox-gl-geocoder/pull/219).
+- Obtain language from user's browser settings [#195](https://github.com/mapbox/mapbox-gl-geocoder/issues/195)
+- Localize placeholder based on language set in constructor options [#150](https://github.com/mapbox/mapbox-gl-geocoder/issues/150)
+- `trackProximity` turned on by default [#195](https://github.com/mapbox/mapbox-gl-geocoder/issues/195)
+
+### Features / Improvements 🚀
+- Mapbox events upgraded to v0.2.0 for better handling [#212](https://github.com/mapbox/mapbox-gl-geocoder/pull/212)
+- Pass `flyTo` options to the map on result selection on both map#flyTo and map#fitBounds operations [#214](https://github.com/mapbox/mapbox-gl-geocoder/pull/214)  and [#227](https://github.com/mapbox/mapbox-gl-geocoder/pull/227)
+- Bump `suggestions` dependency to v1.4.x
+- Adds the `marker` constructor option that allows adding the selected result to the map as a [marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker). Adding the marker to the map is now the default behavior. [#219](https://github.com/mapbox/mapbox-gl-geocoder/pull/219). 
+- Add `get` and `set` methods for constructor options [#226](https://github.com/mapbox/mapbox-gl-geocoder/pull/226)
+- Add `collapsed` option to collapse the geocoder controller into a button until hovered or focused [#222](https://github.com/mapbox/mapbox-gl-geocoder/issues/222)
+- Expose `clear` as public method [#115](https://github.com/mapbox/mapbox-gl-geocoder/issues/115)
+
+### Bug Fixes 🐛
+- Upgrade dev dependencies [#216](https://github.com/mapbox/mapbox-gl-geocoder/pull/216)
+- Remove hardcoded IDs in bounding box exception list [#217](https://github.com/mapbox/mapbox-gl-geocoder/pull/217)
+- Fix double map `moveend` event [#229](https://github.com/mapbox/mapbox-gl-geocoder/pull/229)
+- Fix duplicate `result` event bug [#218](https://github.com/mapbox/mapbox-gl-geocoder/pull/218)
+- Fix trapped focus bug [#220](https://github.com/mapbox/mapbox-gl-geocoder/issues/220)
+
+
 ## v3.1.6
 -  Resolve npm publish failure
 

debug/index.js

@@ -38,8 +38,8 @@ var coordinatesGeocoder = function(query) {
     return null;
   }
   function coordinateFeature(lng, lat) {
-    var lng = Number(lng);
-    var lat = Number(lat);
+    lng = Number(lng);
+    lat = Number(lat);
     return {
       center: [lng, lat],
       geometry: {
@@ -76,7 +76,8 @@ var geocoder = new MapboxGeocoder({
   trackProximity: true,
   localGeocoder: function(query) {
     return coordinatesGeocoder(query);
-  }
+  },
+  mapboxgl: mapboxgl
 });
 
 window.geocoder = geocoder;

lib/events.js

@@ -5,15 +5,22 @@ var nanoid = require('nanoid')
  * Construct a new mapbox event client to send interaction events to the mapbox event service
  * @param {Object} options options with which to create the service
  * @param {String} options.accessToken the mapbox access token to make requests
+ * @param {Number} [options.flushInterval=1000] the number of ms after which to flush the event queue
+ * @param {Number} [options.maxQueueSize=100] the number of events to queue before flushing
  * @private
  */
 function MapboxEventManager(options) {
   this.origin = options.origin || 'https://api.mapbox.com';
-  this.endpoint = '/events/v2';
+  this.endpoint = 'events/v2';
   this.access_token = options.accessToken;
-  this.version = '0.0.1'
+  this.version = '0.2.0'
   this.sessionID = this.generateSessionID();
   this.userAgent = this.getUserAgent();
+
+  this.options = options;
+  this.send = this.send.bind(this);
+
+
   // parse global options to be sent with each request
   this.countries = (options.countries) ? options.countries.split(",") : null;
   this.types = (options.types) ? options.types.split(",") : null;
@@ -22,47 +29,71 @@ function MapboxEventManager(options) {
   this.limit = (options.limit) ? +options.limit : null;
   this.locale = navigator.language || null;
   this.enableEventLogging = this.shouldEnableLogging(options);
+  this.eventQueue = new Array();
+  this.flushInterval = options.flushInterval || 1000;
+  this.maxQueueSize = options.maxQueueSize || 100;
+  this.timer = (this.flushInterval) ? setTimeout(this.flush.bind(this), this.flushInterval) : null;
   // keep some state to deduplicate requests if necessary
   this.lastSentInput = "";
   this.lastSentIndex = 0;
 }
 
 MapboxEventManager.prototype = {
-
   /**
-   * Send a search.select event to the mapbox events service
-   * This event marks the array index of the item selected by the user out of the array of possible options
-   * @private
-   * @param {Object} selected the geojson feature selected by the user
-   * @param {Object} geocoder a mapbox-gl-geocoder instance
-   * @param {Function} callback a callback function to invoke once the event has been sent (optional)
-   * @returns {Promise}
-   */
-  select: function (selected, geocoder, callback) {
+     * Send a search.select event to the mapbox events service
+     * This event marks the array index of the item selected by the user out of the array of possible options
+     * @private
+     * @param {Object} selected the geojson feature selected by the user
+     * @param {Object} geocoder a mapbox-gl-geocoder instance
+     * @returns {Promise}
+     */
+  select: function(selected, geocoder){
     var resultIndex = this.getSelectedIndex(selected, geocoder);
     var payload = this.getEventPayload('search.select', geocoder);
     payload.resultIndex = resultIndex;
+    payload.resultPlaceName  = selected.place_name;
+    payload.resultId = selected.id;
     if ((resultIndex === this.lastSentIndex && payload.queryString === this.lastSentInput) || resultIndex == -1) {
       // don't log duplicate events if the user re-selected the same feature on the same search
-      if (callback) return callback();
-      else return;
+      return;
     }
     this.lastSentIndex = resultIndex;
     this.lastSentInput = payload.queryString;
-    return this.send(payload, callback)
+    if (!payload.queryString) return; // will be rejected
+    return this.push(payload)
   },
 
   /**
-   * Send a search-start event to the mapbox events service
-   * This turnstile event marks when a user starts a new search
+     * Send a search-start event to the mapbox events service
+     * This turnstile event marks when a user starts a new search
+     * @private
+     * @param {Object} geocoder a mapbox-gl-geocoder instance
+     * @returns {Promise}
+     */
+  start: function(geocoder){
+    var payload = this.getEventPayload('search.start', geocoder);
+    if (!payload.queryString) return; // will be rejected
+    return this.push(payload);
+  },
+
+  /**
+   * Send a search-keyevent event to the mapbox events service
+   * This event records each keypress in sequence
    * @private
-   * @param {Object} geocoder a mapbox-gl-geocoder instance
-   * @param {Function} callback
-   * @returns {Promise}
+   * @param {Object} keyEvent the keydown event to log
+   * @param {Obeject} geocoder a mapbox-gl-geocoder instance
+   * 
    */
-  start: function (geocoder, callback) {
-    var payload = this.getEventPayload('search.start', geocoder);
-    return this.send(payload, callback);
+  keyevent: function(keyEvent, geocoder){
+    //pass invalid event
+    if (!keyEvent.key) return;
+    // don't send events for keys that don't change the input
+    // TAB, ESC, LEFT, RIGHT, ENTER, UP, DOWN
+    if (keyEvent.metaKey || [9, 27, 37, 39, 13, 38, 40].indexOf(keyEvent.keyCode) !== -1) return;
+    var payload = this.getEventPayload('search.keystroke', geocoder);
+    payload.lastAction = keyEvent.key;
+    if (!payload.queryString) return; // will be rejected
+    return this.push(payload);
   },
 
   /**
@@ -72,27 +103,29 @@ MapboxEventManager.prototype = {
    *
    * @private
    * @param {Object} payload the http POST body of the event
+   * @param {Function} [callback] a callback function to invoke when the send has completed
    * @returns {Promise}
    */
   send: function (payload, callback) {
-    if (!callback) callback = function () {
-      return
-    };
     if (!this.enableEventLogging) {
-      return callback();
+      if (callback) return callback();
+      return;
     }
     var options = this.getRequestOptions(payload);
-    this.request(options, function (err) {
+    this.request(options, function(err){
       if (err) return this.handleError(err, callback);
-      if (callback) return callback();
-    })
+      if (callback) {
+        return callback();
+      }
+    }.bind(this))
   },
   /**
    * Get http request options
    * @private
    * @param {*} payload
    */
-  getRequestOptions: function (payload) {
+  getRequestOptions: function(payload){
+    if (!Array.isArray(payload)) payload = [payload];
     var options = {
       // events must be sent with POST
       method: "POST",
@@ -101,7 +134,7 @@ MapboxEventManager.prototype = {
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify([payload]) //events are arrays
+      body:JSON.stringify(payload) //events are arrays
     }
     return options
   },
@@ -134,7 +167,7 @@ MapboxEventManager.prototype = {
       proximity: proximity,
       limit: geocoder.options.limit,
       // routing: search.routing, //todo --> add to plugin
-      queryString: geocoder.inputString,
+      queryString: (geocoder._inputEl) ? geocoder._inputEl.value : geocoder.inputString,
       mapZoom: zoom,
       keyboardLocale: this.locale
     }
@@ -159,7 +192,8 @@ MapboxEventManager.prototype = {
         }
       }
     };
-    xhttp.open(opts.method, opts.host + opts.path, true);
+
+    xhttp.open(opts.method, opts.host + '/' + opts.path, true);
     for (var header in opts.headers){
       var headerValue = opts.headers[header];
       xhttp.setRequestHeader(header, headerValue)
@@ -194,13 +228,14 @@ MapboxEventManager.prototype = {
   },
 
   /**
-   * Get the 0-based numeric index of the item that the user selected out of the list of options
-   * @private
-   * @param {Object} selected the geojson feature selected by the user
-   * @param {Object} geocoder a Mapbox-GL-Geocoder instance
-   * @returns {Number} the index of the selected result
-   */
-  getSelectedIndex: function (selected, geocoder) {
+     * Get the 0-based numeric index of the item that the user selected out of the list of options
+     * @private
+     * @param {Object} selected the geojson feature selected by the user
+     * @param {Object} geocoder a Mapbox-GL-Geocoder instance
+     * @returns {Number} the index of the selected result
+     */
+  getSelectedIndex: function(selected, geocoder){
+    if (!geocoder._typeahead) return;
     var results = geocoder._typeahead.data;
     var selectedID = selected.id;
     var resultIDs = results.map(function (feature) {
@@ -211,17 +246,53 @@ MapboxEventManager.prototype = {
   },
 
   /**
-   * Check whether events should be logged
-   * Clients using a localGeocoder or an origin other than mapbox should not have events logged
-   * @private
-   */
-  shouldEnableLogging: function (options) {
-    if (this.origin.indexOf('api.mapbox.com')  == -1) return false;
+     * Check whether events should be logged
+     * Clients using a localGeocoder or an origin other than mapbox should not have events logged
+     * @private
+     */
+  shouldEnableLogging: function(options){
+    if (options.enableEventLogging === false) return false;
+    if (options.origin && options.origin.indexOf('api.mapbox.com') == -1) return false;
     // hard to make sense of events when a local instance is suplementing results from origin
     if (options.localGeocoder) return false;
     // hard to make sense of events when a custom filter is in use
     if (options.filter) return false;
     return true;
+  },
+
+  /**
+   * Flush out the event queue by sending events to the events service
+   * @private
+   */
+  flush: function(){
+    if (this.eventQueue.length > 0){
+      this.send(this.eventQueue);
+      this.eventQueue = new Array();
+    }
+    // //reset the timer
+    if (this.timer)  clearTimeout(this.timer);
+    if (this.flushInterval) this.timer = setTimeout(this.flush.bind(this), this.flushInterval)
+  },
+
+  /**
+   * Push event into the pending queue
+   * @param {Object} evt the event to send to the events service
+   * @param {Boolean} forceFlush indicates that the event queue should be flushed after adding this event regardless of size of the queue
+   * @private
+   */
+  push: function(evt, forceFlush){
+    this.eventQueue.push(evt);
+    if (this.eventQueue.length >= this.maxQueueSize || forceFlush){
+      this.flush();
+    }
+  },
+
+  /**
+   * Flush any remaining events from the queue before it is removed
+   * @private
+   */
+  remove: function(){
+    this.flush();
   }
 }
 

lib/exceptions.js

@@ -1,17 +1,17 @@
 module.exports = {
-  'country.3148': {
+  'fr': {
     'name': 'France',
     'bbox': [[-4.59235, 41.380007], [9.560016, 51.148506]]
   },
-  'country.3145': {
+  'us': {
     'name': 'United States',
     'bbox': [[-171.791111, 18.91619], [-66.96466, 71.357764]]
   },
-  'country.330': {
+  'ru': {
     'name': 'Russia',
     'bbox': [[19.66064, 41.151416], [190.10042, 81.2504]]
   },
-  'country.3179': {
+  'ca': {
     'name': 'Canada',
     'bbox': [[-140.99778, 41.675105], [-52.648099, 83.23324]]
   }