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.
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.6).
height (pixels): The height of the entire box in which the profile is drawn. (There are margins of 14 pixels above and 18 pixels below the data area.) If the width supplied is too wide, it is adjusted to 100% of the area available.
width (pixels or %): The width of the profile box, in pixels. (There are margins of 44 pixels to the left and 14 pixels to the right of the data area, plus another 18 pixels for the close box.)
/
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.)

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 44, 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.

/
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.

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;



Return to the Tutorials index


Return to the main GPS Visualizer page