Map marker on selected result

API.md

@@ -44,6 +44,8 @@ A geocoder component using Mapbox Geocoding API
     -   `options.localGeocoder` **[Function](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/function)?** 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.
     -   `options.reverseMode` **(`"distance"` \| `"score"`)** Set the factors that are used to sort nearby results. (optional, default `'distance'`)
     -   `options.reverseGeocode` **[boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)?** Enable reverse geocoding. Defaults to false. Expects coordinates to be lat, lon.
+    -   `options.addToMap` **[Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean)** Indicates that the location of the user-selected result should be added to the map as a [mapbox-gl#Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) (optional, default `true`)
+    -   `options.markerOptions` **[Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object)?** An object specifying the properties to use when constructing the marker, if `addToMap` is true
 
 **Examples**
 

CHANGELOG.md

@@ -4,6 +4,7 @@
 - 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)
 - Bump suggestions to v1.3.4
+- Add constructor properties that allow adding the selected result to the map as a mapbox-gl#marker. Adding the result to the map is now the default behavior. 
 - Remove hardcoded IDs in bounding box exception list
 - Fix duplicate event bug
 

lib/index.js

@@ -10,6 +10,7 @@ var mbxGeocoder = require('@mapbox/mapbox-sdk/services/geocoding');
 var MapboxEventManager = require('./events');
 var localization = require('./localization');
 var subtag = require('subtag');
+var mapboxgl  = require('mapbox-gl');
 var geocoderService;
 
 /**
@@ -42,6 +43,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 {Boolean} [options.addToMap=true]  Indicates that the location of the user-selected result should be added to the map as a [mapbox-gl#Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)
+ * @param {Object} [options.markerOptions] An object specifying the properties to use when constructing the marker, if `addToMap` is true
  * @example
  * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
  * map.addControl(geocoder);
@@ -65,7 +68,12 @@ MapboxGeocoder.prototype = {
     minLength: 2,
     reverseGeocode: false,
     limit: 5,
-    origin: 'https://api.mapbox.com'
+    origin: 'https://api.mapbox.com',
+    addToMap: true,
+    markerOptions: {
+      color: '#4668F2',
+      anchor: 'bottom'
+    }
   },
 
   onAdd: function(map) {
@@ -133,6 +141,9 @@ MapboxGeocoder.prototype = {
       this._map.on('moveend', this._updateProximity);
     }
 
+    this.mapMarker = null;
+    this._handleMarker = this._handleMarker.bind(this);
+
     return el;
   },
 
@@ -195,6 +206,10 @@ MapboxGeocoder.prototype = {
           this._map.flyTo(flyOptions);
         }
       }
+      if (this.options.addToMap){
+        this._handleMarker(selected);
+      }
+
       if (selected.id !== this.lastSelected){
         this._eventEmitter.emit('result', { result: selected });
         this.eventManager.select(selected, this);
@@ -430,6 +445,25 @@ MapboxGeocoder.prototype = {
     return 'Search';
   },
 
+  /**
+   * Handle the placement of a result marking the selected result
+   * @private
+   * @param {Object} selected the selected geojson feature
+   * @returns {MapboxGeocoder} this
+   */
+  _handleMarker: function(selected){
+    // clean up any old marker that might be present
+    if (this.mapMarker){
+      this.mapMarker.remove();
+    }
+    var markerOptions = extend({}, this.options.markerOptions)
+    this.mapMarker = new mapboxgl.Marker(markerOptions);
+    this.mapMarker
+      .setLngLat(selected.center)
+      .addTo(this._map);
+    return this;
+  },
+
   /**
    * Subscribe to events that happen within the plugin.
    * @param {String} type name of event. Available events and the data passed into their respective event objects are: