citygirl


According to the documentation on VEMap event object used for mouse events, elementID property should give "the ID of the object associated with the event, usually a VEShape Class object or the base map". However in my tests, elementID is not the id of the shape. Here's sample code:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx v=5">
</script>

<script>
var map = null;
var markerLayer = null;
function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();

markerLayer = new VEShapeLayer();
map.AddShapeLayer(markerLayer);

var ll = map.GetCenter();
var shape = new VEShape(VEShapeType.Pushpin, ll);
markerLayer.AddShape(shape);

console.log("ID of newly-added shape is " + shape.GetID());

map.AttachEvent("onmouseover", ShapeHandler);
}

function ShapeHandler(e)
{
if (e.elementID)
{
console.log("ID of shape on mouseover is " + e.elementID);
return true;
}
}
</script>

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


If you aren't using Firefox with Firebug, just replace all the console.log with alerts.
What you get is this output:

ID of newly-added shape is msftve_1001_200000
ID of shape on mouseover is msftve_1001_200000_10000


i.e. elementID is clearly NOT the id of the VEShape object associated with the event. If I try to find the shape on the markerLayer by calling markerLayer.GetShapeByID and passing in the elementID, that predicably fails. By looking at the DOM I figured out that the elementID, msftve_1001_200000_10000 is actually the id of BOTH the image of the pushpin, and the <a> tag around it.

My question is: how do I get the shape object associated the mouse event And, I thought it's not allowed to have two elements with the same id on the page, why is VE putting them in



Re: Getting to the source shape object of a mouse event in v5

onispawn


To get the ID of the shape I just parsed of the extra characters.


function ShapeHandler(e)
{
if (e.elementID != null)
{
var values = e.elementID.split("_", 3);
var shapeID = values[0];
for(var x=1; x < values.length; x++)
shapeID += "_" + values[x];

var shape = layer.GetShapeByID(shapeID);

if(shape != null)
{
//do something with shape
}
}
return true;
}





Re: Getting to the source shape object of a mouse event in v5

citygirl

Thanks so much for posting your code and validating my thoughts - looks like your code should work, I'll go try it now.

It still doesn't change the fact that there is an error in VE SDK, or that VE produces incorrect HTML... would be great to hear an official response to this.





Re: Getting to the source shape object of a mouse event in v5

citygirl

VE Support helped me figure out how to get this working. Instead of VEShapeLayer.GetShapeByID, you need to use VEMap.GetShapeByID. This way you don't need to parse out any extra characters.

The VEMap method will work correctly with the ID returned by the VEMap Event, whereas the VEShapeLayer only works with the actual shape id. So, my handler should look like this:

function ShapeHandler(e)
{
if (e.elementID)
{
var shape = map.GetShapeByID(e.elementID);
console.log("ID of shape on mouseover is " + shape.GetID());
return true;
}
}


Hope this helps someone out there Smile




Re: Getting to the source shape object of a mouse event in v5

onispawn

Nice. Glad they were able to point you in the right direction. Guess I missed that method in their documentation.




Re: Getting to the source shape object of a mouse event in v5

jhofker

EDIT: Nevermind, "Id" has to be "ID". Silly case sensitivity!

Strange, I'm trying to do exactly that. Can anyone find an error in this

Code Snippet

map.AttachEvent("onclick", map_Click);

...

function map_Click(e)
{
if(e.elementID != null)
{
var shape = map.GetShapeById(e.elementID); //Exception thrown here
if(shape != null)
alert(shape.GetTitle());
}
}

"Object doesn't support this property or method" is what it says.

The objects (pins) being clicked are created, added to a layer, and then that layer is added to the map.

If I just do:

Code Snippet

function map_Click(e)
{
alert(e.elementID);
}

It displays an ID. What's going on