Merge pull request #434 from mapbox/parameter-updates

Added autocomplete, fuzzyMatch, routing, worldview parameters

Author: mpothier

API.md

@@ -1,5 +1,10 @@
 ## master
 
+### Features / Improvements 🚀
+
+- Adds support for `autocomplete`, `fuzzyMatch`, `routing`, and `worldview` parameters
+- Bumps `mapbox-sd-js` to v0.13.2 to support `fuzzyMatch` and `worldview` parameters
+
 ## 4.7.3
 
 ### Dependency update

CHANGELOG.md

@@ -164,10 +164,12 @@ MapboxEventManager.prototype = {
       bbox: this.bbox,
       types: this.types,
       endpoint: 'mapbox.places',
-      // fuzzyMatch: search.fuzzy, //todo  --> add to plugin
+      autocomplete: geocoder.options.autocomplete,
+      fuzzyMatch: geocoder.options.fuzzyMatch,
       proximity: proximity,
       limit: geocoder.options.limit,
-      // routing: search.routing, //todo --> add to plugin
+      routing: geocoder.options.routing,
+      worldview: geocoder.options.worldview,
       mapZoom: zoom,
       keyboardLocale: this.locale
     }

lib/events.js

@@ -59,6 +59,10 @@ const GEOCODE_REQUEST_TYPE = {
  * @param {Function} [options.getItemValue] A function that specifies how the selected result should be rendered in the search bar. This function should accept a single [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) object as input and return a string. HTML tags in the output string will not be rendered. Defaults to `(item) => item.place_name`.
  * @param {String} [options.mode=mapbox.places] A string specifying the geocoding [endpoint](https://docs.mapbox.com/api/search/#endpoints) to query. Options are `mapbox.places` and `mapbox.places-permanent`. The `mapbox.places-permanent` mode requires an enterprise license for permanent geocodes.
  * @param {Boolean} [options.localGeocoderOnly=false] If `true`, indicates that the `localGeocoder` results should be the only ones returned to the user. If `false`, indicates that the `localGeocoder` results should be combined with those from the Mapbox API with the `localGeocoder` results ranked higher.
+ * @param {Boolean} [options.autocomplete=true] Specify whether to return autocomplete results or not. When autocomplete is enabled, results will be included that start with the requested string, rather than just responses that match it exactly.
+ * @param {Boolean} [options.fuzzyMatch=true] Specify whether the Geocoding API should attempt approximate, as well as exact, matching when performing searches, or whether it should opt out of this behavior and only attempt exact matching.
+ * @param {Boolean} [options.routing=false] Specify whether to request additional metadata about the recommended navigation destination corresponding to the feature or not. Only applicable for address features.
+ * @param {String} [options.worldview="us"] Filter results to geographic features whose characteristics are defined differently by audiences belonging to various regional, cultural, or political groups.
  * @example
  * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
  * map.addControl(geocoder);
@@ -431,13 +435,18 @@ MapboxGeocoder.prototype = {
       'types',
       'language',
       'reverseMode',
-      'mode'
+      'mode',
+      'autocomplete',
+      'fuzzyMatch',
+      'routing',
+      'worldview'
     ];
     const spacesOrCommaRgx = /[\s,]+/;
 
     var self = this;
     var config = keys.reduce(function(config, key) {
-      if (!self.options[key]) {
+      // don't include undefined/null params, but allow boolean, among other, values
+      if (self.options[key] === undefined || self.options[key] === null) {
         return config;
       }
 
@@ -472,11 +481,13 @@ MapboxGeocoder.prototype = {
       config.types ? [config.types[0]] : ["poi"];
       config = extend(config, { query: coords, limit: 1 });
 
-      // drop proximity which may have been set by trackProximity
-      // since it's not supported by the reverseGeocoder
-      if ('proximity' in config) {
-        delete config.proximity;
-      }
+      // Remove config options not supported by the reverseGeocoder
+      
+      ['proximity', 'autocomplete', 'fuzzyMatch', 'bbox'].forEach(function(key) {
+        if (key in config) {
+          delete config[key]
+        }
+      });
     } break;
     case GEOCODE_REQUEST_TYPE.FORWARD: {
       // Ensure that any reverse geocoding looking request is cleaned up
@@ -1006,6 +1017,78 @@ MapboxGeocoder.prototype = {
     return this.options.origin;
   },
 
+  /**
+   * Set the autocomplete option used for geocoding requests
+   * @param {Boolean} value The boolean value to set autocomplete to
+   * @returns 
+   */
+  setAutocomplete: function(value){
+    this.options.autocomplete = value;
+    return this;
+  },
+
+  /**
+   * Get the current autocomplete parameter value used for requests
+   * @returns {Boolean} The autocomplete parameter value
+   */
+  getAutocomplete: function(){
+    return this.options.autocomplete
+  },
+
+  /**
+   * Set the fuzzyMatch option used for approximate matching in geocoding requests
+   * @param {Boolean} value The boolean value to set fuzzyMatch to
+   * @returns 
+   */
+  setFuzzyMatch: function(value){
+    this.options.fuzzyMatch = value;
+    return this;
+  },
+
+  /**
+   * Get the current fuzzyMatch parameter value used for requests
+   * @returns {Boolean} The fuzzyMatch parameter value
+   */
+  getFuzzyMatch: function(){
+    return this.options.fuzzyMatch
+  },
+
+  /**
+   * Set the routing parameter used to ask for routable point metadata in geocoding requests
+   * @param {Boolean} value The boolean value to set routing to
+   * @returns 
+   */
+  setRouting: function(value){
+    this.options.routing = value;
+    return this;
+  },
+
+  /**
+   * Get the current routing parameter value used for requests
+   * @returns {Boolean} The routing parameter value
+   */
+  getRouting: function(){
+    return this.options.routing
+  },
+
+  /**
+   * Set the worldview parameter
+   * @param {String} code The country code representing the worldview (e.g. "us" | "cn" | "jp", "in")
+   * @returns 
+   */
+  setWorldview: function(code){
+    this.options.worldview = code;
+    return this;
+  },
+
+  /**
+   * Get the current worldview parameter value used for requests
+   * @returns {String} The worldview parameter value
+   */
+  getWorldview: function(){
+    return this.options.worldview
+  },
+
   /**
    * Handle the placement of a result marking the selected result
    * @private

lib/index.js

@@ -59,7 +59,7 @@
     "mapbox-gl": ">= 0.47.0 < 3.0.0"
   },
   "dependencies": {
-    "@mapbox/mapbox-sdk": "^0.13.1",
+    "@mapbox/mapbox-sdk": "^0.13.2",
     "lodash.debounce": "^4.0.6",
     "nanoid": "^2.0.1",
     "subtag": "^0.5.0",

package-lock.json

@@ -18,6 +18,7 @@ test('geocoder', function(tt) {
   function setup(opts) {
     opts = opts || {};
     opts.accessToken = mapboxgl.accessToken;
+    opts.mapboxgl = opts.mapboxgl || mapboxgl; // set default to prevent warnings littering the test logs
     opts.enableEventLogging = false;
     container = document.createElement('div');
     map = new mapboxgl.Map({ container: container });
@@ -970,6 +971,116 @@ test('geocoder', function(tt) {
     t.end();
   });
 
+  tt.test('geocoder#autocomplete default results', function(t) {
+    t.plan(1)
+    setup();
+    geocoder.query('India');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features.some(feature => feature.place_name.indexOf('Indiana') !== -1 ), 'autocomplete is enabled in default responses');
+    }));
+  });
+
+  tt.test('geocoder#getAutocomplete', function(t) {
+    setup({autocomplete: false});
+    t.equals(geocoder.getAutocomplete(), false, 'getAutocomplete returns the correct autocomplete value');
+    t.end();
+  });
+
+  tt.test('geocoder#setAutocomplete', function(t){
+    t.plan(2);
+
+    setup({autocomplete: false});
+    geocoder.setAutocomplete(true);
+    t.equals(geocoder.options.autocomplete, true, 'the setAutocomplete changes the autocomplete value in the geocoder options');
+    geocoder.setAutocomplete(false);
+    geocoder.query('India');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features.every(feature => feature.place_name.indexOf('Indiana') === -1 ), 'disabling autocomplete correctly affects geocoding results');
+    }));
+  });
+
+  tt.test('geocoder#fuzzyMatch default results', function(t) {
+    t.plan(1)
+    setup();
+    geocoder.query('wahsingtno');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features.some(feature => feature.place_name.indexOf('Washington') !== -1 ), 'fuzzyMatch is enabled in default responses');
+    }));
+  });
+
+  tt.test('geocoder#getFuzzyMatch', function(t) {
+    setup({fuzzyMatch: false});
+    t.equals(geocoder.getFuzzyMatch(), false, 'getFuzzyMatch returns the correct fuzzyMatch value');
+    t.end();
+  });
+
+  tt.test('geocoder#setFuzzyMatch', function(t){
+    t.plan(2);
+
+    setup({fuzzyMatch: false});
+    geocoder.setFuzzyMatch(true);
+    t.equals(geocoder.options.fuzzyMatch, true, 'setFuzzyMatch changes the fuzzyMatch value in the geocoder options');
+    geocoder.setFuzzyMatch(false);
+    geocoder.query('wahsingtno');
+    geocoder.on('results', once(function(e) {
+      t.equals(e.features.length, 0, 'disabling fuzzyMatch correctly affects geocoding results');
+    }));
+  });
+
+  tt.test('geocoder#routing default results', function(t) {
+    t.plan(1)
+    setup();
+    geocoder.query('The White House');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features[0].routable_points === undefined, 'routing (returning routable_points) is disabled in default responses');
+    }));
+  });
+
+  tt.test('geocoder#getRouting', function(t) {
+    setup({routing: true});
+    t.equals(geocoder.getRouting(), true, 'getRouting returns the correct routing value');
+    t.end();
+  });
+
+  tt.test('geocoder#setRouting', function(t){
+    t.plan(2);
+
+    setup({routing: false});
+    geocoder.setRouting(true);
+    t.equals(geocoder.options.routing, true, 'setRouting changes the routing value in the geocoder options');
+    geocoder.query('The White House');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features[0].routable_points !== undefined, 'enabling routing returns routable_points in geocoding results');
+    }));
+  });
+
+  tt.test('geocoder#worldview default results', function(t) {
+    t.plan(1)
+    setup();
+    geocoder.query('Taipei');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features[0].place_name.indexOf('Taiwan') !== -1, 'worldview defaults to US in responses');
+    }));
+  });
+
+  tt.test('geocoder#getWorldview', function(t) {
+    setup({worldview: 'cn'});
+    t.equals(geocoder.getWorldview(), 'cn', 'getWorldview returns the correct worldview value');
+    t.end();
+  });
+
+  tt.test('geocoder#setWorldview', function(t){
+    t.plan(2);
+
+    setup({worldview: 'us'});
+    geocoder.setWorldview('cn');
+    t.equals(geocoder.options.worldview, 'cn', 'setWorldview changes the worldview value in the geocoder options');
+    geocoder.query('Taipei');
+    geocoder.on('results', once(function(e) {
+      t.ok(e.features[0].place_name.indexOf('China') !== -1, 'setting worldview correctly affects geocoding results');
+    }));
+  });
+
   tt.test('geocoder#_renderMessage', function(t){
     setup({});
     var typeaheadRenderErrorSpy = sinon.spy(geocoder._typeahead, 'renderError');