Bart Gottschalk


I'm working with the VEPushpin.OnMouseOverCallback function and I've run into an issue where the 'x' value provided to this callback is not consistent. The code pasted below illustrates this situation. Specifically notice the style on the div 'myMap' that includes "left:100px;".

In this code the callback displays an alert that shows the value of x, y, title and details. The inconsistency is that after this page loads (in IE or Firefox) the first time you hover over the pushpin (on Minneapolis, MN) the x value includes the 100px offset. The second, third, ... time I hover over the pushpin the x value DOES NOT include the 100px offset. This code is a simplified version of what is happening in my app. I was hoping to use the x and y values in this callback to position a div but with this inconsistency between the first and second+ events I'm not able to do so.

Can anyone help me understand why this is happening and provide suggestions for modifications/workarounds

Thanks!

Bart

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;
var pinID = 1;

function GetMap()
{

// If the browser is Firefox get the version number
var ffv = 0;
var ffn = "Firefox/"
var ffp = navigator.userAgent.indexOf(ffn);
if (ffp != -1) ffv = parseFloat(navigator.userAgent.substring(ffp + ffn.length));
// If we're using Firefox 1.5 or above override the Virtual Earth drawing functions to use SVG
if (ffv >= 1.5) {
Msn.Drawing.Graphic.CreateGraphic=function(f,b) { return new Msn.Drawing.SVGGraphic(f,b) }
}

map = new VEMap('myMap');
map.LoadMap();

var pin = new VEPushpin( pinID, new VELatLong(44.974832, -93.274894), null, 'My pushpin', 'This is pushpin number '+pinID );

VEPushpin.ShowDetailOnMouseOver = false;
VEPushpin.OnMouseOverCallback = function(x, y, title, details)
{
alert('your mouse is at : ' + x + ', ' + y +
' and you can display the details from title: ' + unescape(title) +
' and details: ' + unescape(details));
}
map.AddPushpin(pin);

}

</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px; left:100px;"></div>
</body>
</html>





Re: VEPushpin.OnMouseOverCallback 'x' Value Inconsistency

Derek Chan


Bart Gottschalk wrote:

I'm working with the VEPushpin.OnMouseOverCallback function and I've run into an issue where the 'x' value provided to this callback is not consistent. The code pasted below illustrates this situation. Specifically notice the style on the div 'myMap' that includes "left:100px;".

In this code the callback displays an alert that shows the value of x, y, title and details. The inconsistency is that after this page loads (in IE or Firefox) the first time you hover over the pushpin (on Minneapolis, MN) the x value includes the 100px offset. The second, third, ... time I hover over the pushpin the x value DOES NOT include the 100px offset. This code is a simplified version of what is happening in my app. I was hoping to use the x and y values in this callback to position a div but with this inconsistency between the first and second+ events I'm not able to do so.

Can anyone help me understand why this is happening and provide suggestions for modifications/workarounds

Thanks!

Bart

<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/v3/mapcontrol.js"></script>
<script>
var map = null;
var pinID = 1;

function GetMap()
{

// If the browser is Firefox get the version number
var ffv = 0;
var ffn = "Firefox/"
var ffp = navigator.userAgent.indexOf(ffn);
if (ffp != -1) ffv = parseFloat(navigator.userAgent.substring(ffp + ffn.length));
// If we're using Firefox 1.5 or above override the Virtual Earth drawing functions to use SVG
if (ffv >= 1.5) {
Msn.Drawing.Graphic.CreateGraphic=function(f,b) { return new Msn.Drawing.SVGGraphic(f,b) }
}

map = new VEMap('myMap');
map.LoadMap();

var pin = new VEPushpin( pinID, new VELatLong(44.974832, -93.274894), null, 'My pushpin', 'This is pushpin number '+pinID );

VEPushpin.ShowDetailOnMouseOver = false;
VEPushpin.OnMouseOverCallback = function(x, y, title, details)
{
alert('your mouse is at : ' + x + ', ' + y +
' and you can display the details from title: ' + unescape(title) +
' and details: ' + unescape(details));
}
map.AddPushpin(pin);

}

</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px; left:100px;"></div>
</body>
</html>



Your going to need another way to capture mouse position rather than the x and y global variables (I think this might be a VE bug). I can get it consistantly using the code sample here for VE (I was using the IE sample):

http://www.codelifter.com/main/javascript/capturemouseposition1.html






Re: VEPushpin.OnMouseOverCallback 'x' Value Inconsistency

Bart Gottschalk

Derek,

Thank you very much for your reply and the link to the code sample. I'll give that a try and let you know how it turns out.

Can any of the MSFT people confirm if this is a bug or if I'm doing something wrong

Thanks,

Bart







Re: VEPushpin.OnMouseOverCallback 'x' Value Inconsistency

SoulSolutions

Yes you do need to consider the map offsets.

var mapX = x - map.GetLeft();
var mapY = y - map.GetTop();

Also I find a need to attach to the window resize event and map.Resize()

//set window events for map to run.

if (window.attachEvent) {

window.attachEvent("onresize", MapResize);

} else {

window.addEventListener("resize", MapResize, false);

}

function MapResize()

{

if( typeof( window.innerWidth ) == 'number' )

{

//Non-IE

mHeight = window.innerHeight;

mWidth = window.innerWidth

}

else

{

//IE

mHeight = document.body.clientHeight;

mWidth = document.body.clientWidth;

}

if (mWidth < 240) //min width

{

mWidth = 240;

}

if (mHeight < 240) //min height

{

mHeight = 240;

}

map.Resize(mWidth, mHeight);

}

John.






Re: VEPushpin.OnMouseOverCallback 'x' Value Inconsistency

Bart Gottschalk

I'm going to use the Yahoo! UI tools as follows to get the x and y coordinate of the pushpin that triggered the OnMouseOverCallback event as follows.

VEPushpin.OnMouseOverCallback = function(x, y, title, details)
{
var evtx = YAHOO.util.Dom.getX('1');
var evty = YAHOO.util.Dom.getY('1');

alert('your mouse is at : ' + x + ', ' + y +
' and you can display the details from title: ' + unescape(title) +
' and details: ' + unescape(details));

alert('the pushpin that caused the event is located at : ' + evtx + ';' + evty);
}

To use these libraries they need to be included in the <head> as

<script type="text/javascript" src="yahoo-min.js"></script>
<script type="text/javascript" src="dom-min.js"></script>

This seems to be working as it consistently gives me the top left corner of the pushpin element. I can work with that and it's actually better than the mouse location of the event for my purposes.

Bart






Re: VEPushpin.OnMouseOverCallback 'x' Value Inconsistency

SoulSolutions

If it works for you go for it, but it is not nessesary.

John.