How to clear the mapbox geocoder?

6
votes

I use the Mapbox Geocoder and additionally several select menus to customize a map. Now I want to reset the geocoder as soon as the user selects a value from the select menu - so the input field should be cleared and the marker removed.

In the Docs a clear function is described and there is also a clear button in the default input field, but this function doesn't work if I call it from a change event.

This is what my attemp looks like so far:


const select  = $('#select');
const control = $('#geocoder');

const geocoder = new MapboxGeocoder({
 accessToken: accessToken,
 mapboxgl: mapboxgl
});

//Add the geocoder
document.getElementById(control).appendChild(geocoder.onAdd(map));

//Now reset the geocoder if the user selects something
select.change(function() {
 geocoder.clear();
});

I expect the reset of the input field and the removal of the marker, but the actual output is "geocoder.clear is not a function"

2
javascriptjquerymapbox-gl-js

2 Answers

2
votes

I had a similar issue with a react app that uses mapbox-gl. I got around it by defining the marker outside of the geocoder.on call. This is all inside of the componentDidMount method of the map component.

let marker = new mapboxgl.Marker({ draggable: false, color: "green" })

geocoder.on('result', function(e) {
  marker.setLngLat(e.result.center).addTo(map)
});
0
votes

I used the geocoder.clear() function inside geoder.on('result', ...), and it is working. However, the geocoder is cleared and it is on focus. So, I added another line to lose the focus from the input.

geocoder.on('result', function(e) {
  geocoder.clear();
  document.getElementsByClassName('mapboxgl-ctrl-geocoder--input')[0].blur();
  ...
});