Map & elevation chart API

The map & elevation chart API allows you to embed any given race into your website with a simple HTML iframe 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 iframe tag has a ? followed by few parameter/value pairs separated by & characters: line_color=f00&outline_color=fff&outline_opacity=1&marker_shape=circle&skin=outdoors . Each of these parameters tells hello,drifter to customize the map:

  • line_color=f00 makes the line color red ( ff0 is a hexidecimal code for a certain red).
  • outline_color=fff makes a white outline around the line ( fff is a hexidecimal code for white).
  • outline_opacity=1 defines how transparent we want the outline to be, with "1" signifying it should be fully visible.
  • marker_shape=circle tells hello,drifter to make the markers into circles instead of the standard "pin" shape.
  • skin=outdoors tells 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.
line_progress "null", meaning that hello,drifter will ignore this parameter The number of meters of the route to show. This is useful to display a personalized map for a user who may have completed only a certain portion of a route. Note that this affects only the "line" attribute; the "outline", if shown on the map by specifying the "outline_opacity" (discussed below), will still show the entire route. For best results, use this feature in conjunction with "outline_opacity". Any integer greater than or equal to 0, reflecting the number of meters of the route "line" to show, beginning from the start of the route.
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 line_color parameter)
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 hello,drifter will display units in the unit 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.