Skip to content

Latest commit

 

History

History
88 lines (64 loc) · 2.64 KB

README.md

File metadata and controls

88 lines (64 loc) · 2.64 KB
Raw

#jquery.showgpxtracks

jQuery plugin to show gpx track and altitude graph

##Download

##Usage

###Load from URL("src" attr)

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&language=en&sensor=false"></script>

		<script src='jquery.showgpxtracks.js' ></script>

		<script>
			$(document).ready(function(){
				$('.track').showGpxTracks();
			});
		</script>
	</head>

	<body>
		<div class='track' src='hiking.gpx' style='width:600px;height;400px;'></div>
	</body>
</html>

The server which hosts gpx files have to support Access-Control-Allow-Origin header if the server is on another domain.

###Load from URL(function param)

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&language=en&sensor=false"></script>

		<script src='jquery.showgpxtracks.js' ></script>

		<script>
			$(document).ready(function(){
				$('#track').showGpxTracks('hiking.gpx');
			});
		</script>
	</head>

	<body>
		<div id='track' style='width:600px;height:400px;'></div>
	</body>
</html>

###Load from GPX Text

<html>
	<head>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=geometry&language=en&sensor=false"></script>

		<script src='jquery.showgpxtracks.js' ></script>

		<script>
			$(document).ready(function(){
				var gpx='<?xml version="1.0" encoding="UTF-8"?><gpx version="1.1" xmlns="http://www.topografix.com/GPX/1/1"><trk><trkseg><trkpt lat="35.365968055555555" lon="138.73368555555555"><ele>3680.0</ele></trkpt><trkpt lat="35.36499416666667" lon="138.73331305555556"><ele>3712.0</ele></trkpt><trkpt lat="35.36499416666667" lon="138.73331305555556"><ele>3712.0</ele></trkpt><trkpt lat="35.36493166666666" lon="138.73317333333333"><ele>3712.0</ele></trkpt></trkseg></trk></gpx>';
				$('#track').showGpxTracksString(gpx);
			});
		</script>
	</head>

	<body>
		<div id='track' style='width:600px;height:400px;'></div>
	</body>
</html>

##History

  • 0.2.0: Added showGpxTracksString() and optionalUrl param of showGpxTracks()