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

1508 lines
41 KiB
JavaScript
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/*
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 = [];
var _len = mapData.length;
for ( i = 0; i < _len; i++ ) {
if ( mapData[i] == null ) {
result.push( mapData.slice( lastCut == 0 ? 0 : lastCut + 1, i ) );
lastCut = i;
}
}
if ( ( _len - 1 ) != 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 ) && waypoints.length > 0 ) {
map.AddWaypoints( waypoints, waypointIcon );
}
// Print Images
jQuery("#ngimages_" + targetId).attr("style","display:block;position:absolute;left:-50000px");
var nggImages = jQuery("#ngimages_" + targetId + " span").toArray();
if (nggImages !== undefined && nggImages.length > 0)
{
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 (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
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;
}
}
}
*/
// 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 ));