Add Location to your Algolia Search

Stephan Smith
Mechanics of Search
5 min readOct 27, 2019

--

This is a quick summary of how to add a location to your search index. This task involves updating your content type, or related content type, updating the names, adding real data to your Takeshape content, and finally updating your Heroku Webhooks.

TLDR — This article and the Mechanics of Search are materials for an ongoing class at Lesley University. The class is designed to take design students through the process of creating a search engine using Algolia and Takeshape.

1. Add Location to your content type

The first step is to set up an object that contains a latitude and longitude value. These values will, when pushed to Algolia tell the index how to handle GeoSearch searches.

Go into your content type and add an object.

Remember to rename the object so that it makes sense when the webhook looks for the value. I recommend you name it ‘Geo Location’, with a variable name of ‘geoLoc’.

New Object content-type field for the _geoLoc value.

Now add in two ‘number’ elements to the new object, one for longitude and one for latitude.

2. Add some Location Data

Now that you have added the correct fields to your content type, you need to add some actual locations to your data. In the Formaggio site, I added the location to the ‘Agents’ content type, since Cheeses do not actually have a location. The Makers, Sellers or Agers have physical locations in the real world.

Example of adding lat long values to Cabot Cheese Maker.

Update the Heroku Webhook to Include Geo Location

Confirming your changes

When I run the API explorer for an Agent, (content-type: ‘Agent’), I can see that, yes I have a field call geoLocation, and it contains the ‘lat’ and ‘lng’ fields. Additionally, I can see that when I run the query, I see the values I enter are showing.

Which Content-Type need GeoLocation?

This is a great question and might differ from project to project. I decided to add the location to the ‘Agent’ content type and not the ‘Cheese’ content type. This is because Agents have actual locations, and cheese is just cheese. (Right?)

I have a Takeshape `relationship` that links a cheese to a maker. This means that when I run a query the location will come along with the maker into the cheese query.

Below is a query for a single cheese, and it you look at the agents field, you will see that the Geo Location for the Agent, is accessible in the Cheese. When this data is pushed to Algolia, the location will be included, which will allow GeoSearch.

Cheese query with GeoLocation for the Agent included.

Updating the Heroku/Takeshape Webhook

The final steps in adding GeoLocation to your Algolia index, are to update your Heroku code. To do this final setup you need to edit the heroku/routes/webhook.js file in your git repo.

Here is a link to the changes I made in the Formaggio code on Github. (Review my webhook).

A snippet of code added to the webhook query.

Once you have the code updated, you need to push the code to Heroku and confirm that it's working.

Show Algolia you have a location

Algolia is expecting to see the location data for each search object in a _geoloc field. Unfortulity Takeshape does not allow fields that start with _geoloc. So to solve this the webhook needs to find and rename your new Geo Location option so that sits at the root of the object.

To do this, you need to use the following code. This will copy the location object into obj._geoloc.

There are a few things to note here, first, the agents a relationship to the cheese, so to move the location up to the root, I first needed to pull the value from the first agent in the relationship. Since we can not be certain that every cheese has an agent, we need to check that we have at least one agent, and that agent has the ‘geoloc’ field.

Once you push the code to heroku and update a value in Takeshape you can confirm that the data is pushing to Algolia correctly by looking at the edited value in Algolia.

Snippet from an Algolia object with the new _geoloc field.

Conclusion

Now that you have both Takeshape and Algolia upgraded you can use this new data to show locations on a map or do proximity search. The following reference shows the geoSearch widget.

--

--

Stephan Smith
Mechanics of Search

Startup founder — Boston based full stack developer with a strong focus on rapid prototyping, server-less solutions, and testable code.