The map & elevation chart API allows you to embed any given race into your website with a simple HTML
code. It also allows you to customize map features to your liking. For instance, placing the code
<iframe src="https://www.hellodrifter.com/events/sean-o-brien-2017/races/67/map_with_chart?line_color=f00&outline_color=fff&outline_opacity=1&marker_shape=circle&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 by few parameter/value pairs separated by
. Each of these parameters tells hello,drifter to customize the map:
line_color=f00makes the line color red (
ff0is a hexidecimal code for a certain red).
outline_color=fffmakes a white outline around the line (
fffis a hexidecimal code for white).
outline_opacity=1defines how transparent we want the outline to be, with "1" signifying it should be fully visible.
marker_shape=circletells hello,drifter to make the markers into circles instead of the standard "pin" shape.
skin=outdoorstells hello,drifter to default to a particular map tile skin called "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 the
|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 of the following values: streets, bright, light, dark, satellite, satellite-streets, outdoors, and run-bike-hike .||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.|