On <Location> collection page, show 5 nearest <Locations> using latitude & longitude

Hi all. Brand new to Webflow - seems almost perfect, but I have one question that will make it or break it for my project.

I plan to have a CMS collection page for Locations (e.g. hotels). Each location would have latitude and longitude fields populated.

On an individual hotel’s page I’d want to pull through the 5 other locations that are closest in proximity to that hotel - i.e. from find nearest 5 .

I don’t need it to be route map based - I’d be happy just querying the CMS to find the locations with coordinates closest as the crow flies (e.g. using a Javascript Haversine formula).

Is this possible?

Thank you.


Here is my public share link: LINK
(how to access public share link)

1 Like

Hi James, welcome to the forum! :smiley:

I assume there a lots of hotels in lots of cities?

If you would want to implement it EXACTLY like you stated, you will have to calculate distance between the coords and for that you would have to fetch each item (hotel) from the collection. The “live” page only has data on their very item, not all the items. This will require some custom code and probably also utilization of WF’s API. At least I think so!

Maybe you could just give each hotel the city it’s in, and just show the first 5 hotels in that city with native nested collections feature. This won’t show the actual 5 nearest hotels but you could work with custom filtering to at least have some control…

How good are you with Javascript?

1 Like

Hi Fabian - thank you for the welcome and for the great reply!

I’m pretty good at stealing Javascript :wink: I can do a little bit but I’m no pro.

You’re correct, there would be many locations. The site really relies on proximity (and ideally would even show the distance to each). Otherwise I’d happily use the nested collection method you mention - I’d considered that and I’m all for simplifying.

Back to the drawing board I guess! I don’t know if I should say this, but I’m also considering bubble.io. However, Webflow is so appealing I’m reluctant not to use it.

Really appreciate the help.

1 Like

I’m pretty sure bubble won’t provide the ability to calculate distance between coordinates naively :slight_smile:

Here’s the documentation for getting all items from a collection:
https://developers.webflow.com/#get-all-items-for-a-collection

It’s json so you can sort it by calculating the distance of all other items to the current one. There’s plenty of examples to steal that do just that!

You could start with the most basic “straight line” distance (it’ a curve ;D)
https://stackoverflow.com/questions/18883601/function-to-calculate-distance-between-two-coordinates

If you want to consider roads and directions, you would be best advised to use the google maps api, they provide functions for doing that.

Consider doing heavy optimization work if you plan on calculating hundreds of items against each other combined with api requests and nerve wrecking race-conditions :sweat_smile:
Maybe still give them a city to only compare those that match the city or other optimizations!

1 Like