Location Search with Miles Radius Filter

Hi,

I’m using Laravel and InstantSearch JS (previously Vue InstantSearch).

I’m currently collecting a non-specific location from users e.g. Brighton, Nottingham, etc.

A place, not an address.

I want users using the search to find profiles by location (which they can currently do) however I want searching users to increase the radius of the location search e.g. within 5 miles, within 15 miles and so forth.

So if a user searches Nottingham and one of the profiles has entered a location within 5 miles of Nottingham and the search user selects the “within 5 miles” option in a purposed second filter that profile should appear in the search (like the Right Move example below).

I hope this makes sense and thank you in advance for any help.

Alex

What system do you already have in place?

It would be helpful to reproduce what you have in this sandbox.

I’m currently working on rebuilding this interface/search but this was the last launched search page.

https://esbc-beta.dsd-net.com/catalogue

As you can see on this page you can use the search bar to search profiles by location.

I still want to do that but I want to increase the radius for the location to show the profiles that fit in the radius from the original location entered (I hope that makes sense).

I can’t recreate this on CodePen.

Hi @alex8,

I believe this documentation may help.

If that doesn’t help can you provide a sample record that you are using in Algolia and a code snippet of the search query?

Hi @cindy.cullen,

Thanks for the reply this looks great.

Any advice on how I could implement this using InstantSearch JS?

Hi @alex8,

aroundRadius and aroundLatLng are search parameters so you can set them in InstantSearch using the configure widget.

Happy searching!

Hi @marie.gillier,

Thanks for the reply.

I’ll give this a try and see if I can get it to work how I’d like.

I’d imagine the best way would be to set up an input that uses Algolia Places for users to search / enter a location.

Then use the lat & long that “Places” returns from that location for the search radius.

Hi @alex8,

Yes, this is an option, but if you do not want for your users to input their location manually through an input, you can also use aroundLatLngViaIP instead of aroundLatLng: https://www.algolia.com/doc/api-reference/api-parameters/aroundLatLngViaIP/

Hi, @marie.gillier,

Thanks for your reply.

I’m wondering can the configure widget be updated by an Algolia places input as part of the InstantSearch?

Let’s say a user uses the places input to search for Birmingham could this be converted to lat & long to be used by the configure widget (as part of the instant search)?

Similarly, a separate select input that contains various miles radius (with 5 miles, within 20 miles, etc) if a user selects one of these could they be used by the configure widget (as part of the instant search)?

Last question (I’m hoping this is possible).

I’ve been reading the Geo search docs for Algolia https://www.algolia.com/doc/guides/managing-results/refine-results/geolocation

I need to convert the locations I’m collecting from just a name e.g. Manchester to a lat and long value to work as part of the configuration widget.

I’m also collecting a travel distance in miles value for my search results, for example, a search record might have their location set to Brighton (I’ll change this to lat and long value) and a travel distance of 30 miles.

I’m wondering is it possible for when a user searches a location for example within 30 miles of Brighton and a record has their travel distance set to 30 miles their record will show up in the results.

Apologies for the complexity of all of this and thanks for your continued help.

If you need me to explain any of this again, please let me know.

Hi again Alex!

Sorry, I didn’t see your reply earlier!

Yes, you can use Places for the user to input the location from where to do the geo-search with instantSearch.js. You will not need to use the configure widget in this case. The documentation on how to achieve this can be found here:

I replied to your second question in the new thread you opened (Format location data to include a distance radius).

Have a nice weekend!

Hi, @marie.gillier,

Thanks for your reply!

I’ve spotted this Place InstantSearch js widget before but I’ve never been able to get it to work with my search.

How would I set up this widget to work with InstantSearch js?

instantsearch.widgets.places({
    container: '#location'
 }),

I’ve included the above inside of my search.addWidgets() function and I receive the following google console error message:

Uncaught Error: The placesReference option requires a valid Places.js reference.

Looking at the Places docs

My Places instance needs an appID and an apiKey is that correct?

ps, I’ve included the “https://cdn.jsdelivr.net/npm/places.js@1.18.1/dist/cdn/placesInstantsearchWidget.min.js” Places widget through a CDN.

Thanks for your continued help.

Good evening Alex!

Ahh, I see what is happening! Starting with InstantSearch.js v4, you need to add the places library to the widget through a placesReference param, like shown in this snippet: https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/#placesjs-widget

Does this solve your issue?