wp-gpx-maps/js/WP-GPX-Maps.js

/*
Plugin Name: WP-GPX-Maps
Plugin URI: http://www.devfarm.it/
Description: Draws a gpx track with altitude graph
Version: 1.6.02
Author: Bastianon Massimo
Author URI: http://www.devfarm.it/
*/

var WPGPXMAPS = {
	
	Utils : {
		// in case of multiple polylines this function divide the points of each polyline
		DividePolylinesPoints : function (mapData)
		{

			var lastCut = 0;
			
			var result = [];
		
			for (i=0; i < mapData.length; i++) 
			{	
				if (mapData[i] == null)
				{
					result.push( mapData.slice(lastCut == 0 ? 0 : lastCut + 1 ,i) );
					lastCut = i;
				}
			}
			
			if (mapData.length != lastCut)
			{
				result.push( mapData.slice(lastCut) );
			}
		
			return result;
			
		},
		
		GetItemFromArray : function(arr,index)
		{
			try
			{
			  return arr[index];
			}
			catch(e)
			{
				return [0,0];
			}
		},

		
	},
	
	MapEngines : {
		/* NOT WORKING AND TESTED! old code copy&pate */
		GoogleMaps : function(){
			this.map = null,
			this.EventSelectChart = null,
			this.Polylines = [],
			this.init = function(targetElement, mapType, scrollWheelZoom, ThunderforestApiKey){
				
				var mapTypeIds = [];
				for(var type in google.maps.MapTypeId) {
					mapTypeIds.push(google.maps.MapTypeId[type]);
				}
				mapTypeIds.push("OSM1");
				mapTypeIds.push("OSM2");
				mapTypeIds.push("OSM3");
				mapTypeIds.push("OSM4");
				mapTypeIds.push("OSM5");
				mapTypeIds.push("OSM6");
				
				var ngImageMarkers = [];
				
				switch (mapType)
				{
					case 'TERRAIN': { mapType = google.maps.MapTypeId.TERRAIN; break;}
					case 'SATELLITE': { mapType = google.maps.MapTypeId.SATELLITE; break;}
					case 'ROADMAP': { mapType = google.maps.MapTypeId.ROADMAP; break;}
					case 'OSM1': { mapType = "OSM1"; break;}
					case 'OSM2': { mapType = "OSM2"; break;}
					case 'OSM3': { mapType = "OSM3"; break;}
					case 'OSM4': { mapType = "OSM4"; break;}
					case 'OSM5': { mapType = "OSM5"; break;}
					case 'OSM6': { mapType = "OSM6"; break;}
					default: { mapType = google.maps.MapTypeId.HYBRID; break;}
				}
				
				if ( mapType == "TERRAIN" || mapType == "SATELLITE" || mapType == "ROADMAP" )
				{
					// google maps
				} else {
					// Show OpenStreetMaps credits
					$(el_osm_credits).show();
				}
				
				this.map = new google.maps.Map(el_map, {
					mapTypeId: mapType,
					scrollwheel: (zoomOnScrollWheel == 'true'),
					mapTypeControlOptions: {
						style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
						mapTypeIds: mapTypeIds
					}
				}); 
					
			
				this.map.mapTypes.set("OSM1", new google.maps.ImageMapType({
					getTileUrl: function(coord, zoom) {
						return "https://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
					},
					tileSize: new google.maps.Size(256, 256),
					name: "OSM",
					alt : "Open Street Map",
					maxZoom: 18
				}));

				
				this.map.mapTypes.set("OSM2", new google.maps.ImageMapType({
					getTileUrl: function(coord, zoom) {
						if (hasThunderforestApiKey)
							return "https://a.tile.thunderforest.com/cycle/" + zoom + "/" + coord.x + "/" + coord.y + ".png?apikey=" + ThunderforestApiKey;
						else
							return "http://a.tile.opencyclemap.org/cycle/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
					},
					tileSize: new google.maps.Size(256, 256),
					name: "OCM",
					alt : "Open Cycle Map",
					maxZoom: 18
				}));
				
				this.map.mapTypes.set("OSM4", new google.maps.ImageMapType({
					getTileUrl: function(coord, zoom) {
						if (hasThunderforestApiKey)
							return "https://a.tile.thunderforest.com/transport/" + zoom + "/" + coord.x + "/" + coord.y + ".png?apikey=" + ThunderforestApiKey;
						else
							return "http://a.tile2.opencyclemap.org/transport/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
					},
					tileSize: new google.maps.Size(256, 256),
					name: "OCM-Tran",
					alt : "Open Cycle Map - Transport",
					maxZoom: 18
				}));
				
				this.map.mapTypes.set("OSM5", new google.maps.ImageMapType({
					getTileUrl: function(coord, zoom) {
						if (hasThunderforestApiKey)
							return "https://a.tile.thunderforest.com/landscape/" + zoom + "/" + coord.x + "/" + coord.y + ".png?apikey=" + ThunderforestApiKey;
						else
							return "http://a.tile3.opencyclemap.org/landscape/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
					},
					tileSize: new google.maps.Size(256, 256),
					name: "OCM-Land",
					alt : "Open Cycle Map - Landscape",
					maxZoom: 18
				}));
					
				this.map.mapTypes.set("OSM6", new google.maps.ImageMapType({
					getTileUrl: function(coord, zoom) {
						return "https://tile2.maptoolkit.net/terrain/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
					},
					tileSize: new google.maps.Size(256, 256),
					name: "MTK-Terr",
					alt : "MapToolKit - Terrain",
					maxZoom: 18
				}));
						
				
				
			},
			this.AppPolylines = function(mapData, color1, currentIcon, startIcon, endIcon) {
				
				var points = [];
				var lastCut=0;
				var polylinenes = [];
				var polyline_number=0;
				var color=0;
				for (i=0; i < mapData.length; i++) 
				{	
					if (mapData[i] == null)
					{

						var poly = new google.maps.Polyline({
							path: points.slice(lastCut,i),
							strokeColor: color,
							strokeOpacity: .7,
							strokeWeight: 4,
							map: this.map
						});
						polylinenes.push(poly);
						lastCut=i;
						polyline_number= polyline_number +1;
						//var p = new google.maps.LatLng(mapData[i-1][0], mapData[i-1][1]);
						//points.push(p);
						//bounds.extend(p);
					}
					else
					{
						var p = new google.maps.LatLng(mapData[i][0], mapData[i][1]);
						points.push(p);
						bounds.extend(p);			
					}
				}
				
				if (points.length != lastCut)
				{
					if ( polyline_number < color1.length)
					{
						color=color1[polyline_number];
					}
					else
					{
						color=color1[color1.length-1];
					}
					var poly = new google.maps.Polyline({
						path: points.slice(lastCut),
						strokeColor: color,
						strokeOpacity: .7,
						strokeWeight: 4,
						map: this.map
					});

					polylinenes.push(poly);			
					currentPoints = [];
					polyline_number= polyline_number +1;
				}
				
				if (startIcon != '')
				{
					var startIconImage = new google.maps.MarkerImage(startIcon);
					var startMarker = new google.maps.Marker({
							  position: points[0],
							  map: this.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: this.map,
							  title: "Start",
							  animation: google.maps.Animation.DROP,
							  icon: endIconImage,
							  zIndex: 10
						  });
				
				}

				var first = WPGPXMAPS.Utils.GetItemFromArray(mapData,0)
				
				if (currentIcon == '')
				{
					currentIcon = "https://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)
				);
				
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(first[0], first[1]),
					title:"Start",
					icon: current,
					map: this.map,
					zIndex: 10
				});
				
				for (i=0; i < polylinenes.length; i++) 
				{	

					google.maps.event.addListener(polylinenes[i],'mouseover',function(event){
						if (marker)
						{
							marker.setPosition(event.latLng);	
							marker.setTitle(lng.currentPosition);
							if (myChart)
							{
								var l1 = event.latLng.lat();
								var l2 = event.latLng.lng();
								var ci = getClosestIndex(mapData,l1,l2);
								var activeElements = [];
								var seriesLen = myChart.data.datasets.length;												
								for(var i=0; i<seriesLen;i++)
								{
									activeElements.push(myChart.chart.getDatasetMeta(i).data[ci]);
								}
								if (activeElements.length > 0)
								{
									myChart.options.customLine.x = activeElements[0]._model.x;
									if (isNaN(myChart.tooltip._eventPosition))
									{
										myChart.tooltip._eventPosition = {
												x: activeElements[0]._model.x, 
												y: activeElements[0]._model.y
											};
									}								
									myChart.tooltip._active = activeElements;
									myChart.tooltip.update(true);
									myChart.draw();
								}

							}
						}
					});		
				}
				
				
				
			},
			this.AddWaypoints = function(waypoints, waypointIcon)
			{
				
			},
			this.MoveMarkerToPosition = function(LatLon, updateChart)
			{
				
			}
		},
		
		Leaflet : function(){
			this.Bounds = [],
			this.lng = {},
			this.map = null,
			this.EventSelectChart = null,
			this.Polylines = [],
			this.CurrentPositionMarker = null,
			this.CurrentGPSPositionMarker = null,
			this.init = function(targetElement, mapType, scrollWheelZoom, ThunderforestApiKey){
				
				this.map = L.map(targetElement, 
					{ 
						scrollWheelZoom : scrollWheelZoom, 
					}		
				);
				
				// create fullscreen control
				var fsControl = new L.Control.FullScreen();
				// add fullscreen control to the map
				this.map.addControl(fsControl);				
				
				L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
					attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
				}).addTo(this.map);

				var hasThunderforestApiKey = (ThunderforestApiKey + '').length > 0;
				
				var baseMaps = {};
				
				var overlayMaps = { };
				
				var defaultMpaLayer = null;
				
				if (hasThunderforestApiKey)
				{
					baseMaps["Open Cycle Map"] = L.tileLayer('https://a.tile.thunderforest.com/cycle/{z}/{x}/{y}.png?apikey=' + ThunderforestApiKey, {
						maxZoom: 18,
						attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
							'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
							'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
					});
					
					baseMaps["Open Cycle Map - Transport"] = L.tileLayer('https://a.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=' + ThunderforestApiKey, {
						maxZoom: 18,
						attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
							'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
							'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
					});			
				
					baseMaps["Open Cycle Map - Landscape"] = L.tileLayer('https://a.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=' + ThunderforestApiKey, {
						maxZoom: 18,
						attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
							'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
							'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
						});

				}
				else
				{
				
					baseMaps["Open Cycle Map"] = L.tileLayer('http://a.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', {
						maxZoom: 18,
						attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
							'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
							'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
					});
				
					baseMaps["Open Cycle Map - Transport"] = L.tileLayer('https://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', {
						maxZoom: 18,
						attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
							'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
							'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
					});
						
					baseMaps["Open Cycle Map - Landscape"] = L.tileLayer('https://a.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', {
						maxZoom: 18,
						attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
							'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
							'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
					});

				}

				baseMaps["Open Street Map"] = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
						'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
						'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				});

				
				baseMaps["MapToolKit - Terrain"] = L.tileLayer('https://tile2.maptoolkit.net/terrain/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
						'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
						'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				});
				
				baseMaps["Humanitarian Map Style"] = L.tileLayer('https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
						'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
						'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				});
				/*
				baseMaps["Open Ski Map"] = L.tileLayer('http://tiles.skimap.org/openskimap/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
						'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
						'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				});
				*/
				
				baseMaps["Hike & Bike"] = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
						'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
						'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				});		

				baseMaps["Open Sea Map"] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', {
					maxZoom: 18,
					attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
						'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
						'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
				});		

				
				switch (mapType)
				{
					case 'OSM1': { 
						baseMaps["Open Street Map"].addTo(this.map);
						break;
					}
					case 'OSM2': { 
						baseMaps["Open Cycle Map"].addTo(this.map);
						break;
					}
					case 'OSM4': { 
						baseMaps["Open Cycle Map - Transport"].addTo(this.map);
						break;
					}
					case 'OSM5': { 
						baseMaps["Open Cycle Map - Landscape"].addTo(this.map);
						break;
					}
					case 'OSM6': { 
						baseMaps["MapToolKit - Terrain"].addTo(this.map);
						break;
					}
					case 'OSM7': { 
						baseMaps["Humanitarian Map Style"].addTo(this.map);
						break;
					}
					case 'OSM8': { 
						baseMaps["Open Ski Map"].addTo(this.map);
						break;
					}
					case 'OSM9': { 
						baseMaps["Hike & Bike"].addTo(this.map);
						break;
					}
					case 'OSM10': { 
						baseMaps["Open Sea Map"].addTo(this.map);
						break;
					}
					
					default: { 
						baseMaps["Open Street Map"].addTo(this.map);
					}
				}				
				
				L.control.layers(baseMaps, overlayMaps).addTo(this.map);

			},
			
			this.AppPolylines = function(mapData, color1, currentIcon, startIcon, endIcon) {
				
				var first = WPGPXMAPS.Utils.GetItemFromArray(mapData,0)
				
				if (currentIcon == '')
				{
					currentIcon = "https://maps.google.com/mapfiles/kml/pal4/icon25.png";
				}
				
				var CurrentPositionMarker = L.marker(first, {icon: L.icon({
																				iconUrl: currentIcon,
																				iconSize:     [32, 32], // size of the icon
																				iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
																			})
																		});
				CurrentPositionMarker.addTo(this.map);
				CurrentPositionMarker.title = "Start";
				
				this.CurrentPositionMarker = CurrentPositionMarker;
					
				var pointsArray = WPGPXMAPS.Utils.DividePolylinesPoints(mapData);
				
				var lng = this.lng;
				var EventSelectChart = this.EventSelectChart;
				
				this.Bounds = mapData;
				
				this.CenterMap();
				
				for (i=0; i < pointsArray.length; i++) 
				{
					
					if ( i < color1.length)
					{
						color=color1[i];
					}
					else
					{
						color=color1[color1.length-1];
					}
					
					try
					{
						var polyline = L.polyline(pointsArray[i], {color: color}).addTo(this.map);
						this.Polylines.push(polyline);
						
						var context = this;
						
						this.Polylines[i].on('mousemove', function(e) { 
							context.MoveMarkerToPosition([e.latlng.lat, e.latlng.lng], true);
						});						
					}	
					catch(err) {						
					}
					
				}				
			
				if (startIcon != '')
				{
					
					var startMarker = L.marker(mapData[0], {icon: L.icon({
																		iconUrl: startIcon,
																		iconSize:     [32, 32], // size of the icon
																		iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
																	})
																});
					startMarker.addTo(this.map);
					startMarker.title = "Start";
					

				}

				if (endIcon != '')
				{
					  
					var endMarker = L.marker(mapData[ mapData.length - 1 ], {icon: L.icon({
																		iconUrl: endIcon,
																		iconSize:     [32, 32], // size of the icon
																		iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
																	})
																});
					endMarker.addTo(this.map);
					endMarker.title = "End";
				
				}


	/*			
				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)
				);
				
				var marker = new google.maps.Marker({
					position: new google.maps.LatLng(first[0], first[1]),
					title:"Start",
					icon: current,
					map: map,
					zIndex: 10
				});

				for (i=0; i < polylinenes.length; i++) 
				{	

					google.maps.event.addListener(polylinenes[i],'mouseover',function(event){
						if (marker)
						{
							marker.setPosition(event.latLng);	
							marker.setTitle(lng.currentPosition);
							if (myChart)
							{
								var l1 = event.latLng.lat();
								var l2 = event.latLng.lng();
								var ci = getClosestIndex(mapData,l1,l2);
								var activeElements = [];
								var seriesLen = myChart.data.datasets.length;												
								for(var i=0; i<seriesLen;i++)
								{
									activeElements.push(myChart.chart.getDatasetMeta(i).data[ci]);
								}
								if (activeElements.length > 0)
								{
									myChart.options.customLine.x = activeElements[0]._model.x;
									if (isNaN(myChart.tooltip._eventPosition))
									{
										myChart.tooltip._eventPosition = {
												x: activeElements[0]._model.x, 
												y: activeElements[0]._model.y
											};
									}								
									myChart.tooltip._active = activeElements;
									myChart.tooltip.update(true);
									myChart.draw();
								}

							}
						}
					});		
				}
				
		*/						
				
			},
					
			this.AddWaypoints = function(waypoints, waypointIcon)
			{	
			
				var icon = L.icon({
					iconUrl: 'https://maps.google.com/mapfiles/ms/micons/flag.png',
					iconSize:     [32, 32], // size of the icon
					iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
				});
						
				if (waypointIcon!='')
				{
					icon = L.icon({
						iconUrl: 'waypointIcon',
						iconSize:     [32, 32], // size of the icon
						iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
					});
				}
				
				for (i = 0; i < waypoints.length; i++) { 
					var wpt = waypoints[i];
					
					this.Bounds.push([wpt.lat,wpt.lon]);
					
					var lat= wpt.lat;
					var lon= wpt.lon;
					var sym= wpt.sym;
					var typ= wpt.type;

					if (icon.img) {
						icon.iconUrl = wpt.img;
						wsh = '';
					}
					
					var marker = L.marker([lat, lon], {icon: icon });

					var cnt = '';	
					
					if (wpt.name=='')
					{
						cnt = "<div>" + unescape(wpt.desc) + "</div>";
					}
					else
					{
						cnt = "<div><b>" + wpt.name + "</b><br />" + unescape(wpt.desc) + "</div>";
					}
					
					cnt += "<br /><p><a href='https://maps.google.com?daddr=" + lat + "," + lon + "' target='_blank'>Itin&eacute;raire</a></p>";

					marker.addTo(this.map).bindPopup(cnt);
					
				}	
			
				this.CenterMap();				
				
			},
			
			this.MoveMarkerToPosition = function(LatLon, updateChart) {
				if (this.CurrentPositionMarker == null)
					return;
				
				this.CurrentPositionMarker.setLatLng(LatLon);	
				
				if (this.lng)
					this.CurrentPositionMarker.title = this.lng.currentPosition;
				
				if (updateChart == true && this.EventSelectChart)
					this.EventSelectChart(LatLon);
						
			},
			this.CenterMap = function()
			{
				this.map.fitBounds(this.Bounds);
			}
			
		}
		
	}
	
};

(function ( $ ) {

    $.fn.wpgpxmaps = function( params ) {

		var targetId = params.targetId;
		var mapType = params.mapType;
		var mapData = params.mapData;
		var graphDist = params.graphDist;
		var graphEle = params.graphEle;
		var graphSpeed = params.graphSpeed;
		var graphHr = params.graphHr;
		var graphAtemp = params.graphAtemp;
		var graphCad = params.graphCad;
		var graphGrade = params.graphGrade;
		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 color4 = params.color4;
		var color5 = params.color5;
		var color6 = params.color6;
		var color7 = params.color7;
		var chartFrom1 = params.chartFrom1;
		var chartTo1 = params.chartTo1;
		var chartFrom2 = params.chartFrom2;
		var chartTo2 = params.chartTo2;
		var startIcon = params.startIcon;
		var waypointIcon = params.waypointIcon;
		var endIcon = params.endIcon;
		var currentIcon = params.currentIcon;
		var zoomOnScrollWheel = params.zoomOnScrollWheel;
		var lng = params.langs;
		var pluginUrl = params.pluginUrl;
		var usegpsposition = params.usegpsposition;
		var currentpositioncon= params.currentpositioncon;
		var ThunderforestApiKey = params.TFApiKey;
		
		var hasThunderforestApiKey = (ThunderforestApiKey + '').length > 0;
		
		var _formats=[];

		// Unit of measure settings
		var l_s;
		var l_x;
		var l_y;
		var l_grade = { suf : "%", dec : 1 };
		var l_hr = { suf : "", dec : 0 };
		var l_cad = { suf : "", dec : 0 };				
	
		var el = document.getElementById("wpgpxmaps_" + targetId);
		var el_map = document.getElementById("map_" + targetId);
		var el_chart = document.getElementById("chart_" + targetId);
		var el_report = document.getElementById("report_" + targetId);
		var el_osm_credits = document.getElementById("wpgpxmaps_" + targetId + "_osm_footer");
		
		var mapWidth = el_map.style.width;
			
		var map = new WPGPXMAPS.MapEngines.Leaflet();
		map.lng = lng;
		map.init("map_" + targetId, 
						mapType, 
						(zoomOnScrollWheel == 'true'),
						ThunderforestApiKey);
					
		map.EventSelectChart = function(LatLon) 
		{
			
			if (myChart)
			{
				var l1 = LatLon[0];
				var l2 = LatLon[1];
				var ci = getClosestIndex(mapData,l1,l2);
				var activeElements = [];
				var seriesLen = myChart.data.datasets.length;												
				for(var i=0; i<seriesLen;i++)
				{
					activeElements.push(myChart.chart.getDatasetMeta(i).data[ci]);
				}
				if (activeElements.length > 0)
				{
					myChart.options.customLine.x = activeElements[0]._model.x;
					if (isNaN(myChart.tooltip._eventPosition))
					{
						myChart.tooltip._eventPosition = {
								x: activeElements[0]._model.x, 
								y: activeElements[0]._model.y
							};
					}								
					myChart.tooltip._active = activeElements;
					myChart.tooltip.update(true);
					myChart.draw();
				}

			}			
		}
	
		//var bounds = new google.maps.LatLngBounds();
		
	
		if ( usegpsposition == "true"  )
		{

			// Try HTML5 geolocation
			if(navigator.geolocation) {
				
				var context = map;
			
				navigator.geolocation.watchPosition(function(position)
				{
					
					var radius = position.coords.accuracy / 2;

					// user position
					var pos = [position.coords.latitude, position.coords.longitude];
				
					if (context.CurrentGPSPositionMarker == null)
					{
						if (currentpositioncon == '')
						{
							currentpositioncon = "https://maps.google.com/mapfiles/kml/pal4/icon25.png";
						}						
						
						context.CurrentGPSPositionMarker = L.marker(pos, {icon: L.icon({
																		iconUrl: currentpositioncon,
																		iconSize:     [32, 32], // size of the icon
																		iconAnchor:   [16, 16], // point of the icon which will correspond to marker's location
																	})
																})
																.addTo(context.map)
																.bindPopup(lng.currentPosition)
																.openPopup();
																
					}
					else 
					{
						context.CurrentGPSPositionMarker.setLatLng(pos);
					}
				
					context.Bounds.push(pos);
					
					context.CenterMap();				
				
				}, 
				function(e){
					// some errors
				}, 
				{
				  enableHighAccuracy: false,
				  timeout: 5000,
				  maximumAge: 0
				});
			}
		
		}
		
		
		// Print WayPoints
		if (!jQuery.isEmptyObject(waypoints))
		{
			map.AddWaypoints(waypoints, waypointIcon);
		}
		
		// 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");
			
			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)
						{
							a.click();
						}
					});

				});
			
				if (jQuery(this).width() + jQuery(this).height() > 0)
				{
					jQuery(this).trigger("load");
				}

			});
		
		});
		
		/*
		
		// Nextgen Pro Lightbox FIX
		var _xx = jQuery("#ngimages_" + targetId + " .nextgen_pro_lightbox");
		if (_xx.length > 0)
		{
		
			var rnd1 = Math.random().toString(36).substring(7);
			var rnd2 = Math.random().toString(36).substring(7);
		
			//get first gallery without images
			for (var _temp in galleries) {  
				var _gal = galleries[_temp];
				
				if (_gal.source == "random_images" && _gal.wpgpxmaps != true )
				{
				
					_gal.source == "galleries";
					_gal.wpgpxmaps = true;
					_transient_id = _temp.replace("gallery_","")
					_gal["entity_ids"] = [];
					_gal["image_ids"] = [];
					_gal["gallery_ids"] = [96];
					for (var i=0;i<_xx.length;i++)
					{ 
						var __xx = jQuery(_xx[i]);
						__xx.attr("data-nplmodal-gallery-id", _transient_id);
						_gal["image_ids"].push(__xx.attr("data-image-id"));			
					}
					break;
				}
			}
		}
		*/
		
		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 != '')		
		{
			map.AppPolylines(mapData, color1, currentIcon, startIcon, endIcon);
		}
		
		/*
		map.setCenter(bounds.getCenter()); 
		map.fitBounds(bounds);
		*/
			
		// FIX post tabs	
		var $_tab = $(el).closest(".wordpress-post-tabs, .tab-pane").eq(0);	
		if ($_tab)
		{
			var contextMap = map;
			
			var FixMapSize = function(e)
			{
				setTimeout(function(e){				
					//google.maps.event.trigger(map, 'resize');					
					contextMap.map.invalidateSize();
					contextMap.CenterMap();
					tabResized = true;
				}, 300);				
			}
			
			$(".wpsm_nav-tabs a").click(FixMapSize);
			
			$("div > ul > li > a", $_tab).click(FixMapSize);
		}	
		
	
		var graphh = jQuery('#myChart_' + params.targetId).css("height");
		
		if (graphDist != '' && (graphEle != '' || graphSpeed != '' || graphHr != '' || graphAtemp != '' || graphCad != '') && graphh != "0px")
		{

			var valLen = graphDist.length;
		
		
			if (unit=="1")
			{
				l_x = { suf : "mi", dec : 1 };
				l_y = { suf : "ft", dec : 0 };
			}
			else if (unit=="2")
			{
				l_x = { suf : "km", dec : 1 };
				l_y = { suf : "m", dec : 0 };
			}
			else if (unit=="3")
			{
				l_x = { suf : "NM", dec : 1 };
				l_y = { suf : "m", dec : 0 };
			}		
			else if (unit=="4")
			{
				l_x = { suf : "mi", dec : 1 };
				l_y = { suf : "m", dec : 0 };
			}
			else if (unit=="5")
			{
				l_x = { suf : "NM", dec : 1 };
				l_y = { suf : "ft", dec : 0 };
			}
			else
			{
				l_x = { suf : "m", dec : 0 };
				l_y = { suf : "m", dec : 0 };
			}
			
			var nn = 1111.1;
			var _nn = nn.toLocaleString();
			var _nnLen = _nn.length;
			var decPoint = _nn.substring(_nnLen - 2, _nnLen - 1);
			var thousandsSep = _nn.substring(1, 2);
			
			if (decPoint == "1")
				decPoint = ".";
				
			if (thousandsSep == "1")
				thousandsSep = "";		
				
			// define the options
			var hoptions = {
				type: 'line',
				data: {
					datasets: [],
				},
				borderWidth: 1,
				options: {
					animation: {
						//duration: 0, // general animation time
					},
					hover: {
						//animationDuration: 0, // duration of animations when hovering an item
					},
					//responsiveAnimationDuration: 0, // animation duration after a resize
					customLine: {
						color: 'gray'
					},
					scales: {
						yAxes: [],
			            xAxes: [{
			                type: 'linear',
							ticks: {
								suggestedMin: 0,
								max: graphDist[graphDist.length-1],
								// Include a dollar sign in the ticks
								callback: function(value, index, values) {
									return Math.round(value, l_x.dec) + l_x.suf;
								}
							}
			            }]
					},
					tooltips: {
						position: 'average',
						mode: 'index',
						intersect: false,
						callbacks : {
							title: function(tooltipItems, data) {
								//Return value for title
								var fpt = _formats[0];
								return Math.round(tooltipItems[0].xLabel, fpt.dec) + fpt.suf;;
							},
							label : function(tooltipItem, data) {
								// format list values
								var label = data.datasets[tooltipItem.datasetIndex].label || '';
								var fpt = _formats[tooltipItem.datasetIndex];
								if (label) {
									label += ': ';
								}
								label += Math.round(tooltipItem.yLabel, fpt.dec) + fpt.suf;
								return label;
							},
							footer : function(tooltipItem){
								// move the point in map
								var i = tooltipItem[0].index;
								var point = WPGPXMAPS.Utils.GetItemFromArray(mapData,i)
								map.MoveMarkerToPosition(point, false);

							}						
						}
					},
				},
				
				plugins: [{
					beforeEvent: function(chart, e) {
						if ((e.type === 'mousemove')
						&& (e.x >= e.chart.chartArea.left)
						&& (e.x <= e.chart.chartArea.right)
						) {
							chart.options.customLine.x = e.x;
						}
					},
					afterDraw: function(chart, easing) {
						var ctx = chart.chart.ctx;
						var chartArea = chart.chartArea;
						var x = chart.options.customLine.x;
						if (!isNaN(x)) {
							ctx.save();
							ctx.strokeStyle = chart.options.customLine.color;
							ctx.moveTo(chart.options.customLine.x, chartArea.bottom);
							ctx.lineTo(chart.options.customLine.x, chartArea.top);
							ctx.stroke();
							ctx.restore();
						}
					}
				}],
				
				labels : graphDist,
				
			};
		
			if (graphEle != '')
			{
				
				var myData = mergeArrayForChart(graphDist, graphEle);

				var yaxe = {
					type: 'linear',
					ticks: {
						// Include a dollar sign in the ticks
						callback: function(value, index, values) {
							return Math.round(value, l_y.dec) + l_y.suf;
						}
					},
					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
				};
		
				if ( chartFrom1 != '' )
				{
					yaxe.min = chartFrom1;
					yaxe.startOnTick = false;
				}
				else { 
					yaxe.min = myData.Min; 
				}
				
				if ( chartTo1 != '' )
				{
					yaxe.max = chartTo1;
					yaxe.endOnTick = false;
				}
				else { 
					yaxe.max = myData.Max; 
				}
				_formats.push(l_y)
				hoptions.options.scales.yAxes.push(yaxe);
				hoptions.data.datasets.push( wpgpxmapsGetDataset(lng.altitude, myData.Items, color2, yaxe.id ));		

			}
			
			if (graphSpeed != '') {
				if (unitspeed == '6') /* min/100m */				
				{					
					l_s = { suf : "min/100m", dec : 2 };				
				} 
				else if (unitspeed == '5') /* knots */
				{
					l_s = { suf : "knots", dec : 2 };
				} 
				else if (unitspeed == '4') /* min/miles */
				{
					l_s = { suf : "min/mi", dec : 2 };
				} 
				else if (unitspeed == '3') /* min/km */
				{
					l_s = { suf : "min/km", dec : 2 };
				} 
				else if (unitspeed == '2') /* miles/h */
				{
					l_s = { suf : "mi/h", dec : 0 };
				} 
				else if (unitspeed == '1') /* km/h */
				{
					l_s = { suf : "km/h", dec : 0 };
				} 
				else
				{
					l_s = { suf : "m/s", dec : 0 };
				}
				
				var myData = mergeArrayForChart(graphDist, graphSpeed);

				var yaxe = { 
					type: 'linear',
					ticks: {
						// Include a dollar sign in the ticks
						callback: function(value, index, values) {
							return Math.round(value, l_s.dec) + l_s.suf;
						}
					},
					position: 'right',
					scalePositionLeft: false,
					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
				};
							
				if ( chartFrom2 != '' )
				{
					yaxe.min = chartFrom2;
					yaxe.startOnTick = false;				
				}
				else { 
					yaxe.min = myData.Min; 
				}
				
				if ( chartTo2 != '' )
				{
					yaxe.max = chartTo2;
					yaxe.endOnTick = false;				
				}
				else { 
					yaxe.max = myData.Max; 
				}

				
				_formats.push(l_s);
				hoptions.options.scales.yAxes.push(yaxe);
				hoptions.data.datasets.push( wpgpxmapsGetDataset(lng.speed, myData.Items, color3, yaxe.id ) );			

			}
			
			if (graphHr != '')
			{
				
				var myData = mergeArrayForChart(graphDist, graphHr);

				var yaxe = {
					type: 'linear',					
					ticks: {
						// Include a dollar sign in the ticks
						callback: function(value, index, values) {
							return Math.round(value, l_hr.dec) + l_hr.suf;
						}
					},
					position: 'right',
					scalePositionLeft: false,
					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
				};

				hoptions.options.scales.yAxes.push(yaxe);
				hoptions.data.datasets.push( wpgpxmapsGetDataset(lng.heartRate, myData.Items, color4, yaxe.id ) );			
				_formats.push(l_hr);
			}
			
			
			if (graphAtemp != '')
			{
				
				var myData = mergeArrayForChart(graphDist, graphAtemp);

				var yaxe = {
					type: 'linear',
					ticks: {
						// Include a dollar sign in the ticks
						callback: function(value, index, values) {
							return Math.round(value, 1) + "°C";
						}
					},
					position: 'right',
					scalePositionLeft: false,
					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
				};
				
				hoptions.options.scales.yAxes.push(yaxe);
				hoptions.data.datasets.push( wpgpxmapsGetDataset(lng.atemp, myData.Items, color7, yaxe.id ) );			
				_formats.push({ suf : "°C", dec : 1 });
				
			}
			
			
			if (graphCad != '')
			{
				
				var myData = mergeArrayForChart(graphDist, graphCad, true);
				
				var yaxe = {
					type: 'linear',
					ticks: {
						// Include a dollar sign in the ticks
						callback: function(value, index, values) {
							return Math.round(value, l_cad.dec) + l_cad.suf;
						}
					},
					position: 'right',
					scalePositionLeft: false,
					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
				};
									
				hoptions.options.scales.yAxes.push(yaxe);
				hoptions.data.datasets.push( wpgpxmapsGetDataset(lng.cadence, myData.Items, color5, yaxe.id) );
				_formats.push(l_cad);
				
			}

			if (graphGrade != '')
			{
				
				var myData = mergeArrayForChart(graphDist, graphGrade);

				var yaxe = {
					type: 'linear',					
					ticks: {
						// Include a dollar sign in the ticks
						callback: function(value, index, values) {
							return Math.round(value, l_grade.dec) + l_grade.suf;
						}
					},
					position: 'right',
					scalePositionLeft: false,
					id: "y-axis-" + (hoptions.options.scales.yAxes.length + 1),
				};
				
				_formats.push(l_grade);
				hoptions.options.scales.yAxes.push(yaxe);
				hoptions.data.datasets.push( wpgpxmapsGetDataset(lng.grade, myData.Items, color6, yaxe.id ) );			
				
			}
			
			var ctx = document.getElementById("myChart_" + params.targetId).getContext('2d');
			var myChart = new Chart(ctx, hoptions);
		
		}
		else  {
			jQuery("#myChart_" + params.targetId).css("display","none");
		}
	
        return this;
    };
	
	function mergeArrayForChart(distArr, dataArr, setZerosAsNull)
	{
		var l = distArr.length;
		
		var items = new Array(l);
		var min=10000;
		var max=-10000;
		
		for (i=0; i<l; i++) 
		{
			if (distArr[i] != null)
			{
				var _item = dataArr[i];
				
				if (setZerosAsNull === true && _item === 0)
				{
					_item = null;					
				}
				
				items[i] = {
								x: distArr[i], 
								y:_item
							};
				if (_item > max) 
					max = _item; 
				if (_item < min) 
					min = _item;
			}
		}
		
		return {
			Items : items,
			Min : min,
			Max : max,			
		}
		
	}
	
	function wpgpxmapsGetDataset(name,data,color, id) {
		return {
			label: name, // jQuery("<div/>").html(name).text(), // convert html special chars to text, ugly but it works
			data : data,
			borderColor: color,
			backgroundColor: hexToRgbA(color, .3),
			pointRadius: 0,
			borderWidth: 1,
			pointHoverRadius: 1,
			yAxisID: id,
		}
	}
	
	function hexToRgbA(hex,a){
		var c;
		if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)){
			c= hex.substring(1).split('');
			if(c.length== 3){
				c= [c[0], c[0], c[1], c[1], c[2], c[2]];
			}
			c= '0x'+c.join('');
			return 'rgba('+[(c>>16)&255, (c>>8)&255, c&255].join(',')+',' + a +')';
		}
		throw new Error('Bad Hex');
	}


	function getItemFromArray(arr,index)
	{
		try
		{
		  return arr[index];
		}
		catch(e)
		{
			return [0,0];
		}
	}


	function getClosestIndex(points,lat,lon)
	{
		var dd=10000;
		var ii=0;
		for (i=0; i < points.length; i++) 
		{
			if (points[i]==null)
				continue;
		
			var d = wpgpxmapsDist(points[i][0], points[i][1], lat, lon);
			if ( d < dd )
			{
				ii = i;
				dd = d;
			}
		}
		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");	
						
			imageLat = imageLat.replace(",", ".");
			imageLon = imageLon.replace(",", ".");
			
			var d = wpgpxmapsDist(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));
	}

	function wpgpxmapsDist(lat1,lon1,lat2,lon2)
	{
		// mathematically not correct but fast
		var dLat = (lat2-lat1);
		var dLon = (lon2-lon1);
		return Math.sqrt(dLat * dLat + dLon * dLon);
	}
	
}( jQuery ));