The map & elevation chart API provides a means for you to embed
any given race into your website with a simple HTML
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
tag has a
followed two parameter/value pairs separated by a
. These parameters tell hello,drifter to (1) make the line color red (
is a hexidecimal code for a certain red), and (2) use the 'outdoors'
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.|