support v6 api in MapboxGeocoder class

Author: VladislavMedved

debug/index.js

@@ -85,7 +85,9 @@ var geocoder = new MapboxGeocoder({
         .then(response => response.json())
     }
   },
-  mapboxgl: mapboxgl
+  mapboxgl: mapboxgl,
+  reverseGeocode: true,
+  version: 'v6',
 });
 
 map.addControl(geocoder)

lib/events.js

@@ -179,7 +179,8 @@ MapboxEventManager.prototype = {
       routing: geocoder.options.routing,
       worldview: geocoder.options.worldview,
       mapZoom: zoom,
-      keyboardLocale: this.locale
+      keyboardLocale: this.locale,
+      apiVersion: geocoder.options.version
     }
 
     // get the text in the search bar

lib/index.js

@@ -7,6 +7,7 @@ var EventEmitter = require('events').EventEmitter;
 var exceptions = require('./exceptions');
 var MapboxClient = require('@mapbox/mapbox-sdk');
 var mbxGeocoder = require('@mapbox/mapbox-sdk/services/geocoding');
+var mbxGeocoderV6 = require("@mapbox/mapbox-sdk/services/geocoding-v6");
 var MapboxEventManager = require('./events');
 var localization = require('./localization');
 var subtag = require('subtag');
@@ -31,6 +32,36 @@ function getFooterNode() {
   return div;
 }
 
+function getItemValue(item) {
+  return item.place_name
+}
+
+function render(item) {
+  var placeName = item.place_name.split(',');
+  return '<div class="mapboxgl-ctrl-geocoder--suggestion"><div class="mapboxgl-ctrl-geocoder--suggestion-title">' + placeName[0]+ '</div><div class="mapboxgl-ctrl-geocoder--suggestion-address">' + placeName.splice(1, placeName.length).join(',') + '</div></div>';
+}
+
+function getItemValueV6(item) {
+  const { name, place_formatted } = item.properties;
+  return name + (place_formatted ? `, ${place_formatted}` : "");
+}
+
+function renderV6(item) {
+  const { name, place_formatted } = item.properties;
+  return `<div class="mapboxgl-ctrl-geocoder--suggestion">
+      ${
+  name
+    ? `<div class="mapboxgl-ctrl-geocoder--suggestion-title">${name}</div>`
+    : ""
+}
+      ${
+  place_formatted
+    ? `<div class="mapboxgl-ctrl-geocoder--suggestion-address">${place_formatted}</div>`
+    : ""
+}
+    </div>`;
+}
+
 /**
  * A geocoder component using the [Mapbox Geocoding API](https://docs.mapbox.com/api/search/#geocoding)
  * @class MapboxGeocoder
@@ -75,6 +106,7 @@ function getFooterNode() {
  * @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.
  * @param {Boolean} [options.enableGeolocation=false] If `true` enable user geolocation feature.
+ * @param {'v5'|'v6'} [options.version='v5'] If `v6` use v6 endpoint instead of v5. The default value is set to v5 API.
  * @param {('address'|'street'|'place'|'country')} [options.addressAccuracy="street"] The accuracy for the geolocation feature with which we define the address line to fill. The browser API returns the user's position with accuracy, and sometimes we can get the neighbor's address. To prevent receiving an incorrect address, you can reduce the accuracy of the definition.
  * @example
  * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
@@ -85,11 +117,15 @@ function getFooterNode() {
 
 function MapboxGeocoder(options) {
   this._eventEmitter = new EventEmitter();
-  this.options = extend({}, this.options, options);
+  this.options = extend({}, this.options, {
+    getItemValue: options.version === 'v6' ? getItemValueV6 : getItemValue,
+    render: options.version === 'v6' ? renderV6 : render,
+  }, options);
   this.inputString = '';
   this.fresh = true;
   this.lastSelected = null;
   this.geolocation = new Geolocation();
+  this.geocoderFactory = this.options.version === 'v6' ? mbxGeocoderV6 : mbxGeocoder;
 }
 
 MapboxGeocoder.prototype = {
@@ -110,13 +146,7 @@ MapboxGeocoder.prototype = {
     clearOnBlur: false,
     enableGeolocation: false,
     addressAccuracy: 'street',
-    getItemValue: function(item) {
-      return item.place_name
-    },
-    render: function(item) {
-      var placeName = item.place_name.split(',');
-      return '<div class="mapboxgl-ctrl-geocoder--suggestion"><div class="mapboxgl-ctrl-geocoder--suggestion-title">' + placeName[0]+ '</div><div class="mapboxgl-ctrl-geocoder--suggestion-address">' + placeName.splice(1, placeName.length).join(',') + '</div></div>';
-    }
+    version: 'v5'
   },
 
   /**
@@ -181,7 +211,7 @@ MapboxGeocoder.prototype = {
     this.setLanguage();
 
     if (!this.options.localGeocoderOnly){
-      this.geocoderService = mbxGeocoder(
+      this.geocoderService = this.geocoderFactory(
         MapboxClient({
           accessToken: this.options.accessToken,
           origin: this.options.origin
@@ -340,7 +370,13 @@ MapboxGeocoder.prototype = {
       this._showClearButton();
       this.fresh = false;
 
-      const config = {
+      const config = this.options.version === 'v6' ? {
+        longitude: geojson.geometry.coordinates[0],
+        latitude: geojson.geometry.coordinates[1],
+        limit: 1,
+        language: this.options.language,
+        types: ["address"],
+      } : {
         limit: 1,
         language: [this.options.language],
         query: geojson.geometry.coordinates,
@@ -532,7 +568,16 @@ MapboxGeocoder.prototype = {
 
   _fly: function(selected) {
     var flyOptions;
-    if (selected.properties && exceptions[selected.properties.short_code]) {
+    const bbox = this.options.version === 'v6' ? selected.properties.bbox : selected.bbox;
+
+    let exceptionCode;
+    if (this.options.version === 'v6' && selected.properties.feature_type === 'country') {
+      exceptionCode = selected.properties.context.country.country_code.toLowerCase();
+    } else if (this.options.version === 'v5') {
+      exceptionCode = selected.properties && selected.properties.short_code;
+    }
+    
+    if (selected.properties && exceptions[exceptionCode]) {
       // Certain geocoder search results return (and therefore zoom to fit)
       // an unexpectedly large bounding box: for example, both Russia and the
       // USA span both sides of -180/180, or France includes the island of
@@ -541,10 +586,9 @@ MapboxGeocoder.prototype = {
       // short-term solution; this may be amended as necessary.
       flyOptions = extend({}, this.options.flyTo);
       if (this._map){
-        this._map.fitBounds(exceptions[selected.properties.short_code].bbox, flyOptions);
+        this._map.fitBounds(exceptions[exceptionCode].bbox, flyOptions);
       }
-    } else if (selected.bbox) {
-      var bbox = selected.bbox;
+    } else if (bbox) {
       flyOptions = extend({}, this.options.flyTo);
       if (this._map){
         this._map.fitBounds([[bbox[0], bbox[1]], [bbox[2], bbox[3]]], flyOptions);
@@ -581,32 +625,36 @@ MapboxGeocoder.prototype = {
 
   _setupConfig: function(requestType, search) {
     // Possible config properties to pass to client
+    const v5Keys = [
+      'fuzzyMatch',
+      'routing',
+      'reverseMode',
+    ];
     const keys = [
       'bbox',
       'limit',
       'proximity',
       'countries',
       'types',
       'language',
-      'reverseMode',
       'mode',
       'autocomplete',
-      'fuzzyMatch',
-      'routing',
       'worldview'
     ];
+    const allKeys = [...(this.options.version === 'v6' ? [] : v5Keys), ...keys];
+    // countries, types, and language need to be passed in as arrays to client
+    // https://github.com/mapbox/mapbox-sdk-js/blob/master/services/geocoding.js#L38-L47
+    const arrayParameters = ['countries', 'types', ...(this.options.version === 'v6' ? [] : ['language'])];
     const spacesOrCommaRgx = /[\s,]+/;
 
     var self = this;
-    var config = keys.reduce(function(config, key) {
+    var config = allKeys.reduce(function(config, key) {
       // don't include undefined/null params, but allow boolean, among other, values
       if (self.options[key] === undefined || self.options[key] === null) {
         return config;
       }
 
-      // countries, types, and language need to be passed in as arrays to client
-      // https://github.com/mapbox/mapbox-sdk-js/blob/master/services/geocoding.js#L38-L47
-      ['countries', 'types', 'language'].indexOf(key) > -1
+      arrayParameters.indexOf(key) > -1
         ? (config[key] = self.options[key].split(spacesOrCommaRgx))
         : (config[key] = self.options[key]);
 
@@ -626,24 +674,18 @@ MapboxGeocoder.prototype = {
 
     switch (requestType) {
     case GEOCODE_REQUEST_TYPE.REVERSE: {
+      // expected to be coordinates in the form `lat, lon`
       var coords = search.split(spacesOrCommaRgx).map(function(c) {
         return parseFloat(c, 10);
       })
       if (!self.options.flipCoordinates) {
         coords.reverse();
       }
 
-      // client only accepts one type for reverseGeocode, so
-      // use first config type if one, if not default to poi
-      config.types ? [config.types[0]] : ["poi"];
-      config = extend(config, { query: coords, limit: 1 });
-
-      // Remove config options not supported by the reverseGeocoder
-      ['proximity', 'autocomplete', 'fuzzyMatch', 'bbox'].forEach(function(key) {
-        if (key in config) {
-          delete config[key]
-        }
-      });
+      config = extend(config,
+        this.options.version === 'v6' ? { longitude: coords[0], latitude: coords[1]} : { query: coords },
+        {limit: 1 }
+      );
     } break;
     case GEOCODE_REQUEST_TYPE.FORWARD: {
       // Ensure that any reverse geocoding looking request is cleaned up
@@ -657,6 +699,23 @@ MapboxGeocoder.prototype = {
     } break;
     }
 
+    if(this.options.version === 'v6' && config.mode) {
+      config.permanent = config.mode === 'mapbox.places-permanent';
+      delete config.mode;
+    }
+
+    // Remove config options not supported by the reverseGeocoder and v5 keys if v6 mode chosen
+    const unsupportedKeys = [
+      ...(requestType === GEOCODE_REQUEST_TYPE.REVERSE ? ['proximity', 'autocomplete', 'fuzzyMatch', 'bbox'] : []),
+      ...(this.options.version === 'v6' ? v5Keys : [])
+    ];
+
+    unsupportedKeys.forEach(function(key) {
+      if (key in config) {
+        delete config[key]
+      }
+    });
+
     return config;
   },
 
@@ -840,7 +899,9 @@ MapboxGeocoder.prototype = {
     if (!results.features.length) return;
     var result = results.features[0];
     this._typeahead.selected = result;
-    this._inputEl.value = result.place_name;
+    this._inputEl.value = this.options.version === 'v6' ?
+      (result.properties.name + (result.properties.place_formatted ? `, ${result.properties.place_formatted}` : "")) :
+      result.place_name;
     this._onChange();
   },
 
@@ -1177,7 +1238,7 @@ MapboxGeocoder.prototype = {
    */
   setOrigin: function(origin){
     this.options.origin = origin;
-    this.geocoderService = mbxGeocoder(
+    this.geocoderService = this.geocoderFactory(
       MapboxClient({
         accessToken: this.options.accessToken,
         origin: this.options.origin
@@ -1201,7 +1262,7 @@ MapboxGeocoder.prototype = {
    */
   setAccessToken: function(accessToken){
     this.options.accessToken = accessToken;
-    this.geocoderService = mbxGeocoder(
+    this.geocoderService = this.geocoderFactory(
       MapboxClient({
         accessToken: this.options.accessToken,
         origin: this.options.origin

lib/utils.js

@@ -34,12 +34,18 @@ function transformFeatureToGeolocationText(feature, accuracy) {
     return acc + addrInfo[name];
   }, '');
 }
+
+const isV5Feature = (feature) => "id" in feature;
+
 /**
  * This function transforms the feature from reverse geocoding to AddressInfo object
  * @param {object} feature 
  * @returns {object}
  */
 function getAddressInfo(feature) {
+  if(!isV5Feature(feature)) {
+    return getV6AddressInfo(feature);
+  }
   const houseNumber = feature.address || '';
   const street = feature.text || '';
   const placeName = feature.place_name || '';
@@ -60,6 +66,33 @@ function getAddressInfo(feature) {
   return addrInfo;
 }
 
+/**
+ * This function transforms the v6 feature from reverse geocoding to AddressInfo object
+ * @param {object} feature 
+ * @returns {object}
+ */
+function getV6AddressInfo(feature) {
+  const houseNumber = feature.address_number || "";
+  const street = feature.street || "";
+  const placeName = feature.name + (feature.place_formatted ? `, ${feature.place_formatted}` : "");
+  const address = feature.name;
+
+  const addrInfo = {
+    address: address,
+    houseNumber: houseNumber,
+    street: street,
+    placeName: placeName,
+  };
+
+  for (const contextProp in feature.context) {
+    if (contextProp) {
+      addrInfo[contextProp] = feature.context[contextProp].name;
+    }
+  }
+
+  return addrInfo;
+}
+
 const REVERSE_GEOCODE_COORD_RGX = /^[ ]*(-?\d{1,3}(\.\d{0,256})?)[, ]+(-?\d{1,3}(\.\d{0,256})?)[ ]*$/;
 
 module.exports = {