Map marker on selected result

CHANGELOG.md

@@ -1,9 +1,11 @@
 ## Master
+- Support for the Mapbox GL JS 0.47.0 API. This is compatible with 0.47.0 and later, and may not be compatible with earlier versions.
 - Pass `flyTo` options to the map on result selection.
 - Obtain language from user's browser settings [#195](https://github.com/mapbox/mapbox-gl-geocoder/issues/195)
 - 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
+- Adds the `marker` constructor option that allows adding the selected result to the map as a [marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker). Adding the marker to the map is now the default behavior. [#219](https://github.com/mapbox/mapbox-gl-geocoder/pull/219). 
 - Upgrade dev dependencies
 - Remove hardcoded IDs in bounding box exception list
 - Fix duplicate event bug

debug/index.js

@@ -38,8 +38,8 @@ var coordinatesGeocoder = function(query) {
     return null;
   }
   function coordinateFeature(lng, lat) {
-    var lng = Number(lng);
-    var lat = Number(lat);
+    lng = Number(lng);
+    lat = Number(lat);
     return {
       center: [lng, lat],
       geometry: {
@@ -76,7 +76,8 @@ var geocoder = new MapboxGeocoder({
   trackProximity: true,
   localGeocoder: function(query) {
     return coordinatesGeocoder(query);
-  }
+  },
+  mapboxgl: mapboxgl
 });
 
 window.geocoder = geocoder;

lib/index.js

@@ -43,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|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 options.  If the value is an object, the marker will be constructed using these options. If `false`, no marker will be added to the map.
+ * @param {Object} [options.mapboxgl] A [mapbox-gl](https://github.com/mapbox/mapbox-gl-js) instance to use when creating [Markers](https://docs.mapbox.com/mapbox-gl-js/api/#marker). Required if `options.marker` is true. 
  * @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
@@ -69,6 +71,8 @@ MapboxGeocoder.prototype = {
     reverseGeocode: false,
     limit: 5,
     origin: 'https://api.mapbox.com',
+    marker: true,
+    mapboxgl: null,
     collapsed: false,
     getItemValue: function(item) {
       return item.place_name
@@ -158,6 +162,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 && this.options.marker) {
+      console.error("No mapboxgl detected in options. Map markers are disabled. Please set options.mapboxgl.");
+      this.options.marker = false;
+    }
+
     return el;
   },
 
@@ -179,6 +192,8 @@ MapboxGeocoder.prototype = {
       this._map.off('moveend', this._updateProximity);
     }
 
+    this._removeMarker();
+
     this._map = null;
 
     return this;
@@ -240,6 +255,10 @@ MapboxGeocoder.prototype = {
           this._map.flyTo(flyOptions);
         }
       }
+      if (this.options.marker && this._mapboxgl){
+        this._handleMarker(selected);
+      }
+
       this._eventEmitter.emit('result', { result: selected });
       this.eventManager.select(selected, this);
       this.lastSelected =  selected.id;
@@ -373,8 +392,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;
   },
 
@@ -503,6 +522,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: