#community-help

Geosearch Formatting Issue using Angular-InstantSearch

TLDR Kenneth was having trouble with geosearch formatting using Angular-InstantSearch. Jason suggested using ais-configure widget and aroundLatLng and aroundRadius parameters, which solved the problem. Additionally, Jason provided guidance on configuring the geopoint field.

Powered by Struct AI
raised_hands1
slightly_smiling_face1
6
19mo
Solved
Join the chat
Feb 15, 2022 (19 months ago)
Kenneth
Photo of md5-507fd46b8d739b5201f89b33f1e4a216
Kenneth
08:56 PM
Hey just wondering if anyone has run into geosearch 'formatting' issues?
Submitting this (using Angular-InstantSearch widgets):
searchParameters = {
  hitsPerPage: 10,
  q         : '*',
  query_by  : 'title',
  facetFilters: ['locationCoordinates: (44.3387557, -79.6795558, 1000.1km)'],
}

And getting this:
Value of filter field location: must be in the (-44.50, 170.29, 0.75 km) or (56.33, -65.97, 23.82, -127.82) format.

I get this error while using instantsearch-adapter. Other search parameters work just fine (ex. hitsPerPage)
Hitting the server with curl requests yields either the same error or 'bad request'. Fields are set as facets, and I've tried every possible combination of quotes, backticks, brackets, spaces, decimal points, etc I can think of.

PS. feel free to hit me with Angular related Typesense questions 🙂
Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
09:40 PM
Kenneth For geosearch, you want to use the ais-configure widget and then use aroundLatLng and aroundRadius parameters as described here.
09:41
Jason
09:41 PM
The adapter will then take care of translating those into typesense queries
raised_hands1
Kenneth
Photo of md5-507fd46b8d739b5201f89b33f1e4a216
Kenneth
10:22 PM
That seems to have done it! I must have been trying to convert the examples too literally and didn't see the aroundLatLng and aroundRadius parameters while searching.
The only issue I had was figuring out how to specify the name of the field to a value other than '_geoloc'. For now I simply made by schema use the field name ais expects ("_geoloc").

For future inquiries, here is what I ended up doing:

schema:
myCollection = {
  'name': `${snapshot.id}`,
  'fields': [
    {"name": ".*", "type": "auto"},
    {'name': '_geoloc', 'type': 'geopoint', 'facet': true},
    {'name': 'category.lvl0', 'type': 'string', 'facet': true},
    {'name': 'category.lvl1', 'type': 'string',
      "optional": true, 'facet': true},
  ],
} as CollectionCreateSchema;

component.ts
// region Typesense Configuration
config = {
  indexName: 'events',
  searchClient
} as InstantSearchConfig;

searchParameters = {
  hitsPerPage: 10,
  q         : '*',
  query_by  : 'title',
  aroundLatLng: '45.406431, -78.6848739',
  aroundRadius: 1000
}
// endregion

component.html
<ais-instantsearch [config]="config" (change)="setHits($event)">
  <ais-configure
    [searchParameters]="searchParameters"
  ></ais-configure>

  <ais-search-box [searchAsYouType]="false"></ais-search-box>
  <ais-geo-search></ais-geo-search>

  <ais-hits>
    <ng-template #searchResults let-hits="hits" let-results="results">
      <div *ngFor="let hit of hits">
        {{hit.title}}
        <button (click)="likeEvent(hit.eventId)">Like</button>
      </div>
    </ng-template>
  </ais-hits>
</ais-instantsearch>

Jason
Photo of md5-8813087cccc512313602b6d9f9ece19f
Jason
11:02 PM
Kenneth Here's how you configure the name of the geo lat/lng field when instantiating the adapter: https://github.com/typesense/typesense-instantsearch-adapter#geosearch
Kenneth
Photo of md5-507fd46b8d739b5201f89b33f1e4a216
Kenneth
11:43 PM
🤦‍♂️ I totally read that earlier and missed it! Thanks
slightly_smiling_face1