Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Map marker on selected result #219

Merged
merged 15 commits into from
Mar 22, 2019
2 changes: 2 additions & 0 deletions API.md
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
andrewharvey marked this conversation as resolved.
Show resolved Hide resolved
- `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
andrewharvey marked this conversation as resolved.
Show resolved Hide resolved

**Examples**

Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
andrewharvey marked this conversation as resolved.
Show resolved Hide resolved
- Remove hardcoded IDs in bounding box exception list
- Fix duplicate event bug

Expand Down
36 changes: 35 additions & 1 deletion lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;

/**
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -133,6 +141,9 @@ MapboxGeocoder.prototype = {
this._map.on('moveend', this._updateProximity);
}

this.mapMarker = null;
this._handleMarker = this._handleMarker.bind(this);

return el;
},

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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:
Expand Down
Loading