WP-GPX-Maps.js

@@ -4,18 +4,6 @@
 
 */
 
-var loc_en = 
-{
-  "length"  : "Length",
-  "altitude": "Altitude"
-};
-var loc_it = 
-{
-  "length"  : "Lunghezza",
-  "altitude": "Altitudine"
-};
-
-var loc = loc_en;
 var t;
 var funqueue = [];
 var infowindow
@@ -26,9 +14,9 @@ var wrapFunction = function(fn, context, params) {
     };
 }
 
-function wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints,unit,color1,color2)
+function wpgpxmaps(params)
 {
-	funqueue.push( wrapFunction(_wpgpxmaps, this, [targhetId,mapType,mapData,graphData,waypoints,unit,color1,color2]));
+	funqueue.push( wrapFunction(_wpgpxmaps, this, [params]));
 	unqueue();
 }
 
@@ -46,11 +34,23 @@ function unqueue()
 	}
 }
 
-function _wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints,unit,color1,color2)
+function _wpgpxmaps(params)
 {
-	var el = document.getElementById("wpgpxmaps_" + targhetId);
+
-	var el_map = document.getElementById("map_" + targhetId);
+	var targetId = params.targetId;
-	var el_chart = document.getElementById("chart_" + targhetId);
+	var mapType = params.mapType;
+	var mapData = params.mapData;
+	var graphData = params.graphData;
+	var waypoints = params.waypoints;
+	var unit = params.unit;
+	var unitspeed = params.unitspeed;
+	var color1 = params.color1;
+	var color2 = params.color2;
+	var color3 = params.color3;
+
+	var el = document.getElementById("wpgpxmaps_" + targetId);
+	var el_map = document.getElementById("map_" + targetId);
+	var el_chart = document.getElementById("chart_" + targetId);
 	
 	switch (mapType)
 	{
@@ -77,7 +77,8 @@ function _wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints,unit,color1,co
 			new google.maps.Point(0,0),
 			new google.maps.Point(16, 32)
 		);
-		for(var i in waypoints)
+		
+		for (i=0; i < waypoints.length; i++) 
 		{
 			addWayPoint(map, image, shadow, waypoints[i][0], waypoints[i][1], waypoints[i][2], waypoints[i][3]);
 		}
@@ -88,12 +89,14 @@ function _wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints,unit,color1,co
 	{
 		var points = [];
 		var bounds = new google.maps.LatLngBounds();
-		for(var i in mapData)
+
+		for (i=0; i < mapData.length; i++) 
 		{
 			var p = new google.maps.LatLng(mapData[i][0], mapData[i][1]);
 			points.push(p);
 			bounds.extend(p);
 		}
+		
 		var poly = new google.maps.Polyline({
 			path: points,
 			strokeColor: color1,
@@ -129,9 +132,11 @@ function _wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints,unit,color1,co
 					var l1 = event.latLng.Qa;				
 					if (!(l1))
 						l1 = event.latLng.Oa;
+						
 					var l2 = event.latLng.Ra;
 					if (!(l2))
 						l2 = event.latLng.Pa;	
+						
 					var ci = getClosestIndex(mapData,l1,l2);
 					var r = chart.setSelection([{'row': parseInt(ci) + 1}]);
 				}
@@ -148,23 +153,56 @@ function _wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints,unit,color1,co
 		
 		if (unit=="1")
 		{
-			var numberFormat1 = "#,##0.#mi";
+			numberFormat1 = "#,##0.#mi";
-			var numberFormat2 = "#,###ft";		
+			numberFormat2 = "#,###ft";		
 		}
 		
+		var showSpeed = (graphData[0].length == 3);
+
 		var data = new google.visualization.DataTable();
-		data.addColumn('number', loc['length']);		
+		data.addColumn('number', "Distance");		
-		data.addColumn('number', loc['altitude']);
+		data.addColumn('number', "Elevation");
-		data.addRows(graphData);
+
-		var chart = new google.visualization.AreaChart(el_chart);
 		var options = { curveType: "function",
 						strictFirstColumnType: true, 
-						hAxis : {format : numberFormat1, title : loc['length']},
+						hAxis : {format : numberFormat1},
-						vAxis : {format : numberFormat2, title : loc['altitude']},
+						vAxis : {format : numberFormat2},
 						legend : {position : 'none'},
-						chartArea: {left:70,top:10,width:"100%",height:"75%"},
+						chartArea: {left:50,top:10,width:"100%",height:"75%"},
-						colors:[color2]
+						colors:[color2,color3],
+						tooltip: { showColorCode: true},
+						fontSize:11
 						};
+						
+		if (showSpeed)
+		{
+			var speedFormat="";
+			
+			if (unitspeed == '2') // miles/h
+			{
+				speedFormat = "#,##0.#mi/h";
+			} 
+			else if (unitspeed == '1') // km/h
+			{
+				speedFormat = "#,##0.#km/h";
+			} 
+			else
+			{
+				speedFormat = "#,##0.#m/s";
+			}
+			data.addColumn('number', "Speed");
+			options.vAxes = { 0:{format : numberFormat2, targetAxisIndex : 0},
+							  1:{format : speedFormat,    targetAxisIndex : 1}
+							};
+			options.series = {	0:{color: color2, visibleInLegend: true, targetAxisIndex : 0}, 
+								1:{color: color3, visibleInLegend: true, targetAxisIndex : 1}
+							 };
+			options.chartArea.width="85%";
+			//alert(el_chart.clientWidth);
+		}
+		
+		data.addRows(graphData);
+		var chart = new google.visualization.AreaChart(el_chart);		
 		chart.draw(data, options);
 		
 		google.visualization.events.addListener(chart, 'onmouseover', function (e) {
@@ -227,13 +265,13 @@ function getClosestIndex(points,lat,lon)
 {
 	var dd=10000;
 	var ii=0;
-	for(var i in points)
+	for (i=0; i < points.length; i++) 
 	{
 		var d = dist(points[i][0], points[i][1], lat, lon);
-		if (d<dd)
+		if ( d < dd )
 		{
-			ii=i;
+			ii = i;
-			dd=d;
+			dd = d;
 		}
 	}
 	return ii;
@@ -244,10 +282,5 @@ function dist(lat1,lon1,lat2,lon2)
 	// mathematically not correct but fast
 	var dLat = (lat2-lat1);
 	var dLon = (lon2-lon1);
-	var a = Math.sin(dLat) * Math.sin(dLat) +
+	return Math.sqrt(dLat * dLat + dLon * dLon);
-			Math.sin(dLon) * Math.sin(dLon) * Math.cos(lat1) * Math.cos(lat2); 
-	return Math.atan2(Math.sqrt(a), Math.sqrt(1-a)); 
 }
-
-
-

readme.txt

@@ -1,10 +1,10 @@
-=== WP-GPX-Maps ===
+=== WP GPX Maps ===
 Contributors: bastianonm
 Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=bastianonm@hotmail.com&item_name=WP-GRX-Maps&item_number=WP-GRX-Maps&amount=5&currency_code=EUR
 Tags: maps, gpx, gps, graph, google maps, google chart, track, garmin
 Requires at least: 2.0.0
 Tested up to: 3.3
-Stable tag: 1.1.5
+Stable tag: 1.1.6
 License: GPLv2 or later
 
 Draws a gpx track with altitude graph
@@ -14,7 +14,7 @@ This plugin has, as input, the GPX file with the track you've made. As output it
 
 - iphone/ipad/ipod Compatible
 
-Try this plugin on <a href="http://www.pedemontanadelgrappa.it/category/mappe/">http://www.pedemontanadelgrappa.it/category/mappe/</a>
+Try this plugin: <a href="http://www.pedemontanadelgrappa.it/category/mappe/">http://www.pedemontanadelgrappa.it/category/mappe/</a>
 
 Thanks to: <a href="http://www.securcube.net/">www.securcube.net</a>, <a href="http://www.darwinner.it/">www.darwinner.it</a>, <a href="http://www.pedemontanadelgrappa.it/">www.pedemontanadelgrappa.it</a>, 
 
@@ -58,13 +58,17 @@ The attributes are:
 
 1. pointsoffset: Skip points closer than XX meters(default is 10)
 
-1. uom: the unit of measure values are: 0, 1 (0 = meters, 1 = miles/feet)
+1. uom: the unit of measure of distance/altitude are values are: 0, 1 (0 = meters, 1 = miles/feet)
 
 1. mlinecolor: map line color (default is #3366cc)
 
-1. glinecolor: graph line color (default is #3366cc)
+1. glinecolor: altitude line color (default is #3366cc)
 
-shortcode with all the attributes : [sgpx gpx="&gt;relative path to your gpx&lt;" width=100% mheight=300px gheight=200px mtype=SATELLITE waypoints=true]
+1. showspeed: show speed inside the chart (default is FALSE)
+
+1. glinecolorspeed: speed line color (default is #ff0000)
+
+1. uomspeed: the unit of measure of speed are: 0, 1, 2 (0 = m/s, 1 = km/h, 2 = miles/h)
 
 = What happening if I've a very large gpx? =
 This plugin will print a small amout of points to to speedup javascript and pageload.
@@ -79,6 +83,11 @@ Yes!
 2. Admin area - Settings
 
 == Changelog ==
+= 1.1.6 =
+* improved charts
+* improved admin area
+* added speed support (where aviable)
+* fixed mootools incompability
 = 1.1.5 =
 * implemented cache (the plugin is much faster, especially on slow servers or external gpx)
 * minor bug fixes
@@ -124,6 +133,8 @@ Yes!
 * Initial release.
 
 == Upgrade Notice ==
+= 1.1.6 =
+* Added speed support. To enable this feature please check the plugin settings
 = 1.1.5 =
 = 1.1.4 =
 = 1.1.3 =

wp-gpx-maps.php

@@ -3,7 +3,7 @@
 Plugin Name: WP-GPX-Maps
 Plugin URI: http://www.darwinner.it/
 Description: Draws a gpx track with altitude graph
-Version: 1.1.5
+Version: 1.1.6
 Author: Bastianon Massimo
 Author URI: http://www.pedemontanadelgrappa.it/
 License: GPL
@@ -77,15 +77,18 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 	$mt =  findValue($attr, "mtype", "wpgpxmaps_map_type", "HYBRID");
 	$gh =  findValue($attr, "gheight", "wpgpxmaps_graph_height", "200px");
 	$showW = findValue($attr, "waypoints", "wpgpxmaps_show_waypoint", false);
+	$showSpeed = findValue($attr, "showspeed", "wpgpxmaps_show_speed", false);
 	$donotreducegpx = findValue($attr, "donotreducegpx", "wpgpxmaps_donotreducegpx", false);
 	$pointsoffset = findValue($attr, "pointsoffset", "wpgpxmaps_pointsoffset", 10);
 	$uom =  findValue($attr, "uom", "wpgpxmaps_unit_of_measure", "0");
+	$uomspeed =  findValue($attr, "uomspeed", "wpgpxmaps_unit_of_measure_speed", "0");
 	$color_map =  findValue($attr, "mlinecolor", "wpgpxmaps_map_line_color", "#3366cc");
 	$color_graph =  findValue($attr, "glinecolor", "wpgpxmaps_graph_line_color", "#3366cc");
+	$color_graph_speed =  findValue($attr, "glinecolorspeed", "wpgpxmaps_graph_line_color_speed", "#ff0000");
 		
 	$r = rand(1,5000000);
 
-	$cacheFileName = md5($gpx.$w.$mh.$mt.$gh.$showW.$donotreducegpx.$pointsoffset);
+	$cacheFileName = md5($gpx.$w.$mh.$mt.$gh.$showW.$donotreducegpx.$pointsoffset,$showSpeed);
 	$gpxcache = gpxCacheFolderPath();
 	
 	if(!(file_exists($gpxcache) && is_dir($gpxcache)))
@@ -111,7 +114,7 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 		}
 	}
 
-	if ($points_maps == '')
+	if ($points_maps == '' || true)
 	{
 	
 		$sitePath = sitePath();
@@ -128,23 +131,61 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 			$gpx = downloadRemoteFile($gpx);
 		}
 
+		if ($gpx == '')
+		{
+			return "No gpx found";
+		}
+		
 		$points = getPoints( $gpx, $pointsoffset, $donotreducegpx);
 		$points_maps = '';
 		$points_graph = '';
 		$waypoints = '';
 	
-		foreach ($points as $p) {
+		if ($showSpeed == true)
-			$points_maps .= '['.(float)$p[0].','.(float)$p[1].'],';
+		{
 		
-			if ($uom == '1')
+			foreach ($points as $p) {
-			{
+				$points_maps .= '['.(float)$p[0].','.(float)$p[1].'],';
-				// Miles and feet
+				
-				$points_graph .= '['.((float)$p[3]*0.000621371192).','.((float)$p[2]*3.2808399).'],';	
+				$_speed = $p[4]; // dafault m/s
+				
+				if ($uomspeed == '2') // miles/h
+				{
+					$_speed *= 2.2369362920544025;
+				} 
+				else if ($uomspeed == '1') // km/h
+				{
+					$_speed *= 3.6;
+				} 
+				
+				if ($uom == '1')
+				{
+					// Miles and feet
+					$points_graph .= '['.((float)$p[3]*0.000621371192).','.((float)$p[2]*3.2808399).','.$_speed.'],';	
+				}
+				else
+				{
+					$points_graph .= '['.(float)$p[3].','.(float)$p[2].','.$_speed.'],';		
+				}
 			}		
-			else
+		}
-			{
+		else
-				$points_graph .= '['.(float)$p[3].','.(float)$p[2].'],';		
+		{
+		
+			foreach ($points as $p) {
+				$points_maps .= '['.(float)$p[0].','.(float)$p[1].'],';
+				
+				if ($uom == '1')
+				{
+					// Miles and feet
+					$points_graph .= '['.((float)$p[3]*0.000621371192).','.((float)$p[2]*3.2808399).'],';	
+				}
+				else
+				{
+					$points_graph .= '['.(float)$p[3].','.(float)$p[2].'],';		
+				}
 			}		
+
 		}
 		
 		if ($showW == true)
@@ -180,10 +221,17 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 			<div id="chart_'.$r.'" class="plot" style="width:'.$w.'; height:'.$gh.'"></div>
 		</div>
 		<script type="text/javascript">
-			var m_'.$r.' = ['.$points_maps.'];
+			wpgpxmaps({ targetId : "'.$r.'",
-			var c_'.$r.' = ['.$points_graph.'];	
+						mapType   : "'.$mt.'",
-			var w_'.$r.' = ['.$waypoints.'];	
+						mapData   : ['.$points_maps.'],
-			wpgpxmaps("'.$r.'","'.$mt.'",m_'.$r.',c_'.$r.', w_'.$r.', "'.$uom.'", "'.$color_map.'", "'.$color_graph.'");
+						graphData : ['.$points_graph.'],
+						waypoints : ['.$waypoints.'],
+						unit      : "'.$uom.'",
+						unitspeed : "'.$uomspeed.'",
+						color1    : "'.$color_map.'",
+						color2    : "'.$color_graph.'",
+						color3    : "'.$color_graph_speed.'",
+					   });
 		</script>';	
 	
 	return $output;
@@ -191,20 +239,25 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 
 function downloadRemoteFile($remoteFile)
 {
-	$ch = curl_init();
+	try
-	curl_setopt($ch, CURLOPT_URL, $remoteFile); 
+	{
-	curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
+		$ch = curl_init();
-	curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,5);
+		curl_setopt($ch, CURLOPT_URL, $remoteFile); 
-	curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0);
+		curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
-	$resp = curl_exec($ch); 
+		curl_setopt($ch,CURLOPT_CONNECTTIMEOUT,5);
-	curl_close($ch);
+		curl_setopt($ch, CURLOPT_HTTP_VERSION, CURL_HTTP_VERSION_1_0);
-	$tmpfname = tempnam ( '/tmp', 'gpx' );
+		$resp = curl_exec($ch); 
+		curl_close($ch);
+		$tmpfname = tempnam ( '/tmp', 'gpx' );
 		
-	$fp = fopen($tmpfname, "w");
+		$fp = fopen($tmpfname, "w");
-	fwrite($fp, $resp);
+		fwrite($fp, $resp);
-	fclose($fp);
+		fclose($fp);
 		
-	return $tmpfname;
+		return $tmpfname;
+	} catch (Exception $e) {
+		return '';
+	}
 }
 
 function unescape($value)
@@ -220,10 +273,13 @@ function WP_GPX_Maps_install() {
 	add_option("wpgpxmaps_height", '450px', '', 'yes');
 	add_option('wpgpxmaps_map_type','HYBRID','','yes');
 	add_option('wpgpxmaps_show_waypoint','','','yes');
+	add_option('wpgpxmaps_show_speed','','','yes');
 	add_option('wpgpxmaps_pointsoffset','10','','yes');
 	add_option('wpgpxmaps_donotreducegpx','true','','yes');
-	add_option("wpgpxmaps_unit_of_measure", 'mt', '', 'yes');
+	add_option("wpgpxmaps_unit_of_measure", '0', '', 'yes');
+	add_option("wpgpxmaps_unit_of_measure_speed", '0', '', 'yes');
 	add_option("wpgpxmaps_graph_line_color", '#3366cc', '', 'yes');
+	add_option("wpgpxmaps_graph_line_color_speed", '#ff0000', '', 'yes');
 	add_option("wpgpxmaps_map_line_color", '#3366cc', '', 'yes');
 }
 
@@ -233,12 +289,14 @@ function WP_GPX_Maps_remove() {
 	delete_option('wpgpxmaps_height');
 	delete_option('wpgpxmaps_map_type');
 	delete_option('wpgpxmaps_show_waypoint');
+	delete_option('wpgpxmaps_show_speed');
 	delete_option('wpgpxmaps_pointsoffset');
 	delete_option('wpgpxmaps_donotreducegpx');
 	delete_option('wpgpxmaps_unit_of_measure');
+	delete_option('wpgpxmaps_unit_of_measure_speed');
 	delete_option('wpgpxmaps_graph_line_color');
 	delete_option('wpgpxmaps_map_line_color');
-	
+	delete_option('wpgpxmaps_graph_line_color_speed');
 }
 
 ?>

wp-gpx-maps_Utils.php

@@ -111,7 +111,7 @@
 		$points = array();
 		$gpx = simplexml_load_file($filePath);	
 		
-		if($gpx ===  FALSE) 
+		if($gpx === FALSE) 
 			return;
 		
 		$gpx->registerXPathNamespace('10', 'http://www.topografix.com/GPX/1/0'); 
@@ -135,10 +135,12 @@
 				$lat = $trkpt['lat'];
 				$lon = $trkpt['lon'];
 				$ele = $trkpt->ele;
+				$speed = (float)$trkpt->speed;
+
 				if ($lastLat == 0 && $lastLon == 0)
 				{
 					//Base Case
-					array_push($points, array((float)$lat,(float)$lon,(float)round($ele,2),(float)round($dist,2)));
+					array_push($points, array((float)$lat,(float)$lon,(float)round($ele,2),(float)round($dist,2), $speed ));
 					$lastLat=$lat;
 					$lastLon=$lon;
 					$lastEle=$ele;				
@@ -152,7 +154,7 @@
 					{
 						//Bigger Offset -> write coordinate
 						$lastOffset=0;
-						array_push($points, array((float)$lat,(float)$lon,(float)round($ele,1),(float)round($dist,1)));
+						array_push($points, array((float)$lat,(float)$lon,(float)round($ele,1),(float)round($dist,1), $speed ));
 					}
 					else
 					{

wp-gpx-maps_admin_settings.php

@@ -8,6 +8,7 @@
 	$donotreducegpx = get_option("wpgpxmaps_donotreducegpx");
 	$t = get_option('wpgpxmaps_map_type');
 	$uom = get_option('wpgpxmaps_unit_of_measure');
+	$uomspeed = get_option('wpgpxmaps_unit_of_measure_speed');
 	
 	if (!($t))
 		$t = 'HYBRID';
@@ -20,23 +21,45 @@
 
 	<?php wp_nonce_field('update-options') ?>
 	
-	<table width="100%">
+	
+	<h3 class="title">Map and Chart size</h3>
+	
+	<table class="form-table">
 		<tr>
-			<th width="150" scope="row">Map and Graph size:</th>
+			<th scope="row">Width:</th>
 			<td>
-				<i>Width:</i> <input name="wpgpxmaps_width" type="text" id="wpgpxmaps_width" value="<?php echo get_option('wpgpxmaps_width'); ?>" style="width:50px;" />, 
+				<input name="wpgpxmaps_width" type="text" id="wpgpxmaps_width" value="<?php echo get_option('wpgpxmaps_width'); ?>" style="width:50px;" />
-				<i>Map Height:</i> <input name="wpgpxmaps_height" type="text" id="wpgpxmaps_height" value="<?php echo get_option('wpgpxmaps_height'); ?>" style="width:50px;" />, 
-				<i>Graph Height:</i> <input name="wpgpxmaps_graph_height" type="text" id="wpgpxmaps_graph_height" value="<?php echo get_option('wpgpxmaps_graph_height'); ?>" style="width:50px;" />
 			</td>
 		</tr>
-		<tr><td></td><td></td></tr>
+		<tr>
+			<th scope="row">Map Height:</th>
+			<td>
+				<input name="wpgpxmaps_height" type="text" id="wpgpxmaps_height" value="<?php echo get_option('wpgpxmaps_height'); ?>" style="width:50px;" />
+			</td>
+		</tr>
+		<tr>
+			<th scope="row">Graph Height:</th>
+			<td>
+				<input name="wpgpxmaps_graph_height" type="text" id="wpgpxmaps_graph_height" value="<?php echo get_option('wpgpxmaps_graph_height'); ?>" style="width:50px;" />
+			</td>
+		</tr>
+	</table>
+	
+	<h3 class="title">Maps</h3>
+	
+	<table class="form-table">
 		<tr>
 			<th scope="row">Waypoints Support:</th>
 			<td>
 				<input name="wpgpxmaps_show_waypoint" type="checkbox" value="true" <?php if($showW == true){echo('checked');} ?> onchange="this.value = (this.checked)"  /><i>Show Waypoints</i>
 			</td>
 		</tr>
-		<tr><td></td><td></td></tr>
+		<tr>
+			<th scope="row">Map line color:</th>
+			<td>
+				<input name="wpgpxmaps_map_line_color" type="color" data-hex="true" value="<?php echo get_option('wpgpxmaps_map_line_color'); ?>" />
+			</td>
+		</tr>
 		<tr>
 			<th scope="row">Default Map Type:</th>
 			<td>
@@ -46,7 +69,11 @@
 				<input type="radio" name="wpgpxmaps_map_type" value="TERRAIN" <?php if ($t == 'TERRAIN') echo 'checked'; ?>> TERRAIN: maps with physical features such as terrain and vegetation.<br />
 			</td>
 		</tr>
-		<tr><td></td><td></td></tr>
+	</table>
+	
+	<h3 class="title">Chart</h3>
+	
+	<table class="form-table">
 		<tr>
 			<th scope="row">Unit of measure:</th>
 			<td>
@@ -57,33 +84,58 @@
 			</td>
 		</tr>
 		<tr>
-			<th scope="row">Map line color:</th>
+			<th scope="row">Elevation line color:</th>
-			<td>
-				<input name="wpgpxmaps_map_line_color" type="color" data-hex="true" value="<?php echo get_option('wpgpxmaps_map_line_color'); ?>" />
-			</td>
-		</tr>
-		<tr>
-			<th scope="row">Graph line color:</th>
 			<td>
 				<input name="wpgpxmaps_graph_line_color" type="color" data-hex="true" value="<?php echo get_option('wpgpxmaps_graph_line_color'); ?>" />
 			</td>
 		</tr>
 		<tr>
-			<th scope="row">Advanced options:</th>
+			<th scope="row">Show speed:</th>
+			<td>
+				<input name="wpgpxmaps_show_speed" type="checkbox" value="true" <?php if($showW == true){echo('checked');} ?> onchange="this.value = (this.checked)"  /><i>Show Speed (where aviable)</i>
+			</td>
+		</tr>		
+		<tr>
+			<th scope="row">Speed line color:</th>
+			<td>
+				<input name="wpgpxmaps_graph_line_color_speed" type="color" data-hex="true" value="<?php echo get_option('wpgpxmaps_graph_line_color_speed'); ?>" />
+			</td>
+		</tr>
+		<tr>
+			<th scope="row">Speed unit of measure:</th>
+			<td>
+				<select name='wpgpxmaps_unit_of_measure_speed'>
+					<option value="0" <?php if ($uomspeed == '0') echo 'selected'; ?>>m/s</option>
+					<option value="1" <?php if ($uomspeed == '1') echo 'selected'; ?>>km/h</option>
+					<option value="2" <?php if ($uomspeed == '2') echo 'selected'; ?>>miles/h</option>
+				</select>
+			</td>
+		</tr>
+	</table>
+	
+	<h3 class="title">Advanced options	<small>(Do not edit if you don't know what you are doing!)</small></h3>
+
+	
+	<table class="form-table">
+		<tr>
+			<th scope="row"></th>
 			<td>
-				<br />
-				<b>Do not edit if you don't know what you are doing!</b><br />				
 				<i>Skip points closer than </i> <input name="wpgpxmaps_pointsoffset" type="text" id="wpgpxmaps_pointsoffset" value="<?php echo $po ?>" style="width:50px;" /><i>meters</i>.
+			</td>
+		</tr>		
+		<tr>
+			<th scope="row"></th>
+			<td>
 				<input name="wpgpxmaps_donotreducegpx" type="checkbox" value="true" <?php if($donotreducegpx == true){echo('checked');} ?> onchange="this.value = (this.checked)"  /><i>Do not reduce gpx</i>.
 			</td>
 		</tr>	
 	</table>
 
 	<input type="hidden" name="action" value="update" />
-	<input name="page_options" type="hidden" value="wpgpxmaps_map_type,wpgpxmaps_height,wpgpxmaps_graph_height,wpgpxmaps_width,wpgpxmaps_show_waypoint,wpgpxmaps_pointsoffset,wpgpxmaps_donotreducegpx,wpgpxmaps_unit_of_measure,wpgpxmaps_map_line_color,wpgpxmaps_graph_line_color" />
+	<input name="page_options" type="hidden" value="wpgpxmaps_map_type,wpgpxmaps_height,wpgpxmaps_graph_height,wpgpxmaps_width,wpgpxmaps_show_waypoint,wpgpxmaps_pointsoffset,wpgpxmaps_donotreducegpx,wpgpxmaps_unit_of_measure,wpgpxmaps_map_line_color,wpgpxmaps_graph_line_color,wpgpxmaps_show_speed,wpgpxmaps_graph_line_color_speed,wpgpxmaps_unit_of_measure_speed" />
 
-	<p>
+	<p class="submit">
-		<input type="submit" value="<?php _e('Save Changes') ?>" />
+		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
 	</p>
 
 </form>