364 lines
8.5 KiB
JavaScript
364 lines
8.5 KiB
JavaScript
/*
|
|
|
|
WP-GPX-Maps
|
|
|
|
*/
|
|
|
|
var t;
|
|
var funqueue = [];
|
|
var infowindow
|
|
|
|
var wrapFunction = function(fn, context, params) {
|
|
return function() {
|
|
fn.apply(context, params);
|
|
};
|
|
}
|
|
|
|
function wpgpxmaps(params)
|
|
{
|
|
funqueue.push( wrapFunction(_wpgpxmaps, this, [params]));
|
|
unqueue();
|
|
}
|
|
|
|
function unqueue()
|
|
{
|
|
if ((google == undefined || google.maps == undefined || google.visualization == undefined))
|
|
{
|
|
t = setTimeout("unqueue()",200);
|
|
}
|
|
else
|
|
{
|
|
while (funqueue.length > 0) {
|
|
(funqueue.shift())();
|
|
}
|
|
}
|
|
}
|
|
|
|
function _wpgpxmaps(params)
|
|
{
|
|
|
|
var targetId = params.targetId;
|
|
var mapType = params.mapType;
|
|
var mapData = params.mapData;
|
|
var graphData = params.graphData;
|
|
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 chartFrom1 = params.chartFrom1;
|
|
var chartTo1 = params.chartTo1;
|
|
var chartFrom2 = params.chartFrom2;
|
|
var chartTo2 = params.chartTo2;
|
|
var startIcon = params.startIcon;
|
|
var endIcon = params.endIcon;
|
|
var currentIcon = params.currentIcon;
|
|
|
|
var el = document.getElementById("wpgpxmaps_" + targetId);
|
|
var el_map = document.getElementById("map_" + targetId);
|
|
var el_chart = document.getElementById("chart_" + targetId);
|
|
|
|
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;}
|
|
default: { mapType = google.maps.MapTypeId.HYBRID; break;}
|
|
}
|
|
|
|
var mapOptions = {
|
|
mapTypeId: mapType,
|
|
scrollwheel: false
|
|
};
|
|
var map = new google.maps.Map(el_map, mapOptions);
|
|
|
|
// Print WayPoints
|
|
if (waypoints != '')
|
|
{
|
|
var image = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/flag.png',
|
|
new google.maps.Size(32, 32),
|
|
new google.maps.Point(0,0),
|
|
new google.maps.Point(16, 32)
|
|
);
|
|
var shadow = new google.maps.MarkerImage('http://maps.google.com/mapfiles/ms/micons/flag.shadow.png',
|
|
new google.maps.Size(59, 32),
|
|
new google.maps.Point(0,0),
|
|
new google.maps.Point(16, 32)
|
|
);
|
|
|
|
for (i=0; i < waypoints.length; i++)
|
|
{
|
|
addWayPoint(map, image, shadow, waypoints[i][0], waypoints[i][1], waypoints[i][2], waypoints[i][3]);
|
|
}
|
|
}
|
|
|
|
// Print Track
|
|
if (mapData != '')
|
|
{
|
|
var points = [];
|
|
var bounds = new google.maps.LatLngBounds();
|
|
|
|
for (i=0; i < mapData.length; i++)
|
|
{
|
|
var p = new google.maps.LatLng(mapData[i][0], mapData[i][1]);
|
|
points.push(p);
|
|
bounds.extend(p);
|
|
}
|
|
|
|
if (startIcon != '')
|
|
{
|
|
var startIconImage = new google.maps.MarkerImage(startIcon);
|
|
var startMarker = new google.maps.Marker({
|
|
position: points[0],
|
|
map: 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: map,
|
|
title: "Start",
|
|
animation: google.maps.Animation.DROP,
|
|
icon: endIconImage,
|
|
zIndex: 10
|
|
});
|
|
|
|
}
|
|
|
|
var poly = new google.maps.Polyline({
|
|
path: points,
|
|
strokeColor: color1,
|
|
strokeOpacity: .7,
|
|
strokeWeight: 4
|
|
});
|
|
poly.setMap(map);
|
|
map.setCenter(bounds.getCenter());
|
|
map.fitBounds(bounds);
|
|
var first = getItemFromArray(mapData,0)
|
|
|
|
if (currentIcon == '')
|
|
{
|
|
currentIcon = "http://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: map,
|
|
zIndex: 10
|
|
});
|
|
|
|
google.maps.event.addListener(poly,'mouseover',function(event){
|
|
if (marker)
|
|
{
|
|
marker.setPosition(event.latLng);
|
|
marker.setTitle("Current Position");
|
|
if ( chart )
|
|
{
|
|
var l1 = event.latLng.lat();
|
|
var l2 = event.latLng.lng();
|
|
var ci = getClosestIndex(mapData,l1,l2);
|
|
var r = chart.setSelection([{'row': parseInt(ci) + 1}]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// Print Graph
|
|
if (graphData!= '')
|
|
{
|
|
|
|
var numberFormat1 = "#,###m";
|
|
var numberFormat2 = "#,###m";
|
|
|
|
if (unit=="1")
|
|
{
|
|
numberFormat1 = "#,##0.#mi";
|
|
numberFormat2 = "#,###ft";
|
|
}
|
|
else if (unit=="2")
|
|
{
|
|
numberFormat1 = "#,###0.#km";
|
|
numberFormat2 = "#,###m";
|
|
}
|
|
|
|
var showSpeed = (graphData[0].length == 3);
|
|
|
|
var data = new google.visualization.DataTable();
|
|
data.addColumn('number', "Distance");
|
|
data.addColumn('number', "Altitude");
|
|
|
|
if (!isNumeric(chartFrom1))
|
|
chartFrom1 = null;
|
|
|
|
if (!isNumeric(chartTo1))
|
|
chartTo1 = null;
|
|
|
|
if (!isNumeric(chartFrom2))
|
|
chartFrom2 = null;
|
|
|
|
if (!isNumeric(chartTo2))
|
|
chartTo2 = null;
|
|
|
|
var options = { curveType: "function",
|
|
strictFirstColumnType: true,
|
|
hAxis : {format : numberFormat1},
|
|
vAxis : {format : numberFormat2},
|
|
legend : {position : 'none'},
|
|
chartArea: {left:50,top:10,width:"100%",height:"75%"},
|
|
colors:[color2,color3],
|
|
tooltip: { showColorCode: true},
|
|
fontSize:11
|
|
};
|
|
|
|
if ( chartFrom1 != null || chartTo1 != null )
|
|
{
|
|
options.vAxis.viewWindowMode = "explicit";
|
|
options.vAxis.viewWindow = { min : chartFrom1, max : chartTo1};
|
|
}
|
|
|
|
if (showSpeed)
|
|
{
|
|
var speedFormat="";
|
|
|
|
if (unitspeed == '2') // miles/h
|
|
{
|
|
speedFormat = "#,##0.#mi/h";
|
|
}
|
|
else if (unitspeed == '1') // km/h
|
|
{
|
|
speedFormat = "#,##0.#km/h";
|
|
}
|
|
else
|
|
{
|
|
speedFormat = "#,##0.#m/s";
|
|
}
|
|
data.addColumn('number', "Speed");
|
|
|
|
options.vAxes = { 0:{format : numberFormat2, targetAxisIndex : 0},
|
|
1:{format : speedFormat, targetAxisIndex : 1}
|
|
};
|
|
|
|
if ( chartFrom1 != null || chartTo1 != null )
|
|
{
|
|
options.vAxes[0].viewWindowMode = "explicit";
|
|
options.vAxes[0].viewWindow = { min : chartFrom1, max : chartTo1};
|
|
}
|
|
|
|
if ( chartFrom2 != null || chartTo2 != null )
|
|
{
|
|
options.vAxes[1].viewWindowMode = "explicit";
|
|
options.vAxes[1].viewWindow = { min : chartFrom2, max : chartTo2};
|
|
}
|
|
|
|
options.series = { 0:{color: color2, visibleInLegend: true, targetAxisIndex : 0},
|
|
1:{color: color3, visibleInLegend: true, targetAxisIndex : 1}
|
|
};
|
|
|
|
options.chartArea.width="85%";
|
|
//alert(el_chart.clientWidth);
|
|
}
|
|
|
|
data.addRows(graphData);
|
|
var chart = new google.visualization.AreaChart(el_chart);
|
|
chart.draw(data, options);
|
|
|
|
google.visualization.events.addListener(chart, 'onmouseover', function (e) {
|
|
var r = e['row'];
|
|
chart.setSelection([e]);
|
|
if (marker)
|
|
{
|
|
var point = getItemFromArray(mapData,r)
|
|
marker.setPosition(new google.maps.LatLng(point[0],point[1]));
|
|
marker.setTitle("Current Position");
|
|
}
|
|
});
|
|
//google.visualization.events.addListener(chart, 'onmouseout', function (e) {
|
|
//chart.setSelection([e]);
|
|
//});
|
|
}
|
|
else
|
|
{
|
|
el_chart.style.display='none';
|
|
}
|
|
}
|
|
|
|
function addWayPoint(map, image, shadow, lat, lon, title, descr)
|
|
{
|
|
var p = new google.maps.LatLng(lat, lon);
|
|
var m = new google.maps.Marker({
|
|
position: p,
|
|
map: map,
|
|
title: title,
|
|
animation: google.maps.Animation.DROP,
|
|
shadow: shadow,
|
|
icon: image,
|
|
zIndex: 5
|
|
});
|
|
google.maps.event.addListener(m, 'mouseover', function() {
|
|
if (infowindow)
|
|
{
|
|
infowindow.close();
|
|
}
|
|
infowindow = new google.maps.InfoWindow({
|
|
content: "<b>" + title + "</b></br />" + descr
|
|
});
|
|
infowindow.open(map,m);
|
|
});
|
|
}
|
|
|
|
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++)
|
|
{
|
|
var d = dist(points[i][0], points[i][1], lat, lon);
|
|
if ( d < dd )
|
|
{
|
|
ii = i;
|
|
dd = d;
|
|
}
|
|
}
|
|
return ii;
|
|
}
|
|
|
|
function isNumeric(input){
|
|
var RE = /^-{0,1}\d*\.{0,1}\d+$/;
|
|
return (RE.test(input));
|
|
}
|
|
|
|
function dist(lat1,lon1,lat2,lon2)
|
|
{
|
|
// mathematically not correct but fast
|
|
var dLat = (lat2-lat1);
|
|
var dLon = (lon2-lon1);
|
|
return Math.sqrt(dLat * dLat + dLon * dLon);
|
|
} |