Enable RefineOnMapMove for Angular

Hi all,

According to the documentation of the geoSearch connector (https://www.algolia.com/doc/api-reference/widgets/geo-search/js/#connector) the ability to refine the instantsearch results when moving the map is enabled by default.

I’m trying to achieve that behavior from an Angular application, so I followed the guide to use to geoSearch connector in Angular (https://www.algolia.com/doc/guides/building-search-ui/resources/ui-and-ux-patterns/in-depth/geo-search/angular/).

I modified the codesandbox linked in that guide just by adding <ais-hits></ais-hits> next to the map. The hits widget display all the hits, but when moving the map nothing happens (the hits are not refined by default).

Can you provide some advice on how to enable that behavior?

Thanks!

Hi @santiagommc,
If you want to refine on map move you need to hook the refine function on the boundsChange EventEmitter.

Here is quick example: https://codesandbox.io/s/vrzsg

I hope this helps!

Hi Youcef,

Your example was very helpful!

I just had to use the ‘idle’ event instead of the ‘boundsChange’ event, because the refine was firing at every step of the map drag.

Thanks!!