Build location-based pages with HubDB
HubDB supports locations as a field type, which enables you to build location-based pages on HubSpot's CMS.
In this tutorial, learn how to create a page with a map on HubSpot’s CMS using HubDB. You can reference more detailed HubDB documentation here.
- Approximately one hour.
- Some prior knowledge of HubSpot's CMS, HTML and CSS will be needed to customize your page.
When you create a column on a HubDB table with the Location field type, you're designating this column as a place to store coordinates that point to a specific location in the world.
A location is often represented as coordinates (a pair of decimal numbers) such as 42.36, -71.11. The first number is the latitude, or the degrees North or South of the equator. The second number is the longitude, or the degrees from the Prime Meridian. The Prime Meridian is an imaginary line starting at the North Pole, running through Greenwich, England, France, Spain, Algeria, Ghana and ending at the South Pole. Longitudes east of that line are positive, west is negative. At 180 degrees, the positive and negative degree values meet.
With the Global Positioning System (GPS), you can determine the location of a visitor to your site. Mobile phone devices have GPS chips that can receive GPS signals. These devices can also use nearby Wi-Fi networks or mobile network towers to determine their location. Laptop and desktop computers typically use Wi-Fi to determine their location.
This will first ask the visitor if it's OK for the page to get the visitor's location, and then respond with the coordinates. The response may appear like the following:
Once you know the visitor's location, you can help them find different locations in their general area.
Create a new table in HubDB and add two columns: 'location' (type: Location) an 'cuisine' (type: Text).
It should look like this:
You can build your own database of local eateries or you can import data for lunch spots near HubSpot in Cambridge, Massachusetts. Here's a sample file you can use: lunch-spots.csv. Upload the file to HubDB, and map the columns as shown.
Once you finish the import, you should have a list of eateries that looks like this:
Publish your table, make a note of the table ID (the last number in the URL) and you're ready to start using your data.
Create a simple list for this data using HubL and the HubDB functions.
In the design manager, create a new template using the code editor. You can name it something like "lunchspots.html".
Add this code just after
<body> tag, using the table ID you noted above.
When you preview the template, a simple list of restaurants and a description of their cuisine should appear. If nothing appears, double-check that your table ID is correct and that the table is published.
Your listing page can also double as a detail page. You can link the restaurant name to a page specific to that restaurant. Make sure to leave in the
set table_id... line here and in all other code samples on this page.
Each row will now be linked back to the same page with a query string parameter in
row_id which is the unique ID of this row. Note the use of
request.query to make sure any existing query string parameters are preserved on the current URL.
Now we'll add the details:
The if statement (
) determines whether to show the details or skip down to the block to show the listing. It will look something like this:
You can also ask for the visitor's location, so you can show them how far away each restaurant is. Change your code to the following.
This code introduces an
if statement. In the default case, it asks the visitor to share their location. If they accept, it redirects the page with
lon query parameters. The second time the page loads, it shows the list, now with a third column that is the calculated distance from the provided location.
row.location just returns the restaurant's coordinates, HubSpot uses the
geo_distance filter to calculate the distance. It takes the visitor's latitude, longitude and the units of the distance. The units default to meters ("M"), but also accept kilometers ("KM"), miles ("MI"), and feet ("FT"). Lastly, HubSpot round the number a bit to make it more readable.
If the list got much bigger, it would be helpful to show the closest restaurants first. You can do so by adding sorting options to the
hubdb_table_rows function. Change this section as follows:
Now the list will be sorted by the distance between the location column and the visitor's coordinates. The key is building the
geo_distance ordering function which ends up looking like
orderBy=geo_distance(42.37,-71.076). To sort the list in reverse order, with the restaurants the furthest away first, you can prepend a
- (minus sign) to
You can filter the list by distance as well. To find all restaurants less than one mile away, use
geo_distance as a query filter.
This constructs another parameter to the HubDB query which looks like
geo_distance query filter takes four arguments. First is the location column that you want to filter by. The next three parameters are latitude, longitude, and distance units. After the
geo_distance operator, specify the filter operator, "less than" or "lt". Finally, after the equal sign is the value to compare with the result of the function.
You can Google Maps APIs to create a visual map of the list. Replace the block of code inside the second if condition (
elif request.query_dict['lat']) with this:
Add in your table ID and your Google API key and you should now see an interactive map in place of the listing. Your map should look like this (with your blue origin marker wherever you are).
That's it! You've built a page that uses a visitor's location to find a local place to eat. The key is the
geo_distance function which can be used to filter, order, and calculate the distance. This simple page could be enhanced by adding a toggle between the listing and map view, a map and more info on the details page, and perhaps a link to each restaurant's website.
If the visitor's browser cannot determine their location, or they want to look for places in a different area, you can allow them to search for a location using the Google Maps Geocoding API.
Thank you for your feedback, it means a lot to us.