I want to use a MapBox Geocoder (outside a Map) to visualize and hide/clear a point from the map.
Whenever a user searches for an address, I use
geocoder.on('result', function (e) {...}
to create a point, populate a layer and visualize it on the map.
I want to clear/clean the layer whenever the user clicks on the "x" button.
Any ideas on how can I listen for the click on the "X" button of a MapBox Geocoder?
I had a look of the doc but without much luck till now!
My code looks like this:
function point (){
geocoder.on('result', function (e) {
console.log(e)
if (e.result.place_name && e.result.center) {
var point = create_feature(e.result.place_name, e.result.center[0], e.result.center[1])
//Add points on the map
map.getSource('blablabla').setData({
type: 'FeatureCollection',
features: [point]
});
}
})
};
function create_feature(userId, x, y) {
var user_feature = {
'type': 'Feature',
'properties': {
'description': userId
},
'geometry': {
'type': 'Point',
'coordinates': [x, y]
}
};
return user_feature;
};
https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md#on
Available events and the data passed into their respective event objects are:
- clear Emitted when the input is cleared
So this should work:
geocoder.on('clear', function () {
})