AngularInstantSearch Map and Paginated List

Hey all,

I am looking to make a UI with results with pagination on one side and a map on the other side. The problem that I have is that I want that both searches share the same filters but one should return just a page of results and the other all the results available.

I am using doing this in Angular so I am using two ais-instantsearch tags. The first one contains all the filters. How do I get to bind both searches to the same filters?

I would appreciate a response, given that this topic (One index, multiple hitsPerPage and Pagination) is open since 2018 with no response.

Regards!

Hi @ismael,

Welcome to the Algolia Community!

If I understand correctly, you have a page with two sections of search results. Both sections use the same filters but have a different number of results (some paginated).

Would it be possible to create a codesandbox with a minimum version of your code to demonstrate the issue and how you are using the two ais-instantsearch tags so that we can troubleshoot and provide solutions?

We have an Angular starter template here to help you get started.

In the meantime, it might be a case where you will need two different searches and use two different sets of filters, however, we will be able to provide a better solution once we’ve seen your code.

Let us know when you get the codesandbox ready!

Thanks I will do that. In the mean time, I was able yesterday to pass filters through the ais-configure component (I hard-coded them), my problem now is I need a way to get the internal filterFacets and values from the refinement-lists (filters) inside the other search to keep them in sync.

Hi @ismael,

Glad to hear you made one step forward. If you continue to need assistance, please share the codesandbox with minimal code to reproduce your issue. We’ll be able to take a look and give best effort guidance from there.

Thanks!

Thanks! Just in case somebody has the same problem what I did is create 2 searches and put the filters inside the list search. Then on the searchFunction on the list search I did this:

searchFunction: (helper => {
      const filters = [];
      for (let facet in helper.state.disjunctiveFacetsRefinements) { 
        const values = [];
        helper.state.disjunctiveFacetsRefinements[facet].forEach(value => {
          values.push(facet + ':' + `"${value}"`);
        });
        filters.push(values.join(' OR '));
      };
      this.filters = '(' + filters.join(') AND (') + ')';
      helper.search();

    }).bind(this)

Here is the pseudo code for my template:

<ais-instantsearch [config]="configResultMap">
    <ais-configure [searchParameters]="{ filters: filters }"></ais-configure>
      <ais-hits>
        ...
      </ais-hits>
  </ais-instantsearch>

  <ais-instantsearch [config]="configResultList">
        ... // filters
        <m-refinement-list attribute="filter_1.name"></m-refinement-list>
        ... // end filters
       <ais-configure [searchParameters]="{ hitsPerPage: 10, filters: filters }"></ais-configure>
       <ais-hits> </ais-hits>
       <ais-pagination></ais-pagination>
</ais-instantsearch>

So both searches share the same filters but the map search brings all the results instead of only the page.

Let me know if you feel that there is a more “Algolia way” for doing this.

Regards.

Thanks for sharing what you did @ismael, it makes sense to me!

@maria.schreiber I still have a problem if you can help me.

When I add the Map component (as it is in algolia documentation) none of the datapoints appear in the map and when I debug it, the state is empty. This is my component and and is placed inside the map search.

import { Component, forwardRef, Inject } from "@angular/core";
import { BaseWidget, NgAisInstantSearch } from "angular-instantsearch";
import { connectGeoSearch } from "instantsearch.js/es/connectors";

@Component({
  selector: "m-algolia-geo-search",
  template: `
      <agm-map
  [latitude]="center.lat"
  [longitude]="center.lng"
  >
  <agm-marker
    [latitude]="item._geoloc.lat"
    [longitude]="item._geoloc.lng"
    [label]="item.name"
    *ngFor="let item of state.items || []"
  ></agm-marker>
</agm-map>
    `
})
export class AlgoliaGeoSearchComponent extends BaseWidget {
  state: {
    clearMapRefinement: Function;
    hasMapMoveSinceLastRefine: Function;
    isRefineOnMapMove: Function;
    isRefinedWithMap: Function;
    items: { name: string; _geopoints: { lat: number; lng: number } }[];
    refine: Function;
    setMapMoveSinceLastRefine: Function;
    toggleRefineOnMapMove: Function;
    position: object;
  };

  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super("GeoSearchComponent");
  }

  get center() {
    if (this.state.items && this.state.items.length > 0) {
      const [first] = this.state.items;
      return first._geopoints || { lat: 0, lng: 0 };
    }
    return { lat: 0, lng: 0 };
  }

  public ngOnInit() {
    this.createWidget(connectGeoSearch, {});
    super.ngOnInit();
  }
}

Hi @ismael,

Thanks for sharing this code snippet with us and sorry for the trouble you are experiencing while trying to use the Map component.

To help us reproduce and debug the exact issue you are having, do you mind adding your code in a codeSandbox that we can both look at?

You can use this boilerplate Angular InstantSearch sandbox and modify it just enough to reproduce the issue: https://codesandbox.io/s/hopeful-mirzakhani-qmey9.

Thanks!

Ok, made it work. But please answer me this. Why do you have a React Turism example and non for Angular. I pass the parameters to the angular component as to refine the search when the maps moves and is not doing nothing. The only thing remotely similar that I found is this:

that is from one of your engineers and ironically she did not use algolia geoSearch API.

Basically what I am trying to do is to refine the results when moving inside the map.

Hi @ismael,

Thanks for bringing this up:

Why do you have a React Turism example and non for Angular.

This is likely because of creating the libraries (e.g., Angular, React) and then the associated examples at different times, therefore the examples worked on by the team as demos unfortunately did not overlap.

Can you provide a simple angular example on how to refine map search when moving in the map?