Map marker on selected result

API.md

@@ -44,6 +44,7 @@ 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.marker` **([Boolean](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Boolean) \| [Object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Object))** If `true`, a [Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) will be added to the map at the location of the user-selected result using a default set of Marker properties.  If the value is an object, the marker will be constructed using these properties. If `false`, no marker will be added to the map. (optional, default `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

@@ -42,6 +42,7 @@ 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|Object} [options.marker=true]  If `true`, a [Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker) will be added to the map at the location of the user-selected result using a default set of Marker properties.  If the value is an object, the marker will be constructed using these properties. If `false`, no marker will be added to the map.
  * @example
  * var geocoder = new MapboxGeocoder({ accessToken: mapboxgl.accessToken });
  * map.addControl(geocoder);
@@ -65,7 +66,9 @@ MapboxGeocoder.prototype = {
     minLength: 2,
     reverseGeocode: false,
     limit: 5,
-    origin: 'https://api.mapbox.com'
+    origin: 'https://api.mapbox.com',
+    marker: true,
+    mapboxgl: null
   },
 
   onAdd: function(map) {
@@ -133,6 +136,15 @@ MapboxGeocoder.prototype = {
       this._map.on('moveend', this._updateProximity);
     }
 
+    this.mapMarker = null;
+    this._handleMarker = this._handleMarker.bind(this);
+
+    this._mapboxgl = this.options.mapboxgl;
+    if (!this._mapboxgl) {
+      console.error("No mapboxgl detected. Map markers are disabled. Please set options.mapboxgl.");
+      this.marker = false;
+    }
+
     return el;
   },
 
@@ -195,6 +207,10 @@ MapboxGeocoder.prototype = {
           this._map.flyTo(flyOptions);
         }
       }
+      if (this.options.marker && this._mapboxgl){
+        this._handleMarker(selected);
+      }
+
       if (selected.id !== this.lastSelected){
         this._eventEmitter.emit('result', { result: selected });
         this.eventManager.select(selected, this);
@@ -330,8 +346,8 @@ MapboxGeocoder.prototype = {
     this._onChange();
     this._inputEl.focus();
     this._clearEl.style.display = 'none';
+    this._removeMarker();
     this._eventEmitter.emit('clear');
-    // reset the turnstile event
     this.fresh = true;
   },
 
@@ -430,6 +446,37 @@ 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
+    this._removeMarker();
+    var defaultMarkerOptions = {
+      color: '#4668F2'
+    }
+    var markerOptions = extend({}, defaultMarkerOptions, this.options.marker)
+    this.mapMarker = new this._mapboxgl.Marker(markerOptions);
+    this.mapMarker
+      .setLngLat(selected.center)
+      .addTo(this._map);
+    return this;
+  },
+
+  /**
+   * Handle the removal of a result marker
+   * @private
+   */
+  _removeMarker: function(){
+    if (this.mapMarker){
+      this.mapMarker.remove();
+      this.mapMarker = null;
+    }
+  },
+
   /**
    * 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: