geolocation as a result when input is focused and clear

[jayenashar]

I'm struggling to figure out how to show custom results when the input is clear and comes into focus, or when it is in focus and then cleared. I want to add a "Your location" result at this time, and if that result is selected, then I want it to fetch the user's location and use that as the selected result.

[andrewharvey]

Something like https://jsfiddle.net/andrewharvey4/41yfm9oa/14/, maybe that's a start. You're going to need to write a lot of custom code. If you see anything which we could improve in the geocoder API to make this use case easier feel free to suggest it.

[jayenashar]

is geocoder._inputEl a stable interface to use? i'd rather have geocoder.on('focus', handler) if that can be added. handler could take inputEl as a parameter?

is geocoder._geocode a stable interface to use? can i get it to show results without triggering a call to mapbox's api? maybe if the suggestions were decoupled from the geocoder, where it's like an autocompleter with a default data src of mapbox's geocoder, then i could supplement the data src part.

i'll use your fiddle as the base for now, but will likely switch to autoComplete.js with the mapbox rest api if i need more customisations.

[andrewharvey]

is geocoder._inputEl a stable interface to use? is geocoder._geocode a stable interface to use?

nope, not at all.

maybe if the suggestions were decoupled from the geocoder, where it's like an autocompleter with a default data src of mapbox's geocoder, then i could supplement the data src part.

That's what the localGeocoder was designed for, so you could suppliment Mapbox Geocoding API results with your own results.

In my fiddle there was a lot of workarounds since the control isn't designed to open before you start entering input.

i'll use your fiddle as the base for now, but will likely switch to autoComplete.js with the mapbox rest api if i need more customisations.

Yeah if you need something quite specific like this then implementing your own control would be the way to go. You could always just fork the MapboxGeocoder with your own customisations, or build one from scratch.

If there's things that could be added, I'm happy to review that.

[jayenashar]

finally got around to adding this. a few thoughts:

• geocoder.trigger() isn't documented in https://github.com/mapbox/mapbox-gl-geocoder/blob/master/API.md
• i think the list should open on focus with the last results - can add a optional parameter if you disagree
  • if there are no last results (e.g., on first use), then it should hit the local and mapbox geocoders
• if the query is empty (and minLength is 0), it should not call the mapbox geocoder, only the local geocoder
• if you combine the above two, then it is the responsibility of the developer to ensure the local geocoder returns a result when the query is empty - otherwise it's fair game to open the geocoder with "No results found" on focus with empty value

[jayenashar]

i thought you may be curious with what i ended up with, so i'm sharing:

      geocoder._inputEl.addEventListener('focus', () => {
        if (geocoder._typeahead.data.length) {
          // if there was a list before, just display it, so the user can quickly choose a different result
          geocoder._typeahead.update(geocoder._typeahead.data);
        } else {
          // otherwise, get and show results
          const localGeocoderOnly            = geocoder.options.localGeocoderOnly;
          geocoder.options.localGeocoderOnly = !geocoder._inputEl.value || geocoder._inputEl.value === YOUR_LOCATION;
          geocoder._geocode(geocoder._inputEl.value);
          geocoder.options.localGeocoderOnly = localGeocoderOnly;
        }
      });

      geocoder.on('result', (result) => {
        geocoder._inputEl.blur();
        // do the usual result stuff
      });