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

287 lines
6.7 KiB
JavaScript
Raw Normal View History

2011-12-24 14:37:05 +00:00
/*
WP-GPX-Maps
*/
2011-12-29 09:54:00 +00:00
2011-12-20 17:38:41 +00:00
var t;
var funqueue = [];
2011-12-24 14:37:05 +00:00
var infowindow
2011-12-20 17:38:41 +00:00
var wrapFunction = function(fn, context, params) {
return function() {
fn.apply(context, params);
};
2011-12-20 17:17:24 +00:00
}
2012-02-15 16:04:18 +00:00
function wpgpxmaps(params)
2011-12-20 17:17:24 +00:00
{
2012-02-15 16:04:18 +00:00
funqueue.push( wrapFunction(_wpgpxmaps, this, [params]));
2011-12-20 17:38:41 +00:00
unqueue();
}
function unqueue()
{
if ((google == undefined || google.maps == undefined || google.visualization == undefined))
2011-12-20 17:17:24 +00:00
{
2011-12-20 17:38:41 +00:00
t = setTimeout("unqueue()",200);
}
else
{
while (funqueue.length > 0) {
(funqueue.shift())();
2011-12-20 17:17:24 +00:00
}
}
}
2012-02-15 16:04:18 +00:00
function _wpgpxmaps(params)
2011-12-14 10:35:25 +00:00
{
2012-02-15 16:04:18 +00:00
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 el = document.getElementById("wpgpxmaps_" + targetId);
var el_map = document.getElementById("map_" + targetId);
var el_chart = document.getElementById("chart_" + targetId);
2011-12-15 19:00:25 +00:00
2011-12-14 10:35:25 +00:00
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;}
}
2012-02-22 14:29:44 +00:00
2011-12-14 10:35:25 +00:00
var mapOptions = {
2012-02-22 14:29:44 +00:00
mapTypeId: mapType,
scrollwheel: false
2011-12-14 10:35:25 +00:00
};
var map = new google.maps.Map(el_map, mapOptions);
2011-12-24 14:37:05 +00:00
// 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)
);
2012-02-15 16:04:18 +00:00
for (i=0; i < waypoints.length; i++)
2011-12-24 14:37:05 +00:00
{
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();
2012-02-15 16:04:18 +00:00
for (i=0; i < mapData.length; i++)
2011-12-24 14:37:05 +00:00
{
var p = new google.maps.LatLng(mapData[i][0], mapData[i][1]);
points.push(p);
2012-02-15 16:04:18 +00:00
bounds.extend(p);
2011-12-24 14:37:05 +00:00
}
2012-02-15 16:04:18 +00:00
2011-12-24 14:37:05 +00:00
var poly = new google.maps.Polyline({
path: points,
2012-01-28 11:56:52 +00:00
strokeColor: color1,
2011-12-24 14:37:05 +00:00
strokeOpacity: .7,
strokeWeight: 4
});
poly.setMap(map);
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
var first = getItemFromArray(mapData,0)
2011-12-29 09:54:00 +00:00
var current = new google.maps.MarkerImage("http://maps.google.com/mapfiles/kml/pal4/icon25.png",
new google.maps.Size(32, 32),
new google.maps.Point(0,0),
new google.maps.Point(16, 16)
);
2011-12-24 14:37:05 +00:00
var marker = new google.maps.Marker({
position: new google.maps.LatLng(first[0], first[1]),
title:"Start",
2011-12-29 09:54:00 +00:00
icon: current,
2011-12-24 14:37:05 +00:00
map: map,
zIndex: 10
});
2011-12-29 09:54:00 +00:00
google.maps.event.addListener(poly,'mouseover',function(event){
if (marker)
{
marker.setPosition(event.latLng);
marker.setTitle("Current Position");
if ( chart )
{
2012-02-22 14:29:44 +00:00
var l1 = event.latLng.lat();
var l2 = event.latLng.lng();
2012-01-28 11:56:52 +00:00
var ci = getClosestIndex(mapData,l1,l2);
2011-12-29 09:54:00 +00:00
var r = chart.setSelection([{'row': parseInt(ci) + 1}]);
}
}
});
2011-12-24 14:37:05 +00:00
}
// Print Graph
2011-12-14 10:35:25 +00:00
if (graphData!= '')
{
2012-01-28 11:56:52 +00:00
var numberFormat1 = "#,###m";
var numberFormat2 = "#,###m";
if (unit=="1")
{
2012-02-15 16:04:18 +00:00
numberFormat1 = "#,##0.#mi";
numberFormat2 = "#,###ft";
2012-01-28 11:56:52 +00:00
}
2012-02-22 14:29:44 +00:00
else if (unit=="2")
{
numberFormat1 = "#,###0.#km";
numberFormat2 = "#,###m";
}
2012-02-15 16:04:18 +00:00
var showSpeed = (graphData[0].length == 3);
2012-01-28 11:56:52 +00:00
2011-12-14 10:35:25 +00:00
var data = new google.visualization.DataTable();
2012-02-15 16:04:18 +00:00
data.addColumn('number', "Distance");
2012-02-15 16:29:52 +00:00
data.addColumn('number', "Altitude");
2012-02-15 16:04:18 +00:00
2011-12-14 10:35:25 +00:00
var options = { curveType: "function",
strictFirstColumnType: true,
2012-02-15 16:04:18 +00:00
hAxis : {format : numberFormat1},
vAxis : {format : numberFormat2},
2011-12-14 10:35:25 +00:00
legend : {position : 'none'},
2012-02-15 16:04:18 +00:00
chartArea: {left:50,top:10,width:"100%",height:"75%"},
colors:[color2,color3],
tooltip: { showColorCode: true},
fontSize:11
2011-12-14 10:35:25 +00:00
};
2012-02-15 16:04:18 +00:00
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}
};
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);
2011-12-14 10:35:25 +00:00
chart.draw(data, options);
2011-12-24 14:37:05 +00:00
2011-12-14 10:35:25 +00:00
google.visualization.events.addListener(chart, 'onmouseover', function (e) {
var r = e['row'];
2011-12-29 09:54:00 +00:00
chart.setSelection([e]);
2011-12-14 10:35:25 +00:00
if (marker)
{
var point = getItemFromArray(mapData,r)
2011-12-24 14:37:05 +00:00
marker.setPosition(new google.maps.LatLng(point[0],point[1]));
marker.setTitle("Current Position");
2011-12-14 10:35:25 +00:00
}
});
2011-12-29 09:54:00 +00:00
//google.visualization.events.addListener(chart, 'onmouseout', function (e) {
//chart.setSelection([e]);
//});
2011-12-24 14:37:05 +00:00
}
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)
2011-12-14 10:35:25 +00:00
{
2011-12-24 14:37:05 +00:00
infowindow.close();
2011-12-14 10:35:25 +00:00
}
2011-12-24 14:37:05 +00:00
infowindow = new google.maps.InfoWindow({
content: "<b>" + title + "</b></br />" + descr
2011-12-14 10:35:25 +00:00
});
2011-12-24 14:37:05 +00:00
infowindow.open(map,m);
});
2011-12-14 10:35:25 +00:00
}
2011-12-24 14:37:05 +00:00
2011-12-14 10:35:25 +00:00
function getItemFromArray(arr,index)
{
try
{
return arr[index];
}
catch(e)
{
return [0,0];
}
}
2011-12-29 09:54:00 +00:00
function getClosestIndex(points,lat,lon)
{
var dd=10000;
var ii=0;
2012-02-15 16:04:18 +00:00
for (i=0; i < points.length; i++)
2011-12-29 09:54:00 +00:00
{
var d = dist(points[i][0], points[i][1], lat, lon);
2012-02-15 16:04:18 +00:00
if ( d < dd )
2011-12-29 09:54:00 +00:00
{
2012-02-15 16:04:18 +00:00
ii = i;
dd = d;
2011-12-29 09:54:00 +00:00
}
}
return ii;
}
function dist(lat1,lon1,lat2,lon2)
{
// mathematically not correct but fast
var dLat = (lat2-lat1);
var dLon = (lon2-lon1);
2012-02-15 16:04:18 +00:00
return Math.sqrt(dLat * dLat + dLon * dLon);
}