List pages based on geo location

We’re managing several sites that are heavily based on geo locations. There are city pages as well as pages with points of interest (POIs) like sights or hotels. Now we want to list POIs on the city pages according to their distance calculated by the geo coordinates (latitude, longitude) given in the front matter.

Some examples:

  • list all hotels next to Stonehenge
  • list all POIs that are no more than 5km away from Tower Bridge
  • while on a POI page, show the three nearest POIs

Right now we’re using Wordpress with our own plugin doing weird SQL queries. Is there a way to achieve the same with Hugo?

Not with Hugo alone since Hugo is a static site generator. That said, you can find a user’s location on the client using the geolocation API. It has pretty solid browser support, but, to my knowledge, this will require explicit permission from your end user.

Fundamentally, this seems more like a server-side responsibility, which would require a service outside the scope of Hugo…which really just builds the content out in HTML (and any format you want now with custom outputs :smile:).

The first service that sprung to mind was Netlify, which features Geo-IP and (don’t quote me) is working on integrating said feature into additional benefits to users via A/B testing…

That said, if this idea is that you want to organize your site by location and leave it up to the user to navigate to a particular region, you can do this according to the way you structure your content and/or taxonomies, but I get the vibe that you’re looking for something a bit more automatic…

Thank you for your answer. I’m aware that Hugo is a static site generator, so my question was not about geotargeting users and delivering dynamically tailored content. Sorry for being not clear enough.

I’ll try to give a better example. I’ve got a site about travelling to London. This site lists several POIs like Tower Bridge or Tate Gallery. Every POI is a page with latitude and longitude. Also I have a list of hotels, each again with latitude and longitude. While displaying a POI page, it should list all hotels within a given distance from this POI.

Of course I could use a taxonomy to annotate every hotel page with the POIs nearby, but this is a lot of work. Especially when new POIs are added later on.

What I think I have to do is something like that:

  • iterate over all hotel pages
  • for every hotel page: calculate the distance between my given POI and that hotel page. Dismiss the hotel if to far away.
  • sort botel pages by distance

Is there any reusable code for such a task? Or has anyone an idea for a better approach?

I would have to see your source organization to get a better idea, but thanks for clarifying that this still fits into a SSG model. (Please excuse the previous comments re: dynamic, geographically driven content.)

If the coordinates are coming from a data file (i.e., in data/), you might be able to use the intersect function to find the sorta “join” between the values in a content file and those in said data file, but this is pretty high-level spitballing on my part…

Not to my knowledge, but there are a lot Hugo sites in the wild. If you’ve committed to trying Hugo as a framework, you might get better results by diving into the templating and then doing the following once you hit a snag:

  1. Open a new thread on the forums
  2. Include a pointer to a source repo
  3. Include examples of the templating code, any errors you’re getting, and your desired output

Sorry I can’t be of more help…

Modelling cities and POI shouldn’t be a problem with Hugo. The template functions should also be powerful enough to filter the pages. The most important aspect that needs to be solved is the distance calculation.

I guess lat/long data can be treat as their own data type, where many edge cases have to be taken into account, i.e. it takes special template functions to handle them.

It would be interesting to know which requirements you expect in this department.

1 Like