added the javascript routine to do mouse overs

This commit is contained in:
Julian Baumgartner
2010-03-17 20:40:46 -06:00
committed by Sean Rhea
parent ac570c415c
commit d77c6ed576
2 changed files with 89 additions and 8 deletions

View File

@@ -290,6 +290,7 @@ void GoogleMapControl::createHtml()
<< "<title>GoldenCheetah</title>" << endl
<< "<script src=\"http://maps.google.com/maps?file=api&amp;v=2&amp;key=" << GOOGLE_KEY <<"\"" << endl
<< "type=\"text/javascript\"></script>" << endl
<< CreateMapToolTipJavaScript() << endl
<< "<script type=\"text/javascript\">"<< endl
<< "var map;" << endl
<< "function initialize() {" << endl
@@ -314,14 +315,14 @@ void GoogleMapControl::createHtml()
<< "</script>" << endl
<< "</head>" << endl
<< "<body onload=\"initialize()\" onunload=\"GUnload()\">" << endl
<< "<div id=\"map_canvas\" style=\"width: " << width <<"px; height: "
<< "<div id=\"map_canvas\" style=\"width: " << width <<"px; height: "
<< height <<"px\"></div>" << endl
<< "<form action=\"#\" onsubmit=\"animate(); return false\">" << endl
<< "</form>" << endl
<< "</body>" << endl
<< "</html>" << endl;
currentPage << oss.str();
currentPage << oss.str();
}
@@ -361,11 +362,12 @@ string GoogleMapControl::CreatePolyLine()
intervalPoints.end(),
AvgPower());
// find the color
QColor color = GetColor(rideCP,avgPower);
// create the polyline
CreateSubPolyLine(intervalPoints,oss,color);
CreateSubPolyLine(intervalPoints,oss,avgPower);
intervalPoints.clear();
intervalPoints.push_back(rfp);
}
}
@@ -375,12 +377,13 @@ string GoogleMapControl::CreatePolyLine()
void GoogleMapControl::CreateSubPolyLine(const std::vector<RideFilePoint> &points,
std::ostringstream &oss,
QColor color)
int avgPower)
{
oss.precision(6);
QColor color = GetColor(rideCP,avgPower);
QString colorstr = color.name();
oss.setf(ios::fixed,ios::floatfield);
oss << "map.addOverlay (new GPolyline([";
oss << "var polyline = new GPolyline([";
BOOST_FOREACH(RideFilePoint rfp, points)
{
@@ -389,8 +392,21 @@ void GoogleMapControl::CreateSubPolyLine(const std::vector<RideFilePoint> &point
oss << "new GLatLng(" << rfp.lat << "," << rfp.lon << ")," << endl;
}
}
oss << "],\"" << colorstr.toStdString() << "\",4);" << endl;
oss << "],\"" << colorstr.toStdString() << "\",5));";
oss << "GEvent.addListener(polyline, 'mouseover', function() {" << endl
<< "var tooltip_text = '30s Power: " << avgPower << "';" << endl
<< "var ss={'weight':8};" << endl
<< "this.setStrokeStyle(ss);" << endl
<< "this.overlay = new MapTooltip(this,tooltip_text);" << endl
<< "map.addOverlay(this.overlay);" << endl
<< "});" << endl
<< "GEvent.addListener(polyline, 'mouseout', function() {" << endl
<< "map.removeOverlay(this.overlay);" << endl
<< "var ss={'weight':5};" << endl
<< "this.setStrokeStyle(ss);" << endl
<< "});" << endl;
oss << "map.addOverlay (polyline);" << endl;
}
@@ -466,3 +482,67 @@ string GoogleMapControl::CreateIntervalMarkers()
}
return oss.str();
}
string GoogleMapControl::CreateMapToolTipJavaScript()
{
ostringstream oss;
oss << "<script type=\"text/javascript\">" << endl
<< "var MapTooltip = function(obj, html, options) {"<< endl
<< "this.obj = obj;"<< endl
<< "this.html = html;"<< endl
<< "this.options = options || {};"<< endl
<< "}"<< endl
<< "MapTooltip.prototype = new GOverlay();"<< endl
<< "MapTooltip.prototype.initialize = function(map) {"<< endl
<< "var div = document.getElementById('MapTooltipContainer');"<< endl
<< "var that = this;"<< endl
<< "if (!div) {"<< endl
<< "var div = document.createElement('div');"<< endl
<< "div.setAttribute('id', 'MapTooltipContainer');"<< endl
<< "}"<< endl
<< "if (this.options.maxWidth || this.options.minWidth) {"<< endl
<< "div.style.maxWidth = this.options.maxWidth || '150px';"<< endl
<< "div.style.minWidth = this.options.minWidth || '150px';"<< endl
<< "} else {"<< endl
<< "div.style.width = this.options.width || '150px';"<< endl
<< "}"<< endl
<< "div.style.padding = this.options.padding || '5px';"<< endl
<< "div.style.backgroundColor = this.options.backgroundColor || '#ffffff';"<< endl
<< "div.style.border = this.options.border || '1px solid #000000';"<< endl
<< "div.style.fontSize = this.options.fontSize || '80%';"<< endl
<< "div.style.color = this.options.color || '#000';"<< endl
<< "div.innerHTML = this.html;"<< endl
<< "div.style.position = 'absolute';"<< endl
<< "div.style.zIndex = '1000';"<< endl
<< "var offsetX = this.options.offsetX || 10;"<< endl
<< "var offsetY = this.options.offsetY || 0;"<< endl
<< "var bounds = map.getBounds();"<< endl
<< "rightEdge = map.fromLatLngToDivPixel(bounds.getNorthEast()).x;"<< endl
<< "bottomEdge = map.fromLatLngToDivPixel(bounds.getSouthWest()).y;"<< endl
<< "var mapev = GEvent.addListener(map, 'mousemove', function(latlng) {"<< endl
<< "GEvent.removeListener(mapev);"<< endl
<< "var pixelPosX = (map.fromLatLngToDivPixel(latlng)).x + offsetX;"<< endl
<< "var pixelPosY = (map.fromLatLngToDivPixel(latlng)).y - offsetY;"<< endl
<< "div.style.left = pixelPosX + 'px';"<< endl
<< "div.style.top = pixelPosY + 'px';"<< endl
<< "map.getPane(G_MAP_FLOAT_PANE).appendChild(div);"<< endl
<< "if ( (pixelPosX + div.offsetWidth) > rightEdge ) {"<< endl
<< "div.style.left = (rightEdge - div.offsetWidth - 10) + 'px';"<< endl
<< "}"<< endl
<< "if ( (pixelPosY + div.offsetHeight) > bottomEdge ) {"<< endl
<< "div.style.top = (bottomEdge - div.offsetHeight - 10) + 'px';"<< endl
<< "}"<< endl
<< "});"<< endl
<< "this._map = map;"<< endl
<< "this._div = div;"<< endl
<< "}"<< endl
<< "MapTooltip.prototype.remove = function() {"<< endl
<< "if(this._div != null) {"<< endl
<< "this._div.parentNode.removeChild(this._div);"<< endl
<< "}"<< endl
<< "}"<< endl
<< "MapTooltip.prototype.redraw = function(force) {"<< endl
<< "}"<< endl
<< "</script> "<< endl;
return oss.str();
}

View File

@@ -46,7 +46,8 @@ Q_OBJECT
std::string CreatePolyLine();
void CreateSubPolyLine(const std::vector<RideFilePoint> &points,
std::ostringstream &oss,
QColor color);
int avgPower);
std::string CreateMapToolTipJavaScript();
std::string CreateIntervalMarkers();
void loadRide();
// the web browser is loading a page, do NOT start another load