WP-GPX-Maps.js

@@ -34,6 +34,87 @@ function unqueue()
 	}
 }
 
+
+
+  function CustomMarker( map, latlng, src, img_w, img_h) {
+    this.latlng_ = latlng;
+
+    // Once the LatLng and text are set, add the overlay to the map.  This will
+    // trigger a call to panes_changed which should in turn call draw.
+    this.setMap(map);
+	this.src_ = src;
+	this.img_w_ = img_w;
+	this.img_h_ = img_h;
+  }
+
+  CustomMarker.prototype = new google.maps.OverlayView();
+
+  CustomMarker.prototype.draw = function() {
+    var me = this;
+
+    // Check if the div has been created.
+    var div = this.div_;
+    if (!div) {
+      // Create a overlay text DIV
+      div = this.div_ = document.createElement('DIV');
+	  div.style.cssText = "border:1px solid #fff;position:absolute;cursor:pointer;margin:0;background:url('"+this.src_+"') center;width:"+(this.img_w_/3)+"px;height:"+(this.img_h_/3)+"px;";
+	  div.setAttribute("lat",this.latlng_.lat());
+	  div.setAttribute("lon",this.latlng_.lng());
+      google.maps.event.addDomListener(div, "click", function(event) {
+        google.maps.event.trigger(me, "click",div);
+      });
+
+		google.maps.event.addDomListener(div, "mouseover", function(event) {
+		
+			var _t = div.style.top.replace('px','');
+			var _l = div.style.left.replace('px','');
+		
+			jQuery(div).animate({
+				height: me.img_h_,
+				width : me.img_w_,
+				top   : _t - (me.img_h_ / 3),
+				left  : _l - (me.img_w_ / 3)
+			  }, 100);
+		});
+
+		google.maps.event.addDomListener(div, "mouseout", function(event) {
+			jQuery(div).animate({
+				height: me.img_h_ / 3,
+				width: me.img_w_ / 3,
+				top   : me.orig_top,
+				left  : me.orig_left
+			  }, 100);
+		});
+
+      // Then add the overlay to the DOM
+      var panes = this.getPanes();
+      panes.overlayImage.appendChild(div);
+    }
+
+    // Position the overlay 
+    var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
+    if (point) {
+      div.style.left = point.x + 'px';
+      div.style.top = point.y + 'px';
+	  
+	  this.orig_left = point.x;
+	  this.orig_top = point.y;
+	  
+    }
+  };
+
+  CustomMarker.prototype.remove = function() {
+    // Check if the overlay was on the map and needs to be removed.
+    if (this.div_) {
+      this.div_.parentNode.removeChild(this.div_);
+      this.div_ = null;
+    }
+  };
+
+
+
+
+
 function _wpgpxmaps(params)
 {
 
@@ -59,6 +140,8 @@ function _wpgpxmaps(params)
 	var el_map = document.getElementById("map_" + targetId);
 	var el_chart = document.getElementById("chart_" + targetId);
 	
+	var mapWidth = el_map.style.width;
+	
 	switch (mapType)
 	{
 		case 'TERRAIN': { mapType = google.maps.MapTypeId.TERRAIN; break;}
@@ -72,6 +155,7 @@ function _wpgpxmaps(params)
 		scrollwheel: false
 	};
 	var map = new google.maps.Map(el_map, mapOptions); 
+	var bounds = new google.maps.LatLngBounds();
 	
 	// Print WayPoints
 	if (waypoints != '')
@@ -93,11 +177,54 @@ function _wpgpxmaps(params)
 		}
 	}
 	
+	// Print Images
+	
+	var divImages = document.getElementById("ngimages_"+targetId);
+	
+	divImages.style.display='block';	
+	divImages.style.position='absolute';
+	divImages.style.left='-500px';	
+	
+	var img_spans = divImages.getElementsByTagName("span");   
+	
+
+	if (img_spans.length > 0)
+	{
+		var bb = new google.maps.LatLngBounds();
+		for (var i = 0; i < img_spans.length; i++) {   
+		
+			var imageLat  = img_spans[i].getAttribute("lat");
+			var imageLon  = img_spans[i].getAttribute("lon");	
+			var imageImg  = img_spans[i].getElementsByTagName('img')[0];
+			var imageUrl  = imageImg.getAttribute("src");
+			
+			var img_w = imageImg.clientWidth;
+			var img_h = imageImg.clientHeight;
+			
+			var p = new google.maps.LatLng(imageLat, imageLon);
+			bounds.extend(p);
+
+			var mc = new CustomMarker(map, p, imageUrl, img_w, img_h );
+			
+			google.maps.event.addListener(mc, "click", function(div) {
+				var lat = div.getAttribute("lat");
+				var lon = div.getAttribute("lon");
+				var a = getClosestImage(lat,lon,targetId).childNodes[0];			
+				if (a)
+				{
+					a.click();
+				}
+			});
+			
+		}  
+
+	}
+	
+
 	// Print Track
 	if (mapData != '')		
 	{
 		var points = [];
-		var bounds = new google.maps.LatLngBounds();
 
 		for (i=0; i < mapData.length; i++) 
 		{
@@ -140,8 +267,7 @@ function _wpgpxmaps(params)
 			strokeWeight: 4
 		});
 		poly.setMap(map);
-		map.setCenter(bounds.getCenter()); 
+
-		map.fitBounds(bounds);
 		var first = getItemFromArray(mapData,0)
 		
 		if (currentIcon == '')
@@ -179,6 +305,9 @@ function _wpgpxmaps(params)
 		});
 	}
 	
+	map.setCenter(bounds.getCenter()); 
+	map.fitBounds(bounds);
+	
 	// Print Graph
 	if (graphData!= '')
 	{
@@ -288,6 +417,16 @@ function _wpgpxmaps(params)
 				marker.setTitle("Current Position");
 			}
 		});
+
+		if( mapWidth = "100%")
+		{
+			var resizeChart = function(){
+				el_chart.style.width = el_chart.clientWidth + "px";
+				chart.draw(data, options);
+			};
+			google.maps.event.addListener(map, "idle", resizeChart);
+		}
+
 		//google.visualization.events.addListener(chart, 'onmouseout', function (e) {
 			//chart.setSelection([e]);
 		//});
@@ -315,9 +454,16 @@ function addWayPoint(map, image, shadow, lat, lon, title, descr)
 		{
 			infowindow.close(); 		
 		}
-		infowindow = new google.maps.InfoWindow({
+		var cnt = '';	
-			content: "<b>" + title + "</b></br />" + descr
+		if (title=='')
-		});
+		{
+			cnt = "<center>" + descr + "</center>";
+		}
+		else
+		{
+			cnt = "<b>" + title + "</b></br />" + descr;
+		}
+		infowindow = new google.maps.InfoWindow({ content: cnt});
 		infowindow.open(map,m);
 	});	
 }
@@ -350,6 +496,25 @@ function getClosestIndex(points,lat,lon)
 	return ii;
 }
 
+function getClosestImage(lat,lon,targetId)
+{
+	var dd=10000;
+	var img;
+	var divImages = document.getElementById("ngimages_"+targetId);
+	var img_spans = divImages.getElementsByTagName("span");   
+	for (var i = 0; i < img_spans.length; i++) {   
+		var imageLat = img_spans[i].getAttribute("lat");
+		var imageLon = img_spans[i].getAttribute("lon");	
+		var d = dist(imageLat, imageLon, lat, lon);
+		if ( d < dd )
+		{
+			img = img_spans[i];
+			dd = d;
+		}		
+	}
+	return img;
+}
+
 function isNumeric(input){
     var RE = /^-{0,1}\d*\.{0,1}\d+$/;
     return (RE.test(input));

readme.txt

@@ -1,10 +1,10 @@
 === WP GPX Maps ===
 Contributors: bastianonm
-Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=bastianonm@hotmail.com&item_name=WP%20GPX%20Maps&item_number=Donation
+Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=8VHWLRW6JBTML
-Tags: maps, gpx, gps, graph, chart, google maps, google chart, track, garmin
+Tags: maps, gpx, gps, graph, chart, google maps, google chart, track, garmin, image, nextgen-gallery, nextgen, exif
 Requires at least: 2.0.0
 Tested up to: 3.3
-Stable tag: 1.1.10
+Stable tag: 1.1.11
 License: GPLv2 or later
 
 Draws a gpx track with altitude graph
@@ -15,6 +15,8 @@ This plugin has, as input, the GPX file with the track you've made and as output
 
 Fully configurable: custom colors and icons to make the map look like your site.
 
+Display your NextGen Gallery images inside the map! Take a look at nexgen gallery EXIF support..
+
 - iphone/ipad/ipod Compatible
 
 Try this plugin: <a href="http://www.pedemontanadelgrappa.it/category/mappe/">http://www.pedemontanadelgrappa.it/category/mappe/</a>
@@ -89,6 +91,10 @@ The attributes are:
 
 1. currentIcon: Current position icon (when mouse hover)
 
+1. nggalleries: NextGen Gallery id or a list of Galleries id separated by a comma
+
+1. ngimages: NextGen Image id or a list of Images id separated by a comma
+
 
 = What happening if I've a very large gpx? =
 This plugin will print a small amout of points to speedup javascript and pageload.
@@ -103,6 +109,9 @@ Yes!
 2. Admin area - Settings
 
 == Changelog ==
+= 1.1.11 =
+* nextgen gallery integration
+* minor bug fixes
 = 1.1.10 =
 * Configurable Map Icons 
 * Chart scale configuration (max and min values)
@@ -162,6 +171,7 @@ Yes!
 * Initial release
 
 == Upgrade Notice ==
+= 1.1.11 =
 = 1.1.10 =
 = 1.1.9 =
 = 1.1.8 =

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.10
+Version: 1.1.11
 Author: Bastianon Massimo
 Author URI: http://www.pedemontanadelgrappa.it/
 License: GPL
@@ -11,7 +11,7 @@ License: GPL
 
 //error_reporting (E_ALL);
 
-include 'wp-gpx-maps_Utils.php';
+include 'wp-gpx-maps_utils.php';
 include 'wp-gpx-maps_admin.php';
 
 add_action( 'wp_print_scripts', 'enqueue_WP_GPX_Maps_scripts' );
@@ -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__) ?>?ver=1.1.10'></script>	
+	<script type='text/javascript' src='<?php echo plugins_url('/WP-GPX-Maps.js', __FILE__) ?>?ver=1.1.11'></script>
 <?php
 }
 
@@ -92,14 +92,14 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 	$startIcon =          findValue($attr, "starticon",          "wpgpxmaps_map_start_icon", 		 "");
 	$endIcon =            findValue($attr, "endicon",            "wpgpxmaps_map_end_icon", 			 "");
 	$currentIcon =        findValue($attr, "currenticon",        "wpgpxmaps_map_current_icon", 		 "");
+	$ngGalleries =        findValue($attr, "nggalleries",        "wpgpxmaps_map_ngGalleries", 		 "");
+	$ngImages =           findValue($attr, "ngimages",           "wpgpxmaps_map_ngImages", 		     "");
 
 	$r = rand(1,5000000);
 
-	$cacheFileName = "$gpx,$w,$mh,$mt,$gh,$showW,$donotreducegpx,$pointsoffset,$showSpeed,$uom";
+	$cacheFileName = "$gpx,$w,$mh,$mt,$gh,$showW,$donotreducegpx,$pointsoffset,$showSpeed,$uom,$ngGallery";
 
-	//echo "----------cacheFileName---------$cacheFileName-------------------";	
+	$cacheFileName = md5($cacheFileName);
-	
-	$cacheFileName = md5($gpx.$w.$mh.$mt.$gh.$showW.$donotreducegpx.$pointsoffset.$showSpeed.$uom);
 	
 	$gpxcache = gpxCacheFolderPath();
 	
@@ -119,14 +119,30 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 			$points_maps = $cache_obj["points_maps"];
 			$points_graph = $cache_obj["points_graph"];
 			$waypoints = $cache_obj["waypoints"];
+			$ngimgs_data = $cache_obj["ngimgs"];
 		} catch (Exception $e) {
 			$points_maps= '';
 			$points_graph= '';
 			$waypoints= '';
+			$ngimgs_data='';
 		}
 	}
 	
-	if ($points_maps == '')
+	if ($ngimgs_data == '' && ( $ngGalleries != '' || $ngImages != '' ))
+	{
+		$ngimgs = getNGGalleryImages($ngGalleries,$ngImages);
+		
+		$ngimgs_data ='';
+		
+		foreach ($ngimgs as $img) {		
+			$data = $img['data'];
+			$data = str_replace("\n","",$data);
+			$ngimgs_data .= '<span lat="'.$img['lat'].'" lon="'.$img['lon'].'">'.$data.'</span>';
+		}
+		
+	}
+
+	if ($points_maps == '' && $gpx != '')
 	{
 	
 		$sitePath = sitePath();
@@ -153,6 +169,8 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 		$points_graph = '';
 		$waypoints = '';
 		
+
+	
 		foreach ($points as $p) {
 			$points_maps .= '['.(float)$p[0].','.(float)$p[1].'],';
 	
@@ -208,19 +226,22 @@ function handle_WP_GPX_Maps_Shortcodes($attr, $content='')
 			$points_graph = "";	
 		} 	
 
+	}
+	
 		@file_put_contents($gpxcache, 
-						   serialize(array("points_maps" => $points_maps, 
+					   serialize(array( "points_maps" => $points_maps, 
 										"points_graph" => $points_graph, 
-											"waypoints" => $waypoints)
+										"waypoints" => $waypoints,
+										"ngimgs" => $ngimgs_data)
 								), 
 					   LOCK_EX);
 	@chmod($gpxcache,0755);	
-	}
 	
 	$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 id="ngimages_'.$r.'" style="display:none">'.$ngimgs_data.'</div>
 		</div>
 		<script type="text/javascript">
 			wpgpxmaps({ targetId    : "'.$r.'",
@@ -297,6 +318,8 @@ function WP_GPX_Maps_install() {
 	add_option("wpgpxmaps_map_start_icon", '', '', 'yes');
 	add_option("wpgpxmaps_map_end_icon", '', '', 'yes');
 	add_option("wpgpxmaps_map_current_icon", '', '', 'yes');
+	add_option("wpgpxmaps_map_nggallery", '', '', 'yes');
+	
 }
 
 function WP_GPX_Maps_remove() {
@@ -320,6 +343,7 @@ function WP_GPX_Maps_remove() {
 	delete_option('wpgpxmaps_map_start_icon');
 	delete_option('wpgpxmaps_map_end_icon');
 	delete_option('wpgpxmaps_map_current_icon');
+	delete_option('wpgpxmaps_map_nggallery');
 }
 
 ?>

wp-gpx-maps_Utils.php

@@ -1,5 +1,6 @@
 <?php
 
+	require_once("wp-gpx-maps_utils_nggallery.php");
 
 	function sitePath()
 	{

wp-gpx-maps_admin.php

@@ -110,6 +110,8 @@ function WP_GPX_Maps_html_page() {
 				<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>					
+				<li><b>nggalleries</b>: NextGen Gallery id or a list of Galleries id separated by a comma</li>	
+				<li><b>ngimages</b>: NextGen Image id or a list of Images id separated by a comma</li>	
 			</ul>
 
 			<p>

wp-gpx-maps_admin_settings.php

@@ -8,7 +8,8 @@
 	$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');
+	$uomSpeed = get_option('wpgpxmaps_unit_of_measure_speed');
+	$showSpeed = get_option('wpgpxmaps_show_speed');
 	
 	if (!($t))
 		$t = 'HYBRID';
@@ -148,7 +149,7 @@
 		<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</i>
+				<input name="wpgpxmaps_show_speed" type="checkbox" value="true" <?php if($showSpeed == true){echo('checked');} ?> onchange="this.value = (this.checked)"  /><i>Show Speed</i>
 			</td>
 		</tr>		
 		<tr>
@@ -161,9 +162,9 @@
 			<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="0" <?php if ($uomSpeed == '0') echo 'selected'; ?>>m/s</option>
-					<option value="1" <?php if ($uomspeed == '1') echo 'selected'; ?>>km/h</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>
+					<option value="2" <?php if ($uomSpeed == '2') echo 'selected'; ?>>miles/h</option>
 				</select>
 			</td>
 		</tr>		

wp-gpx-maps_utils_nggallery.php

@@ -0,0 +1,71 @@
+<?php
+
+	function isNGGalleryActive() {
+		if (!function_exists('is_plugin_active')) {
+			require_once(sitePath() . '/wp-admin/includes/plugin.php');
+		}		
+		return is_plugin_active("nextgen-gallery/nggallery.php");
+	}
+	
+	function getNGGalleryImages($ngGalleries, $ngImages)
+	{
+		$result = array();
+		$galids = explode(',', $ngGalleries);
+		$imgids = explode(',', $ngImages);
+		
+		if (!isNGGalleryActive())
+			return '';
+			
+		try {
+
+			$pictures = array();
+			foreach ($galids as $g) {						
+				$pictures = array_merge($pictures, nggdb::get_gallery($g, false, false, true, $capture_date));
+			}
+			foreach ($imgids as $i) {
+				array_push($pictures, nggdb::find_image($i));
+			}
+			foreach ($pictures as $p) {
+				$item = array();
+				$item["data"] = $p->thumbHTML;
+				if (is_callable('exif_read_data'))
+				{
+					$exif = @exif_read_data($p->imagePath);	
+					if ($exif !== false)
+					{
+						$item["lon"] = getExifGps($exif["GPSLongitude"], $exif['GPSLongitudeRef']);
+						$item["lat"] = getExifGps($exif["GPSLatitude"], $exif['GPSLatitudeRef']);
+						if (($item["lat"] != 0) || ($item["lon"] != 0)) 
+						{
+							$result[] = $item;
+						}					
+					}
+				}
+			}			
+
+		} catch (Exception $e) {
+			return '';
+		}
+		return $result;
+	}
+	
+	function getExifGps($exifCoord, $hemi) 
+	{
+		$degrees = count($exifCoord) > 0 ? gps2Num($exifCoord[0]) : 0;
+		$minutes = count($exifCoord) > 1 ? gps2Num($exifCoord[1]) : 0;
+		$seconds = count($exifCoord) > 2 ? gps2Num($exifCoord[2]) : 0;
+		$flip = ($hemi == 'W' or $hemi == 'S') ? -1 : 1;
+		return $flip * ($degrees + $minutes / 60 + $seconds / 3600);
+	}
+
+	function gps2Num($coordPart) 
+	{
+		$parts = explode('/', $coordPart);
+		if (count($parts) <= 0)
+			return 0;
+		if (count($parts) == 1)
+			return $parts[0];
+		return floatval($parts[0]) / floatval($parts[1]);
+	}
+
+?>