Merge pull request #208 from mapbox/custom-render

Custom html render

lib/index.js

@@ -42,6 +42,8 @@ var geocoderService;
  * @param {Function} [options.localGeocoder] A function accepting the query string which performs local geocoding to supplement results from the Mapbox Geocoding API. Expected to return an Array of GeoJSON Features in the [Carmen GeoJSON](https://github.com/mapbox/carmen/blob/master/carmen-geojson.md) format.
  * @param {'distance'|'score'} [options.reverseMode='distance'] - Set the factors that are used to sort nearby results.
  * @param {boolean} [options.reverseGeocode] Enable reverse geocoding. Defaults to false. Expects coordinates to be lat, lon.
+ * @param {Function} [options.render] A function that specifies how the results should be rendered in the dropdown menu
+ * @param {Function} [options.getItemValue] A function that specifies how the selected result should be rendered in the search bar 
  * @example
  * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
  * map.addControl(geocoder);
@@ -65,7 +67,10 @@ MapboxGeocoder.prototype = {
     minLength: 2,
     reverseGeocode: false,
     limit: 5,
-    origin: 'https://api.mapbox.com'
+    origin: 'https://api.mapbox.com',
+    getItemValue: function(item) { 
+      return item.place_name
+    }
   },
 
   onAdd: function(map) {
@@ -124,9 +129,9 @@ MapboxGeocoder.prototype = {
       minLength: this.options.minLength,
       limit: this.options.limit
     });
-    this._typeahead.getItemValue = function(item) {
-      return item.place_name;
-    };
+
+    this.setRenderFunction(this.options.render);
+    this._typeahead.getItemValue = this.options.getItemValue;
 
     if (this.options.trackProximity) {
       this._updateProximity();
@@ -398,6 +403,27 @@ MapboxGeocoder.prototype = {
     return this.options.proximity;
   },
 
+  /**
+   * Set the render function used in the results dropdown
+   * @param {Function} fn The function to use as a render function
+   * @returns {MapboxGeocoder} this
+   */
+  setRenderFunction: function(fn){
+    if (fn && typeof(fn) == "function"){
+      this._typeahead.render = fn;
+    }
+    return this;
+  },
+
+  /**
+   * Get the function used to render the results dropdown
+   * 
+   * @returns {Function} the render function
+   */
+  getRenderFunction: function(){
+    return this._typeahead.render;
+  },
+
   /**
    * Get the language to use in UI elements and when making search requests
    *

package.json

@@ -57,9 +57,8 @@
   "dependencies": {
     "@mapbox/mapbox-sdk": "^0.5.0",
     "lodash.debounce": "^4.0.6",
-    "sinon": "^7.2.3",
+    "suggestions": "^1.4.0",
     "subtag": "^0.5.0",
-    "suggestions": "^1.3.4",
     "nanoid": "^2.0.1",
     "xtend": "^4.0.1"
   },

test/test.geocoder.js

@@ -445,6 +445,88 @@ test('geocoder', function(tt) {
     );
   });
 
+  tt.test('options.render', function(t){
+    t.plan(3);
+    setup({
+      render: function(feature){
+        return 'feature id is ' + feature.id
+      }
+    });
+
+    var fixture = {
+      id: 'abc123',
+      place_name: 'San Francisco, California'
+    }
+
+    t.ok(geocoder._typeahead.render, 'sets the render function on the typeahead');
+    t.equals(typeof(geocoder._typeahead.render), 'function', 'the render function on the typeahead is a function');
+    t.equals(geocoder._typeahead.render(fixture), 'feature id is abc123', 'render function is applied properly on the typeahead');
+  })
+
+  tt.test('setRenderFunction with no input', function(t){
+    t.plan(2);
+    setup({});
+    var result = geocoder.setRenderFunction();
+    t.equals(typeof(geocoder._typeahead.render), 'function', 'render function is set even when no input is passed');
+    t.ok(result instanceof MapboxGeocoder, 'setRenderFunction always returns a MapboxGeocoder instance');
+  });
+
+  tt.test('setRenderFunction with function input', function(t){
+    t.plan(2);
+    setup({});
+    var result = geocoder.setRenderFunction(function(item){return item.place_name});
+    t.equals(typeof(geocoder._typeahead.render), 'function', 'render function is set');
+    t.ok(result instanceof MapboxGeocoder, 'setRenderFunction always returns a MapboxGeocoder instance');
+  });
+
+  tt.test('getRenderFunction default', function(t){
+    t.plan(2);
+    setup({});
+    var result = geocoder.getRenderFunction();
+    t.ok(result, 'value is always returned');
+    t.equals(typeof(result), 'function', 'function is always returned');
+  })
+
+  tt.test('getRenderFunction', function(t){
+    t.plan(2);
+    setup({render: function(item){return item.place_name}});
+    var result = geocoder.getRenderFunction();
+    t.ok(result, 'value is returned when a custom function is set');
+    t.equals(typeof(result), 'function', 'function is returned  when a custom function is set');
+  })
+
+  tt.test('options.getItemValue', function(t){
+    setup({
+      getItemValue: function(feature){
+        return 'feature id is ' + feature.id
+      }
+    });
+
+    var fixture = {
+      id: 'abc123',
+      place_name: 'San Francisco, California'
+    }
+
+    t.ok(geocoder._typeahead.getItemValue, 'sets the get item function on the typeahead');
+    t.equals(typeof(geocoder._typeahead.getItemValue), 'function', 'the getItemValue on the typeahead is a function');
+    t.equals(geocoder._typeahead.getItemValue(fixture), 'feature id is abc123', 'getItemValue function is applied properly on the typeahead');
+    t.end();
+  });
+
+  tt.test('options.getItemValue default', function(t){
+    setup({});
+
+    var fixture = {
+      id: 'abc123',
+      place_name: 'San Francisco, California'
+    }
+
+    t.ok(geocoder._typeahead.getItemValue, 'the get item function on the typeahead is set by default');
+    t.equals(typeof(geocoder._typeahead.getItemValue), 'function', 'the getItemValue on the typeahead is a function by default');
+    t.equals(geocoder._typeahead.getItemValue(fixture), 'San Francisco, California', 'the getItemValue uses the place_name by default');
+    t.end()
+  });
+
   tt.test('options.flyTo [false]', function(t){
     t.plan(1)
     setup({