instantsearch with Angular - How to Geo search ?

Hi! I’m using InstantSearch Service with Algolia V4 and it’s working !

Now I’d like to filter results via IP.

Details :

My index has an attribute called “perimetre” By default, I’d like to GEO filter all results depending on user IP

I found this : https://www.algolia.com/doc/tutorials/geo-search/filter-results-around-a-location/#filtering-around-the-current-user-location

How can I use this with Angular ? Can I configure this directly in my Algolia Dashboard or should I implemente it in my code ? How ?

This is my hits.component.ts :

export class HitsComponent implements OnInit {
  // Define how your component state will look like,
  // and intialize it with an empty hits array
  state: { hits: {}[] } = { hits: [] };

  nbResultToShow = 8;

  constructor(private instantSearchService: InstantSearchService) { }

  ngOnInit() {
    // Create a widget which will call `this.updateState` whenever
    // something changes on the search state itself
    const widget = connectHits(this.updateState);

    // Register the Hits widget into the instantSearchService search instance.
    this.instantSearchService.search.addWidget(widget());
  }

  updateState = (state, isFirstRendering) => {
    // asynchronous update of the state
    // avoid `ExpressionChangedAfterItHasBeenCheckedError`
    if (isFirstRendering) {
      return Promise.resolve().then(() => {
        this.state = state;
      });
    }

    this.state = state;
  }
}

Thanks !

[odecharette]

Hy @bobylito

Many thanks for your answer aroundLatLngViaIP is working !

How if I want to set the aroundRadius depending on data attribute ? I managed to set it in the service :

@Injectable()
export class InstantSearchService {
  search = instantsearch({
    appId: environment.algoliaAppId,
    apiKey: environment.algoliaApiKey,
    indexName: environment.algoliaIndexName,
    urlSync: environment.algoliaUrlSync,
    searchParameters: {
	    aroundLatLngViaIP: true,
	    aroundRadius: 40000 // 40km
	}
  });

  constructor() {}
}

But then, it’s the same radius for all However, I have an attribute called “perimetre” for each hit. How can use it ?

I’ll have a look on your Angular beta link, looks awesome 😃

[samouss]

You can use the ais-configure widget to provide the location to aroundLatLng.