Display all results, without pagination, on an instantsearch map

Hello there,

I’m building a geographical search UI with Instantsearch.js v2.

I have a searchBox and an infiniteHits widget + a custom-built map widget based on Mapbox GL JS.

The map displays hits with clustering, so it’s not an issue to render a lot of hits. Actually, the user kind of expects to see all hits at once on the map, even if they are paginated in the infiniteHits widget.

My question is: how to achieve the following behavior?

  • all hits are displayed on the map (about 4000-5000)
  • only n first hits are displayed in the infiniteHits widget (default behavior for this widget)
  • when I click on “show more” in the infiniteHits widget, it does not change anything on the map
  • when I zoom/pan the map, it refreshes the hits shown in the infiniteHits widget (this logic is already implemented in my custom map widget)

Thanks for your help.

Hey Hans,

The API can only return N HitsPerPage. The maximum is 1k. You could achieve what you’re looking for with two InstantSearches:

As an example, you can take a look a this fiddle: https://jsfiddle.net/j9nwpz34/27/ (2 InstantSearches synchronized together).

Let us know if that answers your question,


1 Like

Thanks @ronan.levesque I’ll try this and let you know how it goes!

Hi @ronan.levesque

I managed to make it work. But instead of just copying the query, as you do in the fiddle, I copy the whole state, then overwrite the hitsPerPage setting:

searchFunction: function(helper) {
  var mainState = mainSearch.helper.getState();
  mainState.hitsPerPage = 1000; // force display of 1k hits

This way, I also sync the facets between the two instantsearch instances. Do you see any issue with that?

Also, by any chance, do you know how I can sync two instantsearch instances in both directions? I’d like to update my main instance to take into account the insideBoundingBox defined in the map. Maybe a way of using a single helper for both instantsearch instances?

Hi @ronan.levesque can you help?