mapboxmapbox-gl-jsgeocoder

Listen the click on the "X" button of a MapBox Geocoder


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.

Clear Mapbox geocode

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;
};

Solution

  • 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 () {
    })