* NGG gallery is working

* Getting HR, Cad and Temp working again (thanks to cyclinggeorgian)
* Fix javascript errors 
* Fix multiple traks gpx

ThirdParties/Leaflet.Photo/Leaflet.Photo.css

@@ -0,0 +1,27 @@
+.leaflet-marker-photo { 
+	border: 2px solid #fff; 
+	box-shadow: 3px 3px 10px #888; 
+}	
+
+.leaflet-marker-photo div { 
+    width: 100%;  
+    height: 100%;
+    background-size: cover;    
+    background-position: center center;
+    background-repeat: no-repeat;
+}	
+
+.leaflet-marker-photo b {
+	position: absolute;
+	top: -7px;
+	right: -11px;
+	color: #555;
+	background-color: #fff;
+	border-radius: 8px;
+	height: 12px;
+	min-width: 12px;
+	line-height: 12px;
+	text-align: center;
+	padding: 3px;
+	box-shadow: 0 3px 14px rgba(0,0,0,0.4);
+}

ThirdParties/Leaflet.Photo/Leaflet.Photo.js

@@ -0,0 +1,83 @@
+L.Photo = L.FeatureGroup.extend({
+	options: {
+		icon: {						
+			iconSize: [40, 40]
+		}
+	},
+
+	initialize: function (photos, options) {
+		L.setOptions(this, options);
+		L.FeatureGroup.prototype.initialize.call(this, photos);
+	},
+
+	addLayers: function (photos) {
+		if (photos) {
+			for (var i = 0, len = photos.length; i < len; i++) {
+				this.addLayer(photos[i]);
+			}
+		}
+		return this;
+	},
+
+	addLayer: function (photo) {	
+		L.FeatureGroup.prototype.addLayer.call(this, this.createMarker(photo));
+	},
+
+	createMarker: function (photo) {
+		var marker = L.marker(photo, {
+			icon: L.divIcon(L.extend({
+				html: '<div style="background-image: url(' + photo.thumbnail + ');"></div>​',
+				className: 'leaflet-marker-photo'
+			}, photo, this.options.icon)),
+			title: photo.caption || ''
+		});		
+		marker.photo = photo;
+		return marker;
+	}
+});
+
+L.photo = function (photos, options) {
+	return new L.Photo(photos, options);
+};
+
+if (L.MarkerClusterGroup) {
+
+	L.Photo.Cluster = L.MarkerClusterGroup.extend({
+		options: {
+			featureGroup: L.photo,		
+			maxClusterRadius: 100,		
+			showCoverageOnHover: false,
+			iconCreateFunction: function(cluster) {
+				return new L.DivIcon(L.extend({
+					className: 'leaflet-marker-photo', 
+					html: '<div style="background-image: url(' + cluster.getAllChildMarkers()[0].photo.thumbnail + ');"></div>​<b>' + cluster.getChildCount() + '</b>'
+				}, this.icon));
+		   	},	
+			icon: {						
+				iconSize: [40, 40]
+			}		   		
+		},
+
+		initialize: function (options) {	
+			options = L.Util.setOptions(this, options);
+			L.MarkerClusterGroup.prototype.initialize.call(this);
+			this._photos = options.featureGroup(null, options);
+		},
+
+		add: function (photos) {
+			this.addLayer(this._photos.addLayers(photos));
+			return this;
+		},
+
+		clear: function () {
+			this._photos.clearLayers();
+			this.clearLayers();
+		}
+
+	});
+
+	L.photo.cluster = function (options) {
+		return new L.Photo.Cluster(options);	
+	};
+
+}

ThirdParties/Leaflet.markercluster-1.4.1/MarkerCluster.Default.css

@@ -0,0 +1,60 @@
+.marker-cluster-small {
+	background-color: rgba(181, 226, 140, 0.6);
+	}
+.marker-cluster-small div {
+	background-color: rgba(110, 204, 57, 0.6);
+	}
+
+.marker-cluster-medium {
+	background-color: rgba(241, 211, 87, 0.6);
+	}
+.marker-cluster-medium div {
+	background-color: rgba(240, 194, 12, 0.6);
+	}
+
+.marker-cluster-large {
+	background-color: rgba(253, 156, 115, 0.6);
+	}
+.marker-cluster-large div {
+	background-color: rgba(241, 128, 23, 0.6);
+	}
+
+	/* IE 6-8 fallback colors */
+.leaflet-oldie .marker-cluster-small {
+	background-color: rgb(181, 226, 140);
+	}
+.leaflet-oldie .marker-cluster-small div {
+	background-color: rgb(110, 204, 57);
+	}
+
+.leaflet-oldie .marker-cluster-medium {
+	background-color: rgb(241, 211, 87);
+	}
+.leaflet-oldie .marker-cluster-medium div {
+	background-color: rgb(240, 194, 12);
+	}
+
+.leaflet-oldie .marker-cluster-large {
+	background-color: rgb(253, 156, 115);
+	}
+.leaflet-oldie .marker-cluster-large div {
+	background-color: rgb(241, 128, 23);
+}
+
+.marker-cluster {
+	background-clip: padding-box;
+	border-radius: 20px;
+	}
+.marker-cluster div {
+	width: 30px;
+	height: 30px;
+	margin-left: 5px;
+	margin-top: 5px;
+
+	text-align: center;
+	border-radius: 15px;
+	font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
+	}
+.marker-cluster span {
+	line-height: 30px;
+	}

ThirdParties/Leaflet.markercluster-1.4.1/MarkerCluster.css

@@ -0,0 +1,14 @@
+.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
+	-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
+	-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
+	transition: transform 0.3s ease-out, opacity 0.3s ease-in;
+}
+
+.leaflet-cluster-spider-leg {
+	/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
+	-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
+	-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
+	-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
+	transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
+}

js/WP-GPX-Maps.js

@@ -18,7 +18,9 @@ var WPGPXMAPS = {
 			
 			var result = [];
 			
-			for (i=0; i < mapData.length; i++) 
+			var _len = mapData.length;
+		
+			for (i=0; i < _len; i++) 
 			{	
 				if (mapData[i] == null)
 				{
@@ -27,7 +29,7 @@ var WPGPXMAPS = {
 				}
 			}
 			
-			if (mapData.length != lastCut)
+			if ( (_len - 1 ) != lastCut)
 			{
 				result.push( mapData.slice(lastCut) );
 			}
@@ -885,7 +887,7 @@ var WPGPXMAPS = {
 		
 		
 		// Print WayPoints
-		if (!jQuery.isEmptyObject(waypoints))
+		if (!jQuery.isEmptyObject(waypoints) && waypoints.length > 0)
 		{
 			map.AddWaypoints(waypoints, waypointIcon);
 		}
@@ -893,50 +895,108 @@ var WPGPXMAPS = {
 		// Print Images
 		
 		jQuery("#ngimages_" + targetId).attr("style","display:block;position:absolute;left:-50000px");
-		jQuery("#ngimages_" + targetId + " span").each(function(){
 		
-			var imageLat  = jQuery(this).attr("lat");
-			var imageLon  = jQuery(this).attr("lon");
+		var nggImages = jQuery("#ngimages_" + targetId + " span").toArray();
 		
-			jQuery("img",this).each(function() {
-			
-				jQuery(this).load(function(){
-
-					var imageUrl  = jQuery(this).attr("src");
-					var img_w = jQuery(this).width();
-					var img_h = jQuery(this).height();
-					
-					imageLat = imageLat.replace(",", ".");
-					imageLon = imageLon.replace(",", ".");
-					
-					//var p = new google.maps.LatLng(imageLat, imageLon);
-					//bounds.extend(p);
-
-					var mc = new CustomMarker(map, p, imageUrl, img_w, img_h );
-					
-					ngImageMarkers.push(mc);
-					
-					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)
+		if (nggImages !== undefined && nggImages.length > 0)
 		{
-							a.click();
-						}
+			var photos = [];
+			
+			for (var i = 0; i < nggImages.length; i++) {
+				
+				var ngg_span = nggImages[i];
+				var ngg_span_a = ngg_span.children[0];
+				
+				var pos = [	
+							Number(ngg_span.getAttribute("lat")), 
+							Number(ngg_span.getAttribute("lon"))
+							];
+				
+				map.Bounds.push(pos);
+								
+				photos.push({
+							  "lat": pos[0],
+							  "lng": pos[1],
+							  "name": ngg_span_a.getAttribute("data-title"),
+							  "url": ngg_span_a.getAttribute("data-src"),
+							  "thumbnail": ngg_span_a.getAttribute("data-thumbnail")
 							});
 				
-				});
-			
-				if (jQuery(this).width() + jQuery(this).height() > 0)
-				{
-					jQuery(this).trigger("load");
 			}
 	
+			if (photos.length > 0)
+			{
+				var photoLayer = L.photo.cluster().on('click', function(evt) {
+					  var photo = evt.layer.photo;
+					  var template = '<img src="{url}" /></a><p>{name}</p>';
+					  evt.layer.bindPopup(L.Util.template(template, photo), {
+							minWidth: 'auto',
+					  }).openPopup();
 				});
 				
+				photoLayer.add(photos).addTo(map.map);	
+
+				map.CenterMap();	
+				
+				
+				/*
+				var showHideImagesCustomControl = L.Control.extend({
+				 
+					options: {
+						position: 'topleft' 
+						//control position - allowed: 'topleft', 'topright', 'bottomleft', 'bottomright'
+					},
+				 
+				  onAdd: function (map) {
+					  
+					var container = document.createElement('img');
+					container.class= "leaflet-bar leaflet-control leaflet-control-custom"
+					container.style.backgroundColor = 'white';
+					container.style.width = '30px';
+					container.style.height = '30px';
+					container.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
+					container.style.cursor = 'pointer';
+					container.title = lng.hideImages;
+					
+					container.onclick = function(){
+
+						var isImagesHidden = (controlUIhi.isImagesHidden == true);
+						var mapDiv = map.getDiv();
+						var center = map.getCenter();
+
+						if (isImagesHidden)
+						{
+							for (var i=0; i<ngImageMarkers.length; i++) {
+								ngImageMarkers[i].setMap(map);
+							}			
+							controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";	
+							controlUIhi.title = lng.hideImages;
+						}
+						else
+						{
+							for (var i=0; i<ngImageMarkers.length; i++) {
+								ngImageMarkers[i].setMap(null);
+							}			
+							controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/showImages.png";
+							controlUIhi.title = lng.showImages;
+						}
+						controlUIhi.isImagesHidden = !isImagesHidden;
+						return false;	
+
+					}
+
+					return container;
+				  },
+				 
 				});
 	
+				map.map.addControl(new showHideImagesCustomControl());
+				*/
+				
+			}
+
+		}
+			
 		/*
 		
 		// Nextgen Pro Lightbox FIX
@@ -972,43 +1032,6 @@ var WPGPXMAPS = {
 		}
 		*/
 
-		if ( jQuery("#ngimages_" + targetId + " span").length > 0 )
-		{
-		
-			// Set CSS for the control border
-			var controlUIhi = document.createElement('img');
-			controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";
-			controlUIhi.style.cursor = 'pointer';
-			controlUIhi.title = lng.hideImages;
-			controlDiv.appendChild(controlUIhi);
-
-			// Setup the click event listeners
-			google.maps.event.addDomListener(controlUIhi, 'click', function(event) {
-				var isImagesHidden = (controlUIhi.isImagesHidden == true);
-				var mapDiv = map.getDiv();
-				var center = map.getCenter();
-				
-				if (isImagesHidden)
-				{
-					for (var i=0; i<ngImageMarkers.length; i++) {
-						ngImageMarkers[i].setMap(map);
-					}			
-					controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/hideImages.png";	
-					controlUIhi.title = lng.hideImages;
-				}
-				else
-				{
-					for (var i=0; i<ngImageMarkers.length; i++) {
-						ngImageMarkers[i].setMap(null);
-					}			
-					controlUIhi.src = pluginUrl + "/wp-gpx-maps/img/showImages.png";
-					controlUIhi.title = lng.showImages;
-				}
-				controlUIhi.isImagesHidden = !isImagesHidden;
-				return false;			
-			});
-
-		}		
 		
 		// Print Track
 		if (mapData != '')		

readme.txt

@@ -5,7 +5,7 @@ Donate link: https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_i
 Tags: maps, gpx, gps, graph, chart, leaflet, track, garmin, image, nextgen-gallery, nextgen, exif, OpenStreetMap, OpenCycleMap, Hike&Bike, heart rate, heartrate, cadence
 Requires at least: 2.0.0
 Tested up to: 4.9.8
-Stable tag: 1.6.03
+Stable tag: 1.6.04
 
 Draws a gpx track with altitude graph. You can also display your nextgen gallery images in the map.
 
@@ -153,6 +153,11 @@ Yes!
 1. Altitude & Speed & Hearth rate
 
 == Changelog ==
+= 1.6.04 = 
+* NGG gallery is working
+* Getting HR, Cad and Temp working again (thanks to cyclinggeorgian)
+* Fix javascript errors 
+* Fix multiple traks gpx
 = 1.6.03 = 
 * Fix syntax error causing graph not to display (thanks to nickstabler)
 = 1.6.02 =

wp-gpx-maps.php

@@ -3,7 +3,7 @@
  * Plugin Name: WP-GPX-Maps
  * Plugin URI: http://www.devfarm.it/
  * Description: Draws a GPX track with altitude chart
- * Version: 1.6.03
+ * Version: 1.6.04
  * Author: Bastianon Massimo
  * Author URI: http://www.devfarm.it/
  * Text Domain: wp-gpx-maps
@@ -64,33 +64,21 @@ function enqueue_WP_GPX_Maps_scripts_admin($hook)
 function enqueue_WP_GPX_Maps_scripts() {		
 
 	/* leaflet */
-
 	wp_register_style( 'leaflet', plugins_url( '/ThirdParties/Leaflet_1.3.1/leaflet.css', __FILE__ ), array(), "1.3.1" );
-	wp_enqueue_style( 'leaflet' );
+	wp_enqueue_style( 'leaflet' );	wp_register_style( 'leaflet.markercluster', plugins_url( '/ThirdParties/Leaflet.markercluster-1.4.1/MarkerCluster.css', __FILE__ ), array(), "0" );	wp_enqueue_style( 'leaflet.markercluster' );		wp_register_style( 'leaflet.Photo', plugins_url( '/ThirdParties/Leaflet.Photo/Leaflet.Photo.css', __FILE__ ), array(), "0" );	wp_enqueue_style( 'leaflet.Photo' );
 	
 	wp_register_style( 'leaflet.fullscreen', plugins_url( '/ThirdParties/leaflet.fullscreen-1.1.4/Control.FullScreen.css', __FILE__ ), array(), "1.3.1" );
 	wp_enqueue_style( 'leaflet.fullscreen' );
 
-	wp_register_script('leaflet', plugins_url( '/ThirdParties/Leaflet_1.3.1/leaflet.js', __FILE__ ), array(), "1.3.1" );
-	wp_register_script('leaflet.fullscreen', plugins_url( '/ThirdParties/leaflet.fullscreen-1.1.4/Control.FullScreen.js', __FILE__ ), array(), "1.1.4" );
+	wp_register_script('leaflet', plugins_url( '/ThirdParties/Leaflet_1.3.1/leaflet.js', __FILE__ ), array(), "1.3.1" );	wp_register_script('leaflet.markercluster', plugins_url( '/ThirdParties/Leaflet.markercluster-1.4.1/leaflet.markercluster.js', __FILE__ ), array('leaflet'), "0" );	wp_register_script('leaflet.Photo', plugins_url( '/ThirdParties/Leaflet.Photo/Leaflet.Photo.js', __FILE__ ), array('leaflet','leaflet.markercluster'), "0" );
+	wp_register_script('leaflet.fullscreen', plugins_url( '/ThirdParties/leaflet.fullscreen-1.1.4/Control.FullScreen.js', __FILE__ ), array('leaflet'), "1.1.4" );
 
 	/* chartjs */
-	
 	wp_register_script('chartjs', plugins_url( '/js/Chart.min.js', __FILE__ ), array(), "2.7.2" );
-	wp_register_script('WP-GPX-Maps', plugins_url( '/js/WP-GPX-Maps.js', __FILE__ ), array('jquery','leaflet','chartjs'), "1.6.03" );
 	
-	/*
-	$wpgpxmaps_googlemapsv3_apikey = get_option('wpgpxmaps_googlemapsv3_apikey');
+	wp_register_script('WP-GPX-Maps', plugins_url( '/js/WP-GPX-Maps.js', __FILE__ ), array('jquery','leaflet','chartjs'), "1.6.04" );
 
-	if ($wpgpxmaps_googlemapsv3_apikey)	{		
-		wp_enqueue_script('googlemaps', '//maps.googleapis.com/maps/api/js?key='.$wpgpxmaps_googlemapsv3_apikey, null, null);					
-	}	
-	else {		
-		wp_enqueue_script('googlemaps', '//maps.googleapis.com/maps/api/js', null, null);
-	}
-	*/	
-	
-	wp_enqueue_script('leaflet');
+	wp_enqueue_script('leaflet');	wp_enqueue_script('leaflet.markercluster');	wp_enqueue_script('leaflet.Photo');
 	wp_enqueue_script('leaflet.fullscreen');
 	wp_enqueue_script('jquery');
 	wp_enqueue_script('chartjs'); 	

wp-gpx-maps_utils.php

@@ -220,7 +220,7 @@
 		
 		$gpx->registerXPathNamespace('a', 'http://www.topografix.com/GPX/1/0');
 		$gpx->registerXPathNamespace('b', 'http://www.topografix.com/GPX/1/1');
-		$gpx->registerXPathNamespace('gpxtpx', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
+		$gpx->registerXPathNamespace('ns3', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
 		
 		$nodes = $gpx->xpath('//trk | //a:trk | //b:trk');
 		//normal gpx
@@ -235,7 +235,7 @@
 				
 				$trk->registerXPathNamespace('a', 'http://www.topografix.com/GPX/1/0');
 				$trk->registerXPathNamespace('b', 'http://www.topografix.com/GPX/1/1');
-				$trk->registerXPathNamespace('gpxtpx', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
+				$trk->registerXPathNamespace('ns3', 'http://www.garmin.com/xmlschemas/TrackPointExtension/v1');
 
 				$trkpts = $trk->xpath('//trkpt | //a:trkpt | //b:trkpt');
 				
@@ -265,12 +265,12 @@
 						
 						$arr = json_decode( json_encode($trkpt->extensions) , 1);
 
-						if (isset($arr['gpxtpx:TrackPointExtension']))
+						if (isset($arr['ns3:TrackPointExtension']))
 						{
-							$tpe = $arr['gpxtpx:TrackPointExtension'];
-							$hr =    @$tpe["gpxtpx:hr"];
-							$atemp = @$tpe["gpxtpx:atemp"];
-							$cad =   @$tpe["gpxtpx:cad"];			
+							$tpe = $arr['ns3:TrackPointExtension'];
+							$hr =    @$tpe["ns3:hr"];
+							$atemp = @$tpe["ns3:atemp"];
+							$cad =   @$tpe["ns3:cad"];			
 						}
 						else if (isset($arr['TrackPointExtension']))
 						{