GPS Visualizer

This map was created using GPS Visualizer's do-it-yourself geographic utilities.

Please wait while the map data loads...

Dynamic elevation profiles inside HTML maps

When you create a map (using the Google Maps or Leaflet API) from a file that includes elevation data, you can draw an elevation profile right inside the map. (If your original file does not contain elevation data, you can ask GPS Visualizer to add elevation data from a DEM database.)

Note that if you hide some of the tracks using the checkboxes in the map's "track list," the hidden tracks will not be drawn when you re-draw the profile, and the axes will adjust to the remaining track(s). Try it: Hide the red and green tracks, then re-draw; then show all tracks, and re-draw again.

The appearance and behavior of this on-the-fly profile is controlled by a parameter in the map's JavaScript code called gv_options.profile_options. (See "How to adjust your map," below, for instructions on changing these options.) The following is a summary of the parameters you can change, along with the current values for the map on this page. You can change the values and see the effect on the profile.

visible (true/false): Is the profile visible when the map first loads?
icon (true/false): Is there a profile icon near the bottom left corner of the map? (If not, you can draw a profile from the Utilities menu in the upper right corner.)
units ('metric'/'us'): The units used in the profile_options: 'metric' for kilometers+meters, 'us' for miles+feet. Note that you can also toggle this interactively by clicking on any of the numbers in the x- or y-axis of the profile.
waypoints (true/false): If the map contains waypoints that are on or near the tracks, are they drawn on the profile? (If you enable this feature, you might want to increase the height and margin_top settings.) More waypoint-related options are detailed near the bottom of this page.
filled (true/false): Is the profile drawn as a filled shape, or just a line?
stroke (pixels): The thickness of the line, if filled is set to false.
opacity (decimal): The opacity of the filled shapes or lines, from 0.01 to 1 (default 0.7).
height (pixels): The height of the entire box in which the profile is drawn. (There are internal margins of 14 pixels above and 18 pixels below the data area.)
width (pixels or %): The width of the profile box, in pixels. (There are margins of 42 pixels to the left and 14 pixels to the right of the data area.) If the width specified is too wide, it is adjusted to 100% of the area available.

margin_top/margin_bottom/margin_left/margin_right (pixels): How far from the edge of the profile "canvas" is the drawing area? The defaults (top 14, bottom 18, left 42, right 14) work well for most situations. If the custom margins provided leave no room to actually draw the profile, the defaults will be used instead.
/
y_min/y_max (m or ft): By default, a profile's y-axis will range from the lowest elevation to the highest found in the data. To manually set the minimum or maximum, you can adjust y_min or y_max. The number you enter will be interpreted as either meters or feet, depending on the current setting of the units parameter.
/
x_min/x_max (km or miles): To manually adjust the x-axis, you can adjust x_min or x_max (however, setting x_min to anything other than 0 would be unusual). The number you enter will be interpreted as either kilometers or miles, depending on the current setting of the units parameter.
mouseover (true/false): Does a marker appear on the profile and on the map when you move the mouse over the profile?
click_to_center (true/false): Does the map re-center when you click on the profile?
click_to_zoom (zoom level): The map will zoom in (or out) to the specified numeric zoom level when you click on the profile. (Only works if click_to_center is set to true.)
gap_between_tracks (true/false): If your map contains multiple tracks, and they are not contiguous, setting gap_between_tracks to true will cause a gap to appear between the tracks in the profile; the size of the gap is the distance between the end point of the first track and the start point of the next track. (Segment gaps within a track will always be shown.)

/
anchor/anchor_x/anchor_y: Which edge of the map the profile is "anchored" to (bottom_left, bottom_center, bottom_right, top_left, top_center, top_right), and how many pixels away from the left/right edge (anchor_x) or top/bottom edge (anchor_y) it is, if not centered. The defaults are 'bottom_center', 4, & 30.
background (HTML color code or name): The background color of the entire profile box; the default is #eeffee (pale green).
background_inner (HTML color code or name): The background color of the inner rectangle where the profile data itself is drawn; the default is white.
name_filter (regex pattern): If you only want some tracks to be drawn on the profile (without having to hide them from the map), enter their names here, separated by the pipe character (|). You can also enter more complicated (or more simple) "regular expression" text-matching patterns, if you know how to use them.
waypoint_size (pixels): The diameter (not radius) of the circular waypoint markers; the default is 4 pixels.
waypoint_label_size (pixels): The font size of the waypoint labels on the profile; the default is 10 pixels.
waypoint_label_angle (degrees CCW): By default, the waypoint labels are drawn vertically; i.e., rotated 90° counter-clockwise from horizontal. Enter 0 for horizontal labels, or any other angle you prefer.
waypoint_threshold (proportion or distance): How close a waypoint has to be to the track in order to appear on the profile. The default is 1/300 of the total length of all the tracks, or 0.0033. Set this to a larger number to allow more waypoints into the profile, or smaller to be more restrictive. (You can also provide an absolute distance in meters by adding "m" or "meters" to the number: 100m, for example.)

gv_options.profile_options = {};

How to adjust your map

You can edit the profile options either by downloading your map and editing the source with a text file, or by supplying code in the "Custom JavaScript before the map loads" box in the advanced options of the input form when you first create the map. If you choose the latter approach, be sure to list the full name of each parameter: e.g., gv_options.profile_options.height = 200;

How to put the profile somewhere else

If you'd like the profile to appear in its own box, instead of "floating" inside the map, put a <div> tag somewhere on the page whose id attribute is gv_profile (i.e., <div id="gv_profile" style=""></div>). Any width or height style that you apply to this box will override the width and/or height given in gv_options.profile_options; if you don't give it any styles, the width will default to 100% (that is, 100% of the box's containing element), and the height will be set by gv_options.profile_options.height (default 120).




Return to the Tutorials index


Return to the main GPS Visualizer page