v6: fix usage of feature address info properties

Author: VladislavMedved

debug/index.js

@@ -86,23 +86,7 @@ var geocoder = new MapboxGeocoder({
     }
   },
   mapboxgl: mapboxgl,
-  searchType: 'structured',
-  queryCoordinates: {longitude: 40.76490756883251, latitude: -74.0437572064368},
-  address_line1: 'address_line1',
-  address_number: 'address_number',
-  street: 'street',
-  place: 'place',
-  region: 'region',
-  countries: 'US',
-  postcode: 'postcode',
-  locality: 'locality',
-
-  version: 'v6',
-  types: "address",
-  mode: 'mapbox.places-permanent',
-  reverseGeocode: true,
-  flipCoordinates: true,
-  permanent: true
+  version: 'v5',
 });
 
 map.addControl(geocoder)

lib/index.js

@@ -32,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
@@ -85,36 +115,6 @@ function getFooterNode() {
  *
  */
 
-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>`;
-}
-
 function MapboxGeocoder(options) {
   this._eventEmitter = new EventEmitter();
   this.options = extend({}, this.options, {
@@ -695,14 +695,15 @@ MapboxGeocoder.prototype = {
       if (reverseGeocodeCoordRgx.test(trimmedSearch)) {
         search = search.replace(/,/g, ' ');
       }
-      if(this.options.version === 'v6' && config.mode) {
-        config.permanent = config.mode === 'mapbox.places-permanent';
-        delete config.mode;
-      }
       config = extend(config, { query: search });
     } 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'] : []),

lib/utils.js

@@ -74,8 +74,8 @@ function getAddressInfo(feature) {
 function getV6AddressInfo(feature) {
   const houseNumber = feature.address_number || "";
   const street = feature.street || "";
-  const placeName = feature.place_formatted || "";
-  const address = placeName.split(",")[0];
+  const placeName = feature.name + (feature.place_formatted ? `, ${feature.place_formatted}` : "");
+  const address = feature.name;
 
   const addrInfo = {
     address: address,
@@ -87,7 +87,7 @@ function getV6AddressInfo(feature) {
   for (const contextProp in feature.context) {
     if (contextProp) {
       const layer = contextProp.id.split(".")[0];
-      addrInfo[layer] = contextProp.text;
+      addrInfo[layer] = contextProp.name;
     }
   }