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

668 lines
15 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
2012-04-07 09:11:37 +00:00
var infowindow;
2012-03-17 11:46:00 +00:00
function CustomMarker( map, latlng, src, img_w, img_h) {
this.latlng_ = latlng;
// Once the LatLng and text are set, add the overlay to the map. This will
// trigger a call to panes_changed which should in turn call draw.
this.setMap(map);
this.src_ = src;
this.img_w_ = img_w;
this.img_h_ = img_h;
}
CustomMarker.prototype = new google.maps.OverlayView();
CustomMarker.prototype.draw = function() {
var me = this;
2012-03-18 10:44:11 +00:00
// Check if the el has been created.
var el = this.img_;
if (!el) {
el = this.img_ = document.createElement('img');
el.style.cssText = "border:1px solid #fff;position:absolute;cursor:pointer;margin:0;width:"+(this.img_w_/3)+"px;height:"+(this.img_h_/3)+"px;z-index:1;";
el.setAttribute("lat",this.latlng_.lat());
el.setAttribute("lon",this.latlng_.lng());
2012-04-07 09:11:37 +00:00
el.src=this.src_;
2012-03-18 10:44:11 +00:00
google.maps.event.addDomListener(el, "click", function(event) {
google.maps.event.trigger(me, "click",el);
2012-03-17 11:46:00 +00:00
});
2012-03-18 10:44:11 +00:00
google.maps.event.addDomListener(el, "mouseover", function(event) {
var _t = el.style.top.replace('px','');
var _l = el.style.left.replace('px','');
jQuery(el).animate({
2012-03-17 11:46:00 +00:00
height: me.img_h_,
width : me.img_w_,
top : _t - (me.img_h_ / 3),
2012-03-18 10:44:11 +00:00
left : _l - (me.img_w_ / 3),
'z-index' : 9999
2012-03-17 11:46:00 +00:00
}, 100);
});
2012-03-18 10:44:11 +00:00
google.maps.event.addDomListener(el, "mouseout", function(event) {
jQuery(el).animate({
2012-03-17 11:46:00 +00:00
height: me.img_h_ / 3,
width: me.img_w_ / 3,
top : me.orig_top,
2012-03-18 10:44:11 +00:00
left : me.orig_left,
'z-index' : 1
2012-03-17 11:46:00 +00:00
}, 100);
});
// Then add the overlay to the DOM
var panes = this.getPanes();
2012-03-18 10:44:11 +00:00
panes.overlayImage.appendChild(el);
2012-03-17 11:46:00 +00:00
}
// Position the overlay
var point = this.getProjection().fromLatLngToDivPixel(this.latlng_);
if (point) {
2012-03-18 10:44:11 +00:00
el.style.left = point.x + 'px';
el.style.top = point.y + 'px';
2012-03-17 11:46:00 +00:00
this.orig_left = point.x;
this.orig_top = point.y;
}
};
CustomMarker.prototype.remove = function() {
// Check if the overlay was on the map and needs to be removed.
2012-03-18 10:44:11 +00:00
if (this.img_) {
this.img_.parentNode.removeChild(this.img_);
this.img_ = null;
2012-03-17 11:46:00 +00:00
}
};
2012-04-07 09:11:37 +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;
2012-04-07 09:11:37 +00:00
var graphDist = params.graphDist;
var graphEle = params.graphEle;
var graphSpeed = params.graphSpeed;
var graphHr = params.graphHr;
2012-02-15 16:04:18 +00:00
var waypoints = params.waypoints;
var unit = params.unit;
var unitspeed = params.unitspeed;
var color1 = params.color1;
var color2 = params.color2;
var color3 = params.color3;
2012-04-07 09:11:37 +00:00
var color4 = params.color4;
2012-03-05 07:57:36 +00:00
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;
2012-02-15 16:04:18 +00:00
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
2012-03-17 11:46:00 +00:00
var mapWidth = el_map.style.width;
2012-03-20 07:31:51 +00:00
var mapTypeIds = [];
for(var type in google.maps.MapTypeId) {
mapTypeIds.push(google.maps.MapTypeId[type]);
}
mapTypeIds.push("OSM1");
mapTypeIds.push("OSM2");
mapTypeIds.push("OSM3");
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;}
2012-03-20 07:31:51 +00:00
case 'OSM1': { mapType = "OSM1"; break;}
case 'OSM2': { mapType = "OSM2"; break;}
case 'OSM3': { mapType = "OSM3"; break;}
2011-12-14 10:35:25 +00:00
default: { mapType = google.maps.MapTypeId.HYBRID; break;}
}
2012-03-20 07:31:51 +00:00
var map = new google.maps.Map(el_map, {
2012-02-22 14:29:44 +00:00
mapTypeId: mapType,
2012-03-20 07:31:51 +00:00
scrollwheel: false,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU,
mapTypeIds: mapTypeIds
}
});
map.mapTypes.set("OSM1", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Open Street Map",
maxZoom: 18
}));
map.mapTypes.set("OSM2", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://a.tile.opencyclemap.org/cycle/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Open Cycle Map",
maxZoom: 18
}));
map.mapTypes.set("OSM3", new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://toolserver.org/tiles/hikebike/" + zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
name: "Hike & Bike",
maxZoom: 18
}));
2012-03-17 11:46:00 +00:00
var bounds = new google.maps.LatLngBounds();
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]);
}
}
2012-03-17 11:46:00 +00:00
// Print Images
var divImages = document.getElementById("ngimages_"+targetId);
divImages.style.display='block';
divImages.style.position='absolute';
2012-03-18 10:44:11 +00:00
divImages.style.left='-50000px';
2012-03-17 11:46:00 +00:00
var img_spans = divImages.getElementsByTagName("span");
if (img_spans.length > 0)
{
var bb = new google.maps.LatLngBounds();
for (var i = 0; i < img_spans.length; i++) {
var imageLat = img_spans[i].getAttribute("lat");
var imageLon = img_spans[i].getAttribute("lon");
var imageImg = img_spans[i].getElementsByTagName('img')[0];
var imageUrl = imageImg.getAttribute("src");
var img_w = imageImg.clientWidth;
var img_h = imageImg.clientHeight;
var p = new google.maps.LatLng(imageLat, imageLon);
bounds.extend(p);
var mc = new CustomMarker(map, p, imageUrl, img_w, img_h );
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();
}
});
}
}
2011-12-24 14:37:05 +00:00
// Print Track
if (mapData != '')
{
var points = [];
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
2012-03-05 07:57:36 +00:00
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
});
}
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);
2012-03-17 11:46:00 +00:00
2011-12-24 14:37:05 +00:00
var first = getItemFromArray(mapData,0)
2012-03-05 07:57:36 +00:00
if (currentIcon == '')
{
currentIcon = "http://maps.google.com/mapfiles/kml/pal4/icon25.png";
}
var current = new google.maps.MarkerImage(currentIcon,
2011-12-29 09:54:00 +00:00
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");
2012-04-07 09:11:37 +00:00
if (hchart)
2011-12-29 09:54:00 +00:00
{
2012-04-07 09:11:37 +00:00
var tooltip = hchart.tooltip;
2012-02-22 14:29:44 +00:00
var l1 = event.latLng.lat();
2012-04-07 09:11:37 +00:00
var l2 = event.latLng.lng();
2012-01-28 11:56:52 +00:00
var ci = getClosestIndex(mapData,l1,l2);
2012-04-07 09:11:37 +00:00
var items = [];
var seriesLen = hchart.series.length;
for(var i=0; i<seriesLen;i++)
{
items.push(hchart.series[i].data[ci]);
}
if (items.length > 0)
tooltip.refresh(items);
2011-12-29 09:54:00 +00:00
}
}
});
2011-12-24 14:37:05 +00:00
}
2012-03-17 11:46:00 +00:00
map.setCenter(bounds.getCenter());
map.fitBounds(bounds);
2012-04-07 09:11:37 +00:00
if (graphDist != '')
2011-12-14 10:35:25 +00:00
{
2012-01-28 11:56:52 +00:00
2012-04-07 09:11:37 +00:00
var valLen = graphDist.length;
var l_x;
var l_y;
var l_y_arr = [];
2012-01-28 11:56:52 +00:00
if (unit=="1")
{
2012-04-07 09:11:37 +00:00
l_x = { suf : "mi", dec : 1 };
l_y = { suf : "ft", dec : 0 };
2012-01-28 11:56:52 +00:00
}
2012-02-22 14:29:44 +00:00
else if (unit=="2")
{
2012-04-07 09:11:37 +00:00
l_x = { suf : "km", dec : 1 };
l_y = { suf : "m", dec : 0 };
}
else
{
l_x = { suf : "m", dec : 0 };
l_y = { suf : "m", dec : 0 };
2012-02-22 14:29:44 +00:00
}
2012-02-15 16:04:18 +00:00
2012-04-07 09:11:37 +00:00
// define the options
var hoptions = {
chart: {
renderTo: 'hchart_' + params.targetId,
type: 'area'
},
title: {
text: null
},
xAxis: {
type: 'integer',
gridLineWidth: 1,
tickInterval: 100,
labels: {
align: 'left',
x: 3,
y: -3
}
},
legend: {
align: 'center',
verticalAlign: 'top',
y: -5,
floating: true,
borderWidth: 0
},
tooltip: {
shared: true,
crosshairs: true,
formatter: function() {
if (marker)
{
var hchart_xserie = hchart.xAxis[0].series[0].data;
for(var i=0; i<hchart_xserie.length;i++){
var item = hchart_xserie[i];
if(item.x == this.x)
{
var point = getItemFromArray(mapData,i)
marker.setPosition(new google.maps.LatLng(point[0],point[1]));
marker.setTitle("Current Position");
i+=10000000;
}
}
}
var tooltip = "<b>" + Highcharts.numberFormat(this.x, l_x.dec) + l_x.suf + "</b><br />";
for (i=0; i < this.points.length; i++)
{
tooltip += this.points[i].series.name + ": " + Highcharts.numberFormat(this.points[i].y, l_y_arr[i].dec) + l_y_arr[i].suf + "<br />";
}
return tooltip;
}
},
plotOptions: {
area: {
fillOpacity: 0.1,
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
xAxis: {
labels: {
formatter: function() {
return Highcharts.numberFormat(this.value, l_x.dec) + l_x.suf;
}
}
},
yAxis: [],
series: []
};
if (graphEle != '')
{
2012-03-05 07:57:36 +00:00
2012-04-07 09:11:37 +00:00
var eleData = [];
2012-03-05 07:57:36 +00:00
2012-04-07 09:11:37 +00:00
for (i=0; i<valLen; i++)
{
eleData.push([graphDist[i],graphEle[i]]);
}
2012-03-05 07:57:36 +00:00
2012-04-07 09:11:37 +00:00
var yaxe = {
title: { text: null },
labels: {
align: 'left',
formatter: function() {
return Highcharts.numberFormat(this.value, l_y.dec) + l_y.suf;
}
}
}
if ( chartFrom1 != '' )
{
yaxe.min = chartFrom1;
}
2012-03-05 07:57:36 +00:00
2012-04-07 09:11:37 +00:00
if ( chartTo1 != '' )
{
yaxe.max = chartTo1;
}
hoptions.yAxis.push(yaxe);
hoptions.series.push({
name: 'Altitude',
lineWidth: 1,
marker: { radius: 0 },
data : eleData,
color: color2,
yAxis: hoptions.series.length
});
l_y_arr.push(l_y);
2012-03-05 07:57:36 +00:00
}
2012-04-07 09:11:37 +00:00
if (graphSpeed != '')
2012-02-15 16:04:18 +00:00
{
2012-04-07 09:11:37 +00:00
var l_s;
2012-02-15 16:04:18 +00:00
if (unitspeed == '2') // miles/h
{
2012-04-07 09:11:37 +00:00
l_s = { suf : "mi/h", dec : 0 };
2012-02-15 16:04:18 +00:00
}
else if (unitspeed == '1') // km/h
{
2012-04-07 09:11:37 +00:00
l_s = { suf : "km/h", dec : 0 };
2012-02-15 16:04:18 +00:00
}
else
{
2012-04-07 09:11:37 +00:00
l_s = { suf : "m/s", dec : 0 };
2012-02-15 16:04:18 +00:00
}
2012-03-05 07:57:36 +00:00
2012-04-07 09:11:37 +00:00
var speedData = [];
for (i=0; i<valLen; i++)
2012-03-05 07:57:36 +00:00
{
2012-04-07 09:11:37 +00:00
speedData.push([graphDist[i],graphSpeed[i]]);
}
var yaxe = {
title: { text: null },
labels: {
//align: 'right',
formatter: function() {
return Highcharts.numberFormat(this.value, l_s.dec) + l_s.suf;
}
},
opposite: true
}
if ( chartFrom2 != '' )
{
yaxe.min = chartFrom2;
2012-03-05 07:57:36 +00:00
}
2012-04-07 09:11:37 +00:00
if ( chartTo2 != '' )
2012-03-05 07:57:36 +00:00
{
2012-04-07 09:11:37 +00:00
yaxe.max = chartTo2;
}
hoptions.yAxis.push(yaxe);
hoptions.series.push({
name: 'Speed',
lineWidth: 1,
marker: { radius: 0 },
data : speedData,
color: color3,
yAxis: hoptions.series.length
});
l_y_arr.push(l_s);
2012-02-15 16:04:18 +00:00
}
2012-04-07 09:11:37 +00:00
if (graphHr != '')
{
var l_hr = { suf : "", dec : 0 };
var hrData = [];
2011-12-24 14:37:05 +00:00
2012-04-07 09:11:37 +00:00
for (i=0; i<valLen; i++)
2011-12-14 10:35:25 +00:00
{
2012-04-07 09:11:37 +00:00
hrData.push([graphDist[i],graphHr[i]]);
2011-12-14 10:35:25 +00:00
}
2012-03-17 11:46:00 +00:00
2012-04-07 09:11:37 +00:00
var yaxe = {
title: { text: null },
labels: {
//align: 'right',
formatter: function() {
return Highcharts.numberFormat(this.value, l_hr.dec) + l_hr.suf;
}
},
opposite: true
}
hoptions.yAxis.push(yaxe);
hoptions.series.push({
name: 'Heart rate',
lineWidth: 1,
marker: { radius: 0 },
data : hrData,
color: color4,
yAxis: hoptions.series.length
});
l_y_arr.push(l_hr);
2012-03-17 11:46:00 +00:00
}
2012-04-07 09:11:37 +00:00
var hchart = new Highcharts.Chart(hoptions);
2011-12-24 14:37:05 +00:00
}
2012-04-07 09:11:37 +00:00
2011-12-24 14:37:05 +00:00
}
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
}
2012-03-17 11:46:00 +00:00
var cnt = '';
if (title=='')
{
cnt = "<center>" + descr + "</center>";
}
else
{
cnt = "<b>" + title + "</b></br />" + descr;
}
infowindow = new google.maps.InfoWindow({ content: cnt});
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;
}
2012-03-17 11:46:00 +00:00
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");
var d = dist(imageLat, imageLon, lat, lon);
if ( d < dd )
{
img = img_spans[i];
dd = d;
}
}
return img;
}
2012-03-05 07:57:36 +00:00
function isNumeric(input){
var RE = /^-{0,1}\d*\.{0,1}\d+$/;
return (RE.test(input));
}
2011-12-29 09:54:00 +00:00
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);
}