Geocoder search highlight race condition

[dcdenu4]

In prep for a demo @lmandle discovered a bug where the geocoder focus doesn’t highlight boundaries correctly all the time. This is because map.project() can return different pixel coordinates depending on the center of the map.

See mapbox github issue for more details:
mapbox/mapbox-gl-js#10138

Could a possible solution be to query the bounding box and then check the name against the layers queried?

T.E. 1-3 days

[dcdenu4]

To replicate this issue:

1. Refresher viewer
2. Toggle "National" scale
3. Select "Nitrogen" from ES layers
4. Search "France" in national search window
5. Select (click) France from dropdown results # this should highlight France correctly
6. Clear search selection and search "Spain"
7. Select (click) Spain from dropdown results # this should highlight France correctly
8. Clear search selection and search "France" again
9. Select (click) France from dropdown results # this should not highlight France

When first going to France, geocoder result center coordinates are:
lng, lat: [2.61878695312962, 47.8249046208979]
projected: x: 388.14062846440805, y: 268.4981074038657

Going back to France, geocoder result center coordinates are:
lng, lat: 2.61878695312962, 47.8249046208979
projected: x: 763.0459337518229, y: -146.26529524473747

[dcdenu4]

Part of the problem comes from the call map.fitbounds(). This takes some time to move the viewer to a new position. However, everything is running in async mode, so when calling map.project() we are not guaranteed to be "done" moving / flying to the new location yet.

There is an event moveend that might be useful. We could also wrap some code in a setTimeout() call.

[dcdenu4]

Alright, apparently map has a once() function that you can use to subscribe to an event:

map.fitBounds(lngLatBbox, {padding:40}).once('moveend', () => { ... });

From the docs of once():

Adds a listener that will be called only once to a specified event type, optionally limited to events occurring on features in a specified style layer.

[dcdenu4]

It looks like using the once() function, if you don't provide a function with it, it will default to returning a promise:

mapbox/mapbox-gl-js#10203

There's also this interest about returning promises for all async map functions: mapbox/mapbox-gl-js#3964

[dcdenu4]

Also using the bounding box for searching to get more returned features, and then looking to match the geocoded result name to the feature name to properly highlight. This was an initial fix to the problem that might not be necessary anymore.

We could probably go back to using the center location of the geocoding result to get the proper feature to highlight.

[dcdenu4]

Is #36 a duplicate of this issue?

[dcdenu4]

This should be fixed.