WP-GPX-Maps.js

@@ -47,6 +47,13 @@ function _wpgpxmaps(params)
 	var color1 = params.color1;
 	var color2 = params.color2;
 	var color3 = params.color3;
+	var chartFrom1 = params.chartFrom1;
+	var chartTo1 = params.chartTo1;
+	var chartFrom2 = params.chartFrom2;
+	var chartTo2 = params.chartTo2;
+	var startIcon = params.startIcon;
+	var endIcon = params.endIcon;
+	var currentIcon = params.currentIcon;
 	
 	var el = document.getElementById("wpgpxmaps_" + targetId);
 	var el_map = document.getElementById("map_" + targetId);
@@ -99,6 +106,33 @@ function _wpgpxmaps(params)
 			bounds.extend(p);
 		}
 		
+		if (startIcon != '')
+		{
+			var startIconImage = new google.maps.MarkerImage(startIcon);
+			var startMarker = new google.maps.Marker({
+					  position: points[0],
+					  map: map,
+					  title: "Start",
+					  animation: google.maps.Animation.DROP,
+					  icon: startIconImage,
+					  zIndex: 10
+				  });
+		}
+
+		if (endIcon != '')
+		{
+			var endIconImage = new google.maps.MarkerImage(endIcon);
+			var startMarker = new google.maps.Marker({
+					  position: points[ points.length -1 ],
+					  map: map,
+					  title: "Start",
+					  animation: google.maps.Animation.DROP,
+					  icon: endIconImage,
+					  zIndex: 10
+				  });
+		
+		}
+		
 		var poly = new google.maps.Polyline({
 			path: points,
 			strokeColor: color1,
@@ -110,7 +144,12 @@ function _wpgpxmaps(params)
 		map.fitBounds(bounds);
 		var first = getItemFromArray(mapData,0)
 		
-		var current = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon25.png",
+		if (currentIcon == '')
+		{
+			currentIcon = "http://maps.google.com/mapfiles/kml/pal4/icon25.png";
+		}
+		
+		var current = new google.maps.MarkerImage(currentIcon,
 			new google.maps.Size(32, 32),
 			new google.maps.Point(0,0),
 			new google.maps.Point(16, 16)
@@ -164,6 +203,18 @@ function _wpgpxmaps(params)
 		data.addColumn('number', "Distance");		
 		data.addColumn('number', "Altitude");
 
+		if (!isNumeric(chartFrom1))
+			chartFrom1 = null;
+			
+		if (!isNumeric(chartTo1))
+			chartTo1 = null;
+		
+		if (!isNumeric(chartFrom2))
+			chartFrom2 = null;
+
+		if (!isNumeric(chartTo2))
+			chartTo2 = null;		
+			
 		var options = { curveType: "function",
 						strictFirstColumnType: true, 
 						hAxis : {format : numberFormat1},
@@ -175,6 +226,12 @@ function _wpgpxmaps(params)
 						fontSize:11
 						};
 
+		if ( chartFrom1 != null || chartTo1 != null )
+		{
+			options.vAxis.viewWindowMode = "explicit";
+			options.vAxis.viewWindow = { min : chartFrom1, max : chartTo1};
+		}
+						
 		if (showSpeed)
 		{
 			var speedFormat="";
@@ -192,12 +249,27 @@ function _wpgpxmaps(params)
 				speedFormat = "#,##0.#m/s";
 			}
 			data.addColumn('number', "Speed");
+			
 			options.vAxes = { 0:{format : numberFormat2, targetAxisIndex : 0},
 							  1:{format : speedFormat,    targetAxisIndex : 1}
 							};
+							
+			if ( chartFrom1 != null || chartTo1 != null )
+			{
+				options.vAxes[0].viewWindowMode = "explicit";
+				options.vAxes[0].viewWindow = { min : chartFrom1, max : chartTo1};
+			}
+			
+			if ( chartFrom2 != null || chartTo2 != null )
+			{
+				options.vAxes[1].viewWindowMode = "explicit";
+				options.vAxes[1].viewWindow = { min : chartFrom2, max : chartTo2};
+			}							
+							
 			options.series = {	0:{color: color2, visibleInLegend: true, targetAxisIndex : 0}, 
 								1:{color: color3, visibleInLegend: true, targetAxisIndex : 1}
 							 };
+							 
 			options.chartArea.width="85%";
 			//alert(el_chart.clientWidth);
 		}
@@ -278,6 +350,11 @@ function getClosestIndex(points,lat,lon)
 	return ii;
 }
 
+function isNumeric(input){
+    var RE = /^-{0,1}\d*\.{0,1}\d+$/;
+    return (RE.test(input));
+}
+
 function dist(lat1,lon1,lat2,lon2)
 {
 	// mathematically not correct but fast

readme.txt

@@ -1,17 +1,20 @@
 === 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
+Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=bastianonm@hotmail.com&item_name=WP%20GPX%20Maps&item_number=Donation
-Tags: maps, gpx, gps, graph, google maps, google chart, track, garmin
+Tags: maps, gpx, gps, graph, chart, google maps, google chart, track, garmin
 Requires at least: 2.0.0
 Tested up to: 3.3
-Stable tag: 1.1.9
+Stable tag: 1.1.10
 License: GPLv2 or later
 
 Draws a gpx track with altitude graph
 
 == Description ==
+
 This plugin has, as input, the GPX file with the track you've made and as output it shows the map of the track and an interactive altitude graph (where available).
 
+Fully configurable: custom colors and icons to make the map look like your site.
+
 - iphone/ipad/ipod Compatible
 
 Try this plugin: <a href="http://www.pedemontanadelgrappa.it/category/mappe/">http://www.pedemontanadelgrappa.it/category/mappe/</a>
@@ -72,6 +75,21 @@ The attributes are:
 
 1. uomspeed: the unit of measure of speed are: 0, 1, 2 (0 = m/s, 1 = km/h, 2 = miles/h)
 
+1. chartFrom1: minimun value for altitude chart
+
+1. chartTo1: maxumin value for altitude chart
+
+1. chartFrom2: minimun value for speed chart
+
+1. chartTo2: maxumin value for speed chart
+
+1. startIcon: Start track icon
+
+1. endIcon: End track icon
+
+1. currentIcon: Current position icon (when mouse hover)
+
+
 = What happening if I've a very large gpx? =
 This plugin will print a small amout of points to speedup javascript and pageload.
 
@@ -85,6 +103,10 @@ Yes!
 2. Admin area - Settings
 
 == Changelog ==
+= 1.1.10 =
+* Configurable Map Icons 
+* Chart scale configuration (max and min values)
+= 1.1.9 =
 = 1.1.8 =
 * cache issues fixed
 * added speed when not present in the gpx (derived from datetime)
@@ -140,6 +162,8 @@ Yes!
 * Initial release
 
 == Upgrade Notice ==
+= 1.1.10 =
+= 1.1.9 =
 = 1.1.8 =
 = 1.1.7 =
 = 1.1.6 =

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.9
+Version: 1.1.10
 Author: Bastianon Massimo
 Author URI: http://www.pedemontanadelgrappa.it/
 License: GPL
@@ -46,7 +46,7 @@ function enqueue_WP_GPX_Maps_scripts()
 		google.load('visualization', '1', {'packages':['corechart']});
 		google.load("maps", "3", {other_params: 'sensor=false'});
 	</script>
-	<script type='text/javascript' src='<?php echo plugins_url('/WP-GPX-Maps.js', __FILE__) ?>'></script>	
+	<script type='text/javascript' src='<?php echo plugins_url('/WP-GPX-Maps.js', __FILE__) ?>?ver=1.1.10'></script>	
 <?php
 }
 
@@ -71,20 +71,27 @@ function findValue($attr, $attributeName, $optionName, $defaultValue)
 function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 {
 
-	$gpx = findValue($attr, "gpx", "", "");
+	$gpx =                findValue($attr, "gpx",                "",                          		 "");
-	$w =   findValue($attr, "width", "wpgpxmaps_width", "100%");
+	$w =                  findValue($attr, "width",              "wpgpxmaps_width",           		 "100%");
-	$mh =  findValue($attr, "mheight", "wpgpxmaps_height", "450px");
+	$mh =                 findValue($attr, "mheight",            "wpgpxmaps_height",          		 "450px");
-	$mt =  findValue($attr, "mtype", "wpgpxmaps_map_type", "HYBRID");
+	$mt =                 findValue($attr, "mtype",              "wpgpxmaps_map_type",        		 "HYBRID");
-	$gh =  findValue($attr, "gheight", "wpgpxmaps_graph_height", "200px");
+	$gh =                 findValue($attr, "gheight",            "wpgpxmaps_graph_height",    		 "200px");
-	$showW = findValue($attr, "waypoints", "wpgpxmaps_show_waypoint", false);
+	$showW =              findValue($attr, "waypoints",          "wpgpxmaps_show_waypoint",   		 false);
-	$showSpeed = findValue($attr, "showspeed", "wpgpxmaps_show_speed", false);
+	$showSpeed =          findValue($attr, "showspeed",          "wpgpxmaps_show_speed",      		 false);
-	$donotreducegpx = findValue($attr, "donotreducegpx", "wpgpxmaps_donotreducegpx", false);
+	$donotreducegpx =     findValue($attr, "donotreducegpx",     "wpgpxmaps_donotreducegpx", 		 false);
-	$pointsoffset = findValue($attr, "pointsoffset", "wpgpxmaps_pointsoffset", 10);
+	$pointsoffset =       findValue($attr, "pointsoffset",       "wpgpxmaps_pointsoffset",     		 10);
-	$uom =  findValue($attr, "uom", "wpgpxmaps_unit_of_measure", "0");
+	$uom =                findValue($attr, "uom",                "wpgpxmaps_unit_of_measure",        "0");
-	$uomspeed =  findValue($attr, "uomspeed", "wpgpxmaps_unit_of_measure_speed", "0");
+	$uomspeed =           findValue($attr, "uomspeed",           "wpgpxmaps_unit_of_measure_speed",  "0");
-	$color_map =  findValue($attr, "mlinecolor", "wpgpxmaps_map_line_color", "#3366cc");
+	$color_map =          findValue($attr, "mlinecolor",         "wpgpxmaps_map_line_color",         "#3366cc");
-	$color_graph =  findValue($attr, "glinecolor", "wpgpxmaps_graph_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");
+	$color_graph_speed =  findValue($attr, "glinecolorspeed",    "wpgpxmaps_graph_line_color_speed", "#ff0000");
+	$chartFrom1 =         findValue($attr, "chartfrom1",         "wpgpxmaps_graph_offset_from1",     "");
+	$chartTo1 =           findValue($attr, "chartfo1",           "wpgpxmaps_graph_offset_to1",       "");
+	$chartFrom2 =         findValue($attr, "chartfrom2",         "wpgpxmaps_graph_offset_from2", 	 "");
+	$chartTo2 =           findValue($attr, "chartto2",           "wpgpxmaps_graph_offset_to2", 		 "");
+	$startIcon =          findValue($attr, "starticon",          "wpgpxmaps_map_start_icon", 		 "");
+	$endIcon =            findValue($attr, "endicon",            "wpgpxmaps_map_end_icon", 			 "");
+	$currentIcon =        findValue($attr, "currenticon",        "wpgpxmaps_map_current_icon", 		 "");
 
 	$r = rand(1,5000000);
 
@@ -216,16 +223,23 @@ 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">
-			wpgpxmaps({ targetId : "'.$r.'",
+			wpgpxmaps({ targetId    : "'.$r.'",
-						mapType   : "'.$mt.'",
+						mapType     : "'.$mt.'",
-						mapData   : ['.$points_maps.'],
+						mapData     : ['.$points_maps.'],
-						graphData : ['.$points_graph.'],
+						graphData   : ['.$points_graph.'],
-						waypoints : ['.$waypoints.'],
+						waypoints   : ['.$waypoints.'],
-						unit      : "'.$uom.'",
+						unit        : "'.$uom.'",
-						unitspeed : "'.$uomspeed.'",
+						unitspeed   : "'.$uomspeed.'",
-						color1    : "'.$color_map.'",
+						color1      : "'.$color_map.'",
-						color2    : "'.$color_graph.'",
+						color2      : "'.$color_graph.'",
-						color3    : "'.$color_graph_speed.'",
+						color3      : "'.$color_graph_speed.'",
+						chartFrom1  : "'.$chartFrom1.'",
+						chartTo1    : "'.$chartTo1.'",
+						chartFrom2  : "'.$chartFrom2.'",
+						chartTo2    : "'.$chartTo2.'",
+						startIcon   : "'.$startIcon.'",
+						endIcon     : "'.$endIcon.'",
+						currentIcon : "'.$currentIcon.'"
 					   });
 		</script>';	
 
@@ -276,6 +290,13 @@ function WP_GPX_Maps_install() {
 	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');
+	add_option("wpgpxmaps_graph_offset_from1", '', '', 'yes');
+	add_option("wpgpxmaps_graph_offset_to1", '', '', 'yes');
+	add_option("wpgpxmaps_graph_offset_from2", '', '', 'yes');
+	add_option("wpgpxmaps_graph_offset_to2", '', '', 'yes');
+	add_option("wpgpxmaps_map_start_icon", '', '', 'yes');
+	add_option("wpgpxmaps_map_end_icon", '', '', 'yes');
+	add_option("wpgpxmaps_map_current_icon", '', '', 'yes');
 }
 
 function WP_GPX_Maps_remove() {
@@ -292,6 +313,13 @@ function WP_GPX_Maps_remove() {
 	delete_option('wpgpxmaps_graph_line_color');
 	delete_option('wpgpxmaps_map_line_color');
 	delete_option('wpgpxmaps_graph_line_color_speed');
+	delete_option('wpgpxmaps_graph_offset_from1');
+	delete_option('wpgpxmaps_graph_offset_to1');
+	delete_option('wpgpxmaps_graph_offset_from2');
+	delete_option('wpgpxmaps_graph_offset_to2');
+	delete_option('wpgpxmaps_map_start_icon');
+	delete_option('wpgpxmaps_map_end_icon');
+	delete_option('wpgpxmaps_map_current_icon');
 }
 
 ?>

wp-gpx-maps_admin.php

@@ -85,21 +85,11 @@ function WP_GPX_Maps_html_page() {
 		<p>You can also use gpx from other sites: <b>[sgpx gpx="http://www.someone.com/somewhere/somefile.gpx"]</b></p>
 		<hr />
 		<p>
-			<i>Full set of attributes:</i> <b>[sgpx 
+			<i>Full set of attributes:</i> <b>[sgpx gpx="<?php echo $relativeGpxPath; ?>&lt gpx file name &gt" </b>
-													gpx="<?php echo $relativeGpxPath; ?>&lt gpx file name &gt" 
+													&nbsp;&nbsp;&nbsp;<em>&gt&gt read below all the optional attributes &lt&lt</em>&nbsp;&nbsp;&nbsp;
-													width=100% 
+											<b>]</b>
-													mheight=450px 
-													gheight=200px 
-													mtype=SATELLITE 
-													waypoints=true 
-													donotreducegpx=false 
-													pointsoffset=10
-													uom=0
-													mlinecolor=#3366cc
-													glinecolor=#3366cc]</b>
 
 			<ul>
-				<li><b>gpx</b>: relative path to gpx</li>
 				<li><b>width</b>: width in pixels</li>
 				<li><b>mheight</b>: map height</li>
 				<li><b>gheight</b>: graph height</li>
@@ -113,6 +103,13 @@ function WP_GPX_Maps_html_page() {
 				<li><b>showspeed</b>: show speed inside the chart (default is FALSE)</li>
 				<li><b>glinecolorspeed</b>: speed line color (default is #ff0000)</li>
 				<li><b>uomspeed</b>: the unit of measure of speed are: 0, 1, 2 (0 = m/s, 1 = km/h, 2 = miles/h)</li>
+				<li><b>chartFrom1</b>: minimun value for altitude chart</li>
+				<li><b>chartTo1</b>: maxumin value for altitude chart</li>
+				<li><b>chartFrom2</b>: minimun value for speed chart</li>
+				<li><b>chartTo2</b>: maxumin value for speed chart</li>				
+				<li><b>startIcon</b>: Start track icon</li>
+				<li><b>endIcon</b>: End track icon</li>
+				<li><b>currentIcon</b>: Current position icon (when mouse hover)</li>	
 			</ul>
 
 			<p>

wp-gpx-maps_admin_settings.php

@@ -21,7 +21,6 @@
 
 	<?php wp_nonce_field('update-options') ?>
 	
-	
 	<h3 class="title">Map and Chart size</h3>
 	
 	<table class="form-table">
@@ -45,6 +44,18 @@
 		</tr>
 	</table>
 	
+	<p class="submit">
+		<input type="hidden" name="action" value="update" />
+    	<input name="page_options" type="hidden" value="wpgpxmaps_height,wpgpxmaps_graph_height,wpgpxmaps_width" />
+		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
+	</p>
+
+</form>
+	<hr />
+<form method="post" action="options.php">
+
+	<?php wp_nonce_field('update-options') ?>
+	
 	<h3 class="title">Maps</h3>
 	
 	<table class="form-table">
@@ -69,12 +80,52 @@
 				<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>
+			<th scope="row">Start Icon:</th>
+			<td>
+				<input name="wpgpxmaps_map_start_icon" value="<?php echo get_option('wpgpxmaps_map_start_icon'); ?>" style="width:400px" /> <em>(Url to image) Leave empty to hide</em>
+			</td>
+		</tr>
+		
+		<tr>
+			<th scope="row">End Icon:</th>
+			<td>
+				<input name="wpgpxmaps_map_end_icon" value="<?php echo get_option('wpgpxmaps_map_end_icon'); ?>" style="width:400px" /> <em>(Url to image) Leave empty to hide</em>
+			</td>
+		</tr>
+		
+		<tr>
+			<th scope="row">Current Position Icon:</th>
+			<td>
+				<input name="wpgpxmaps_map_current_icon" value="<?php echo get_option('wpgpxmaps_map_current_icon'); ?>" style="width:400px" /> <em>(Url to image) Leave empty for default</em>
+			</td>
+		</tr>
+		
 	</table>
 
+	<p class="submit">
+		<input type="hidden" name="action" value="update" />
+    	<input name="page_options" type="hidden" value="wpgpxmaps_show_waypoint,wpgpxmaps_map_line_color,wpgpxmaps_map_type,wpgpxmaps_map_start_icon,wpgpxmaps_map_end_icon,wpgpxmaps_map_current_icon" />
+		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
+	</p>
+
+</form>
+	<hr />
+<form method="post" action="options.php">
+
+	<?php wp_nonce_field('update-options') ?>
+	
 	<h3 class="title">Chart</h3>
 	
 	<table class="form-table">
 		<tr>
+			<tr>
+				<th scope="row">Altitude 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>		
 			<th scope="row">Unit of measure:</th>
 			<td>
 				<select name='wpgpxmaps_unit_of_measure'>
@@ -85,15 +136,19 @@
 			</td>
 		</tr>
 		<tr>
-			<th scope="row">Altitude line color:</th>
+			<th scope="row">Altitude display offset:</th>
 			<td>
-				<input name="wpgpxmaps_graph_line_color" type="color" data-hex="true" value="<?php echo get_option('wpgpxmaps_graph_line_color'); ?>" />
+				From
+				<input name="wpgpxmaps_graph_offset_from1" value="<?php echo get_option('wpgpxmaps_graph_offset_from1'); ?>" style="width:50px;" />
+				To
+				<input name="wpgpxmaps_graph_offset_to1" value="<?php echo get_option('wpgpxmaps_graph_offset_to1'); ?>" style="width:50px;" />
+				<em>(leave empty for auto scale)</em>
 			</td>
 		</tr>
 		<tr>
 			<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 available)</i>
+				<input name="wpgpxmaps_show_speed" type="checkbox" value="true" <?php if($showW == true){echo('checked');} ?> onchange="this.value = (this.checked)"  /><i>Show Speed</i>
 			</td>
 		</tr>		
 		<tr>
@@ -112,8 +167,31 @@
 				</select>
 			</td>
 		</tr>		
+		<tr>
+			<th scope="row">Speed display offset:</th>
+			<td>
+				From
+				<input name="wpgpxmaps_graph_offset_from2" value="<?php echo get_option('wpgpxmaps_graph_offset_from2'); ?>" style="width:50px;" />
+				To
+				<input name="wpgpxmaps_graph_offset_to2" value="<?php echo get_option('wpgpxmaps_graph_offset_to2'); ?>" style="width:50px;" />
+				<em>(leave empty for auto scale)</em>
+			</td>
+		</tr>
 	</table>
 	
+
+	<p class="submit">
+		<input type="hidden" name="action" value="update" />
+    	<input name="page_options" type="hidden" value="wpgpxmaps_unit_of_measure,wpgpxmaps_graph_line_color,wpgpxmaps_show_speed,wpgpxmaps_graph_line_color_speed,wpgpxmaps_unit_of_measure_speed,wpgpxmaps_graph_offset_from1,wpgpxmaps_graph_offset_to1,wpgpxmaps_graph_offset_from2,wpgpxmaps_graph_offset_to2" />
+		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
+	</p>
+
+</form>
+	<hr />
+<form method="post" action="options.php">
+
+	<?php wp_nonce_field('update-options') ?>
+	
 	<h3 class="title">Advanced options	<small>(Do not edit if you don't know what you are doing!)</small></h3>
 
 	
@@ -133,10 +211,11 @@
 	</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,wpgpxmaps_show_speed,wpgpxmaps_graph_line_color_speed,wpgpxmaps_unit_of_measure_speed" />
+	<input name="page_options" type="hidden" value="wpgpxmaps_pointsoffset,wpgpxmaps_donotreducegpx" />
 
 	<p class="submit">
 		<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
 	</p>
 
 </form>
+<hr />