See the Code

Check out the Javascript Documentation

Including the Activity Player on your page is super easy. It’ll get even easier once we simplify the javascript includes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
 <head>
 	<style type="text/css" media="all">@import "./base.css";</style>
<!-- need to do this as the page loads - can't wait for the page to finish loading -->
<script src="./GoogleMapIncluder.js" type="text/javascript"> </script>
	<script src="../../lib/behaviour.js" type="text/javascript"> </script> 	<script src="../../lib/prototype.js" type="text/javascript"> </script>
 	<script src="../../lib/swfobject.js" type="text/javascript"> </script>
	<script src="../maps/MapControllerBase.js" type="text/javascript"> </script> 	<script src="../maps/MapControllerGoogle.js" type="text/javascript"> </script>
 	<script src="./ActivityPlayer.js" type="text/javascript"> </script>
 	<script src="./Garmin.Player.js" type="text/javascript"> </script>
 	<script src="./Garmin.Chart.js" type="text/javascript"> </script>
 	<script src="./Garmin.Map.js" type="text/javascript"> </script>
 	<script src="./Garmin.DataGrid.js" type="text/javascript"> </script>
 </head>
<body>
	<div id="activityContent">
 	<div id="buttonPanel" class="swfContainer"> </div>
 	<div id="chartPanel" class="swfContainer"> </div>
 	<div id="dataGridPanel" class="swfContainer"> </div>
<div id="activityMap" class="map"> </div>	<form id="controlForm">	<div>		<input type="checkbox" id="panMapOnMarkerMove" title="Pan Map When the Marker Moves?" checked="checked" /><label for="panMapOnMarkerMove">Pan Map On Marker Move</label>
<input type="hidden" id="file" value="AxmExample.xml" />

<!-- hardcoding values at the moment since we aren't exporting them yet					<core:set var="episodePkValue" value="${episodeExportForm.episodePkValues[0]}”/>		<input type=”hidden” id=”server” value=”${trailWebAddress}” />
<input type=”hidden” id=”episodePkValues” value=”${param.episodePkValues}”/>
–>
</div>
</form>
</div>
</body></html>

So how does this thing work?

For the easiest fullscreen GoogleMaps you’ll want to make sure you’re using standards compliant mode in your browsers - the first line ensures that. To draw lines in Internet Explorer, you must include microsoft’s vml namespace, handled in line 2.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">

The head section loads all of our Javascript files. At the moment, I’d say there’s quite a few of them. In the future we’ll write them out to the page for you instead of having you have to list them all

 <head>
 	<style type="text/css" media="all">@import "./base.css";</style>
<!-- need to do this as the page loads - can't wait for the page to finish loading -->
 	<script src="./GoogleMapIncluder.js" type="text/javascript"> </script>

<script src="../../lib/behaviour.js" type="text/javascript"> </script> 	<script src="../../lib/prototype.js" type="text/javascript"> </script>
 	<script src="../../lib/swfobject.js" type="text/javascript"> </script>

<script src="../maps/MapControllerBase.js" type="text/javascript"> </script> 	<script src="../maps/MapControllerGoogle.js" type="text/javascript"> </script>
 	<script src="./ActivityPlayer.js" type="text/javascript"> </script>
 	<script src="./Garmin.Player.js" type="text/javascript"> </script>
 	<script src="./Garmin.Chart.js" type="text/javascript"> </script>
 	<script src="./Garmin.Map.js" type="text/javascript"> </script>
 	<script src="./Garmin.DataGrid.js" type="text/javascript"> </script>
 </head>

Next is the good stuff. The div activityContent is our container - it holds everything and will stretch to the full size of the window. It also contains the divs where our swf’s will go. You can see they’re cleverly labeled w/ the class swfContainer.
Then comes the map and a form with some hidden values in it. To load an activity into the player, a form field w/ the id of “file” must be present. This should point to a location containing a valid AXM document.

<div id="activityContent">
<div id="buttonPanel" class="swfContainer"> </div>
<div id="chartPanel" class="swfContainer"> </div>
<div id="dataGridPanel" class="swfContainer"> </div>
		<div id="activityMap" class="map"> </div>
		<form id="controlForm">
<div>
<input type="checkbox" id="panMapOnMarkerMove" title="Pan Map When the Marker Moves?" checked="checked" /><label for="panMapOnMarkerMove">Pan Map On Marker Move</label>
<input type="hidden" id="file" value="AxmExample.xml" />

<!-- hardcoding values at the moment since we aren't exporting them yet					<core:set var="episodePkValue" value="${episodeExportForm.episodePkValues[0]}”/>
<input type=”hidden” id=”server” value=”${trailWebAddress}” />
<input type=”hidden” id=”episodePkValues” value=”${param.episodePkValues}”/>
–>
</div>
</form>
</div>

Web Services