WP-GPX-Maps.js

@@ -1,3 +1,8 @@
+/*
+
+	WP-GPX-Maps
+
+*/
 var loc_en = 
 {
   "length"  : "Length",
@@ -8,19 +13,21 @@ var loc_it =
   "length"  : "Lunghezza",
   "altitude": "Altitudine"
 };
-var loc = loc_en;
 
+var loc = loc_en;
 var t;
 var funqueue = [];
+var infowindow
+
 var wrapFunction = function(fn, context, params) {
     return function() {
         fn.apply(context, params);
     };
 }
 
-function wpgpxmaps(targhetId,mapType,mapData,graphData)
+function wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints)
 {
-	funqueue.push( wrapFunction(_wpgpxmaps, this, [targhetId,mapType,mapData,graphData]));
+	funqueue.push( wrapFunction(_wpgpxmaps, this, [targhetId,mapType,mapData,graphData,waypoints]));
 	unqueue();
 }
 
@@ -38,7 +45,7 @@ function unqueue()
 	}
 }
 
-function _wpgpxmaps(targhetId,mapType,mapData,graphData)
+function _wpgpxmaps(targhetId,mapType,mapData,graphData,waypoints)
 {
 	var el = document.getElementById("wpgpxmaps_" + targhetId);
 	var el_map = document.getElementById("map_" + targhetId);
@@ -55,42 +62,29 @@ function _wpgpxmaps(targhetId,mapType,mapData,graphData)
 	  mapTypeId: mapType
 	};
 	var map = new google.maps.Map(el_map, mapOptions); 
-	if (graphData!= '')
+	
+	// Print WayPoints
+	if (waypoints != '')
+	{
+		var image = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/flag.png',
+			new google.maps.Size(32, 32),
+			new google.maps.Point(0,0),
+			new google.maps.Point(16, 32)
+		);
+		var shadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/flag.shadow.png',
+			new google.maps.Size(59, 32),
+			new google.maps.Point(0,0),
+			new google.maps.Point(16, 32)
+		);
+		for(var i in waypoints)
+		{
+			addWayPoint(map, image, shadow, waypoints[i][0], waypoints[i][1], waypoints[i][2], waypoints[i][3]);
+		}
+	}
+	
+	// Print Track
+	if (mapData != '')		
 	{
-		var data = new google.visualization.DataTable();
-		data.addColumn('number', loc['length']);		
-		data.addColumn('number', loc['altitude']);
-		data.addRows(graphData);
-		var chart = new google.visualization.AreaChart(el_chart);
-		var options = { curveType: "function",
-						strictFirstColumnType: true, 
-						hAxis : {format : '#,###m', title : loc['length']},
-						vAxis : {format : '#,###m', title : loc['altitude']},
-						legend : {position : 'none'},
-						chartArea: {left:70,top:10,width:"100%",height:"75%"}
-						};
-		chart.draw(data, options);
-		google.visualization.events.addListener(chart, 'onmouseover', function (e) {
-			var r = e['row'];
-			if (marker)
-			{
-				var point = getItemFromArray(mapData,r)
-				marker.setPosition(new google.maps.LatLng(point[0],point[1]));					marker.setTitle("Current Position");
-			}
-		});
-		google.visualization.events.addListener(chart, 'onmouseout', function (e) {
-			if (marker)
-			{
-				if (chart.getSelection() != '')
-				{
-					var r = chart.getSelection()[0]['row'];
-					var point = getItemFromArray(mapData,r)
-					marker.setPosition(new google.maps.LatLng(point[0], point[1]));					marker.setTitle("Graph Selection");
-				}
-			}
-		});
-	}	else	{		el_chart.style.display='none';	}
-	if (mapData != '')		{
 		var points = [];
 		var bounds = new google.maps.LatLngBounds();
 		for(var i in mapData)
@@ -109,13 +103,102 @@ function _wpgpxmaps(targhetId,mapType,mapData,graphData)
 		map.setCenter(bounds.getCenter()); 
 		map.fitBounds(bounds);
 		var first = getItemFromArray(mapData,0)
+		
 		var marker = new google.maps.Marker({
 			position: new google.maps.LatLng(first[0], first[1]),
-			title:"Start"
+			title:"Start",
+			icon: "/wp-content/plugins/wp-gpx-maps/img/map_start.png",
+			map: map,
+			zIndex: 10
 		});
-		marker.setMap(map);
+	}
+	
+	// Print Graph
+	if (graphData!= '')
+	{
+		var data = new google.visualization.DataTable();
+		data.addColumn('number', loc['length']);		
+		data.addColumn('number', loc['altitude']);
+		data.addRows(graphData);
+		var chart = new google.visualization.AreaChart(el_chart);
+		var options = { curveType: "function",
+						strictFirstColumnType: true, 
+						hAxis : {format : '#,###m', title : loc['length']},
+						vAxis : {format : '#,###m', title : loc['altitude']},
+						legend : {position : 'none'},
+						chartArea: {left:70,top:10,width:"100%",height:"75%"}
+						};
+		chart.draw(data, options);
+		
+		var current = new google.maps.MarkerImage('/wp-content/plugins/wp-gpx-maps/img/map_current.png',
+			new google.maps.Size(32, 32),
+			new google.maps.Point(0,0),
+			new google.maps.Point(8, 0)
+		);
+		
+		google.visualization.events.addListener(chart, 'onmouseover', function (e) {
+			var r = e['row'];
+			if (marker)
+			{
+				var point = getItemFromArray(mapData,r)
+				marker.setPosition(new google.maps.LatLng(point[0],point[1]));	
+				marker.setIcon(current);
+				marker.setTitle("Current Position");
+			}
+		});
+		google.visualization.events.addListener(chart, 'onmouseout', function (e) {
+			if (marker)
+			{
+				if (chart.getSelection() != '')
+				{
+					var r = chart.getSelection()[0]['row'];
+					var point = getItemFromArray(mapData,r)
+					marker.setPosition(new google.maps.LatLng(point[0], point[1]));	
+					marker.setIcon(current);					
+					marker.setTitle("Graph Selection");
+				}
+				else
+				{
+					var point = getItemFromArray(mapData,0)
+					marker.setPosition(new google.maps.LatLng(point[0], point[1]));	
+					marker.setIcon("/wp-content/plugins/wp-gpx-maps/img/map_start.png");					
+					marker.setTitle("Graph Selection");
+				}
+			}
+		});
+	}	
+	else	
+	{		
+		el_chart.style.display='none';	
 	}
 }
+
+function addWayPoint(map, image, shadow, lat, lon, title, descr)
+{
+	var p = new google.maps.LatLng(lat, lon);
+	var m = new google.maps.Marker({
+						  position: p,
+						  map: map,
+						  title: title,
+						  animation: google.maps.Animation.DROP,
+						  shadow: shadow,
+						  icon: image,
+						  zIndex: 5
+					  });
+	google.maps.event.addListener(m, 'mouseover', function() {
+	
+		if (infowindow)
+		{
+			infowindow.close(); 		
+		}
+	
+		infowindow = new google.maps.InfoWindow({
+			content: "<b>" + title + "</b></br />" + descr
+		});
+		infowindow.open(map,m);
+	});	
+}
+
 function getItemFromArray(arr,index)
 {
 	try

readme.txt

@@ -4,7 +4,7 @@ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=basti
 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.0.6
+Stable tag: 1.0.7
 License: GPLv2 or later
 
 Draws a gpx track with altitude graph
@@ -52,7 +52,9 @@ The attributes are:
 
 1. mtype: map aviable types are: HYBRID, ROADMAP, SATELLITE, TERRAIN
 
-shortcode with all the attributes : [sgpx gpx=">relative path to your gpx<" width=100% mheight=300px gheight=200px mtype=SATELLITE]
+1. waypoints: print the gpx waypoints inside the map (default is FALSE)
+
+shortcode with all the attributes : [sgpx gpx=">relative path to your gpx<" width=100% mheight=300px gheight=200px mtype=SATELLITE waypoints=true]
 
 = What happening if I've a very large gpx? =
 This plugin will print a small amout of points to to speedup javascript and pageload.
@@ -61,10 +63,14 @@ This plugin will print a small amout of points to to speedup javascript and page
 Yes!
 
 == Screenshots ==
-1. Screenshot Sample
+1. Simple Gpx
-2. Screenshot Admin area
+1. Gpx with waypoints
+2. Admin area
 
 == Changelog ==
+= 1.0.7 =
+* Added waypoints support
+* New icons
 = 1.0.6 =
 * Minor bug fix
 = 1.0.5 =
@@ -83,6 +89,8 @@ Yes!
 * Initial release.
 
 == Upgrade Notice ==
+= 1.0.7 =
+* Added waypoints support. To enable this feature please check the plugin settings
 = 1.0.6 =
 = 1.0.5 =
 = 1.0.4 =

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.0.6
+Version: 1.0.7
 Author: Bastianon Massimo
 Author URI: http://www.pedemontanadelgrappa.it/
 License: GPL
@@ -57,6 +57,7 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 	$mh = $attr["mheight"];
 	$mt = $attr["mtype"];
 	$gh = $attr["gheight"];
+	$showW = $attr['waypoints'];
 	
 	if ($w == '')
 	{
@@ -83,32 +84,62 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 		$gh = "200px";
 	}
 	
+	if ($showW == '')
+	{
+		$showW = get_option("wpgpxmaps_show_waypoint");
+	}
+	
 	$r = rand(1,5000000);
 	
 	$points = getPoints($gpx);
 	$points_maps = '';
 	$points_graph = '';
+	$waypoints = '';
 
 	foreach ($points as $p) {
 		$points_maps .= "[".(float)$p[0].",".(float)$p[1]."],";
 		$points_graph .= "[".(float)$p[3].",".(float)$p[2]."],";
 	}		//all the points are [0,0]	$points_graph = preg_replace("/^(\[0,0\],)+$/", "", $points_graph);	
+	
+	if ($showW == true)
+	{
+		$wpoints = getWayPoints($gpx);
+		foreach ($wpoints as $p) {
+			$waypoints .= "[".(float)$p[0].",".(float)$p[1].",'".unescape($p[4])."','".unescape($p[5])."','".unescape($p[7])."'],";
+		}
+	}
+	
 	$p="/,$/";
 	$points_maps = preg_replace($p, "", $points_maps);
-	$points_graph = preg_replace($p, "", $points_graph);			if (preg_match("/^(\[0,0\],?)+$/", $points_graph)) {		$points_graph = "";	} 
+	$points_graph = preg_replace($p, "", $points_graph);			
-	return '
+	$waypoints = preg_replace($p, "", $waypoints);
+	
+	if (preg_match("/^(\[0,0\],?)+$/", $points_graph)) 
+	{		
+		$points_graph = "";	
+	} 
+
+	$output = '
 		<div id="wpgpxmaps_'.$r.'" style="clear:both;">
 			<div id="map_'.$r.'" style="width:'.$w.'; height:'.$mh.'"></div>
 			<div id="chart_'.$r.'" class="plot" style="width:'.$w.'; height:'.$gh.'"></div>
 		</div>
 		<script type="text/javascript">
-		
 			var m_'.$r.' = ['.$points_maps.'];
 			var c_'.$r.' = ['.$points_graph.'];	
-
+			var w_'.$r.' = ['.$waypoints.'];	
-			wpgpxmaps("'.$r.'","'.$mt.'",m_'.$r.',c_'.$r.');		
+			wpgpxmaps("'.$r.'","'.$mt.'",m_'.$r.',c_'.$r.', w_'.$r.');		
-
 		</script>';	
+	
+	return $output;
+}
+
+
+function unescape($value)
+{
+	$value = str_replace("'", "\'", $value);
+	$value = str_replace(array("\n","\r"), "", $value);
+	return $value;
 }
 
 function WP_GPX_Maps_install() {
@@ -116,6 +147,7 @@ function WP_GPX_Maps_install() {
 	add_option("wpgpxmaps_graph_height", '200px', '', 'yes');
 	add_option("wpgpxmaps_height", '450px', '', 'yes');
 	add_option('wpgpxmaps_map_type','HYBRID','','yes');
+	add_option('wpgpxmaps_show_waypoint','','','yes');
 }
 
 function WP_GPX_Maps_remove() {
@@ -123,6 +155,7 @@ function WP_GPX_Maps_remove() {
 	delete_option('wpgpxmaps_graph_height');
 	delete_option('wpgpxmaps_height');
 	delete_option('wpgpxmaps_map_type');
+	delete_option('wpgpxmaps_show_waypoint');
 }
 
 ?>

wp-gpx-maps_Utils.php

@@ -24,6 +24,7 @@
 		else
 		{
 			array_push($points, array((float)0,(float)0,(float)0,(float)0));
+			echo "File $realGpxPath not found!";
 		}
 		// riduco l'array a circa 200 punti per non appensantire la pagina(mappa e grafico)!
 		$count=sizeof($points);
@@ -136,9 +137,41 @@
 				echo "Gpx Empty or not supported!";
 			}
 		}
-
 		return $points;
 	}	
+	
+	function getWayPoints($gpxPath)
+	{
+		$points = array();
+		$realGpxPath = substr (__FILE__, 0, strrpos(__FILE__,'/wp-content/')).$gpxPath;
+		if (file_exists($realGpxPath))
+		{
+			$points = array();
+			$gpx = simplexml_load_file($realGpxPath);	
+			$gpx->registerXPathNamespace('10', 'http://www.topografix.com/GPX/1/0'); 
+			$gpx->registerXPathNamespace('11', 'http://www.topografix.com/GPX/1/1'); 
+			$nodes = $gpx->xpath('//wpt | //10:wpt | //11:wpt');
+			
+			if ( count($nodes) > 0 )	
+			{
+				// normal case
+				foreach($nodes as $wpt)
+				{
+					$lat = $wpt['lat'];
+					$lon = $wpt['lon'];
+					$ele = $wpt->ele;
+					$time = $wpt->time;
+					$name = $wpt->name;
+					$desc = $wpt->desc;
+					$sym = $wpt->sym;
+					$type = $wpt->type;
+					array_push($points, array((float)$lat,(float)$lon,(float)$ele,$time,$name,$desc,$sym,$type));
+				}
+			}
+		}
+		return $points;
+	}
+	
 	function toRadians($degrees)
 	{
 		return $degrees * 3.1415926535897932385 / 180;

wp-gpx-maps_admin.php

@@ -35,13 +35,15 @@ function WP_GPX_Maps_html_page() {
 		}
 	}
 	
+	$showW = get_option("wpgpxmaps_show_waypoint");
+		
 ?>
 
 <div style="padding:10px;">
 	<b>The fastest way to use this plugin:</b> upload the file using the uploader below, than put this 
 				shotcode: <b>[sgpx gpx="/wp-content/uploads/gpx/&lt gpx file name &gt"]</b> in the pages/posts.
 	<p>
-		<i>Full set of attributes:</i> <b>[sgpx gpx="/wp-content/uploads/gpx/&lt gpx file name &gt" width=100% mheight=450px gheight=200px mtype=SATELLITE]</b>
+		<i>Full set of attributes:</i> <b>[sgpx gpx="/wp-content/uploads/gpx/&lt gpx file name &gt" width=100% mheight=450px gheight=200px mtype=SATELLITE waypoints=true]</b>
 	</p>
 </div>
 
@@ -55,7 +57,9 @@ function WP_GPX_Maps_html_page() {
 			<td>
 				<i>Width:</i> <input name="wpgpxmaps_width" type="text" id="wpgpxmaps_width" value="<?php echo get_option('wpgpxmaps_width'); ?>" style="width:50px;" />, 
 				<i>Maps 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_height" type="text" id="wpgpxmaps_height" value="<?php echo get_option('wpgpxmaps_height'); ?>" style="width:50px;" />
+				<i>Graph Height:</i> <input name="wpgpxmaps_height" type="text" id="wpgpxmaps_height" value="<?php echo get_option('wpgpxmaps_height'); ?>" style="width:50px;" />,
+				<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>
@@ -75,7 +79,7 @@ function WP_GPX_Maps_html_page() {
 	</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" />
+	<input name="page_options" type="hidden" value="wpgpxmaps_map_type,wpgpxmaps_height,wpgpxmaps_graph_height,wpgpxmaps_width,wpgpxmaps_show_waypoint" />
 
 	<p>
 		<input type="submit" value="<?php _e('Save Changes') ?>" />