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, 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
line_animation_time_on_init 3500 Any value greater than 0; realistically any value below 100 will mean the route will draw immediately. The number of milliseconds (i.e., hundreths of a second) to take when animating the map's route when the map is first loaded
line_animation_time_on_replay Max of 3500 or M divided by 5, where M is the number of meters in the route. Any value greater than or equal to 1000 The number of milliseconds (i.e., hundreths of a second) to take when animating the route when the map's replay button is triggered by a user.
line_color 0066ff Can be any valid 3-digit or 6-digit hex color. The color of the line color used by the map.
line_opacity 0.5 The line opacity (i.e., transparency) for the route. Any value from 0 to 1.
markers true true, false, t, f Whether to show point of interest markers when the map loads.
marker_shape pin Either "pin" or "circle" The shape of any point of interest markers.
outline_color Slightly darker than the `line_color` value. (Note that outline_color does not visually appear unless the `outline_opacity` is changed from its default of 0, i.e., invisible.) Any valid 3-digit or 6-digit hex color. The outline color for the route's line (see `line_color`)
outline_opacity 0, meaning completely transparent. The opacity (i.e., transparency) for the route line's outline. Any value from 0 to 1.
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.