/* 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 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: '© OpenStreetMap 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 © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["Open Cycle Map - Transport"] = L.tileLayer('https://a.tile.thunderforest.com/transport/{z}/{x}/{y}.png?apikey=' + ThunderforestApiKey, { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["Open Cycle Map - Landscape"] = L.tileLayer('https://a.tile.thunderforest.com/landscape/{z}/{x}/{y}.png?apikey=' + ThunderforestApiKey, { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); } else { baseMaps["Open Cycle Map"] = L.tileLayer('http://a.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["Open Cycle Map - Transport"] = L.tileLayer('https://a.tile2.opencyclemap.org/transport/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["Open Cycle Map - Landscape"] = L.tileLayer('https://a.tile3.opencyclemap.org/landscape/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); } baseMaps["Open Street Map"] = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["MapToolKit - Terrain"] = L.tileLayer('https://tile2.maptoolkit.net/terrain/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["Humanitarian Map Style"] = L.tileLayer('https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); /* baseMaps["Open Ski Map"] = L.tileLayer('http://tiles.skimap.org/openskimap/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); */ baseMaps["Hike & Bike"] = L.tileLayer('http://toolserver.org/tiles/hikebike/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); baseMaps["Open Sea Map"] = L.tileLayer('http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © OpenStreetMap contributors, ' + 'CC-BY-SA, ' + 'Imagery © Mapbox', }); 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 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 = "
" + unescape(wpt.desc) + "
"; } else { cnt = "
" + wpt.name + "
" + unescape(wpt.desc) + "
"; } cnt += "

Itinéraire

"; 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 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 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 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("
").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 ));