phertel


I am trying to add a custom control over a number of locations on the map. This control looks like a little titlebar. When clicked, the bar grows into a dialog box with lots of buttons and stuff for interacting with the object at that geographic point via httprequest calls.

I can make the title bar appear over the object by adding a new shape at the location and setting the custom icon to be the control's source html. Sadly, the control's event handlers no longer work. And when I hover the mouse over the control, the shape's description box opens.

Is there some way to disable the description box from popping up Also, is there a way to get my event handlers to work Any help would be greatly appreciated.

Thanks.




Re: Custom shapes


Re: Custom shapes

Derek Chan

Hi,

It could be that your firing a javascript error somewhere on the page if your not adding your shape properly, causing the default description box to pop-up.

Alternatively, you can take "return true" on a onmouseover event which will completely disable it and should remove the shape pop-ups.

Sample code (Click Add Pushpin and then hover over the pin, no description box pops up):

Code Snippet

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<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 pinid = 0;
var icon = "<div style='font-size:12px;font-weight:bold;border:solid 2px Black;background-color:Aqua;width:50px;'>Shape</div>";
var infobox = "<div style='width:309px;'>You can add html codes into the info box or change the style of the info box. You can design and show any info box you want!<br>"
+"<a href='http://msdn2.microsoft.com/en-us/library/bb412553.aspx' target='_blank'>Click here to find out more.</a><br></div>"
+"<embed src='http://images.soapbox.msn.com/flash/soapbox1_1.swf' quality='high' width='309px' height='272px' wmode='transparent' type='application/x-shockwave-flash' pluginspage='http://macromedia.com/go/getflashplayer' flashvars='c=v&v=a4b53303-d58c-450e-a01d-069c9bcb5fe9' ></embed><br /><a href='http://soapbox.msn.com/video.aspx vid=a4b53303-d58c-450e-a01d-069c9bcb5fe9' target='_blank' title='Virtual Earth - Bird&#39;s eye view and 3D'>Video: Virtual Earth - Bird&#39;s eye view and 3D</a>";

function GetMap()
{
map = new VEMap('myMap');
map.LoadMap();
map.SetZoomLevel(10);
map.AttachEvent("onmouseover", DisablePopup);
}

function AddPushpin()
{
var shape = new VEShape(VEShapeType.Pushpin, map.GetCenter());

//Set the icon
shape.SetCustomIcon(icon);

//Set the info box
map.ClearInfoBoxStyles();
shape.SetTitle("<h2>Custom Pin</h2>");
shape.SetDescription(infobox);

//Add the shape the the map
map.AddShape(shape);
pinid++;
}

function DisablePopup()
{
return true;
}

</script>
</head>
<body onload="GetMap();">
<div id='myMap' style="position:relative; width:400px; height:400px;"></div>
<div>Click on the links below to add a custom shape to the map.</div>
<div><a href='#' onclick='AddPushpin();'>Add Pushpin</a></div>
</body>
</html>

Hope that helps,







Re: Custom shapes

Derrick

There's currently a bug in VE. If you attach a "onmouseover" event, you have to attach a "onmouseout" event too. If not, "onmouseover" event might not get fired correctly.

Just attach a handler that does nothing should solve the problem.

Code Snippet

map.AttachEvent("onmouseout", function(e) {});





Re: Custom shapes

phertel

Thanks for the responses. The problem turned out to be the following. I was adding event handlers to my HTML elements using the attachEvent function.In order to add the elements to the map, you need to convert the element into a string of HTML text. I was using the outerHTML field to do this. But this does not automatically add the event handlers to the string, so the elements had no handlers.

I think this is because attachEvent allows you to add numreous handlers for the same event, while tradional HTML only allows a single handler for each event.

I modified my code so the problem has gone away. But this is something people should be aware of if they add custom controls as points on the map. Also, when you pan or zoom, it reloads the same HTML string to reload your control. This makes state management tricky. You always have to update the string.

Note this is not an issue if you just add a control to the map using AddControl, only when you wantyour control to be linked to a geographic point on the map.