Discover Hikes with the Overpass API, Algolia and Mapbox

Published 5/1/2016

The abundance of regional, state and national parks in North America makes for recreational opportunities that are as rewarding as they are cheap. Going for a walk can be reinvigorating and can even boost creativity according to a Stanford study.

This post introduces the concept of leveraging the Overpass API, Algolia and Mapbox to create a searchable map designed to ease discovery and exploration of amazing hikes that you may have never knew existed.

Services

The Overpass API will allow access to the OpenStreetMap database, according to taginfo there are over 70,000 objects in OSM with the route=hiking tag.

Algolia is a hosted cloud search service that allows searching and customization of how the searches are performed and the order in which the results ranked.

Mapbox Studio is a map design platform for customizing features and styles of the basemap.

Gathering the Data

Overpass QL query for retrieving relations of hiking routes that are within a certain area, in this case I am using overpass-turbo.eu with a manually selected bounding box to send the query to the Overpass API and gather hiking routes in North and South America.

[timeout:900][out:json];

(
   rel
      [type=route]
      [route=hiking]
      ({{bbox}});
);

out center tags;

Use the out action to specify returning just the center coordinate and tags excluding any related nodes or ways since the basemap will contain the trail paths.

{
  "type": "relation",
  "id": 2260059,
  "center": {
    "lat": 37.8483371,
    "lon": -122.5546552
  },
  "tags": {
    "name": "California Coastal Trail",
    "network": "rwn",
    "ref": "CCT",
    "route": "hiking",
    "type": "route",
    "wikipedia": "en:California Coastal Trail"
  }
}, {
  "type": "relation",
  "id": 1354568,
  "center": {
    "lat": 37.8721273,
    "lon": -121.9255748
  },
  "tags": {
    "alt_name": "Diablo Trail",
    "name": "Briones to Mt. Diablo Regional Trail",
    "network": "lwn",
    "operator": "East Bay Regional Park District",
    "ref": "BMD",
    "route": "hiking",
    "type": "route",
    "website": "http://www.ebparks.org/parks/trails/briones_mtdiablo",
    "wikipedia": "en:East Bay Regional Park District"
  }
},
...

Creating a Basemap Style

Using Mapbox Studio a new map style can be created to accentuate park boundaries, park names, hiking trails and elevations while also de-emphasizing other features such as roads.

Preparing the Search Indices

The search indices should contain the attributes that will be used to match any search term expected such as city, state, country and the name of the trail.

The relations retrieved from the Overpass API may not have address information embedded in the tags, in order to improve searchability it will be necessary to geocode each relation based on it's center coordinate.

The geocoding process is simple, for every relation's coordinate find the nearest location from a fixed list of cities and countries and create a new object based on the result. These new results will become the search index. See hike-map/data/index.js as an example.

{
   "_geoloc": {
      "lat": 37.8483371,
      "lng": -122.5546552
   },
   "state": "CA",
   "city": "Muir Beach",
   "id": 2260059,
   "name": "California Coastal Trail"
}, {
   "_geoloc": {
      "lat": 37.8721273,
      "lng": -121.9255748
   },
   "state": "CA",
   "city": "Diablo",
   "id": 1354568,
   "name": "Briones to Mt. Diablo Regional Trail"
}
...

After loading the indices on Algolia add the attributes that will be searched by order of importance.

Show the Results

Based on IP address

Algolia has the ability to filter search results based on the client IP. This search allows an initial set of trails to be displayed and the map to be centered around the user's local area when first loaded.

With autocomplete

Autocomplete is a powerful feature for discovery, the user starts typing and is immediately presented with results. Algolia maintains autocomplete.js that provides a menu of search results as you type which integrates easily with Algolia's search engine.

Source: https://github.com/csbrandt/hike-map
Demo: https://csbrandt.github.io/hike-map/dist/