Map & elevation chart API

The map & elevation chart API provides a means for you to embed any given race into your website with a simple HTML iframe code. For instance, the placing the code

<iframe src="https://www.hellodrifter.com/events/sean-o-brien-2017/races/67/map_with_chart?line_color=f00&skin=outdoors" width="100%" height="500px"></iframe>

in your website would produce something like this:

The URL to access the map & elevation chart API for any given race can be found by clicking the "Embed map code" link on the sidebar of a race page.

You'll notice that the hello,drifter link in the iframe tag has a ? followed two parameter/value pairs separated by a & character: line_color=f00&skin=outdoors . These parameters tell hello,drifter to (1) make the line color red ( ff0 is a hexidecimal code for a certain red), and (2) use the 'outdoors' map skin.

The below table describes the available parameters using the map & elevation chart API.

Parameter Default value Available values Description
markers true true, false, t, f Whether to show markers when the map loads.
line_color 0066ff Any valid 3-digit or 6-digit hex color. The color of the line color used by the map.
skin run-bike-hike Any recognized Mapbox tile skin: streets, light, dark, satellite, streets-satellite, wheatpaste, streets-basic, comic, outdoors, run-bike-hike, pencil, pirates, emerald, and high-contrast . The tile skin to be used by the map.
unit_system "null", meaning that the system will display units in the system it believes is appropriate for the user based on the requesting IP address (not always accurate) Either "metric" or "imperial" The system of measurement (kilometers/meters vs. miles/feet) to be displayed to the user.