VEMap.AttachEvent Method

Switch View

AttachEvent Method

Collapse All

Attaches a Map Control event to a specified function.

VEMap.AttachEvent(event, function);

Parameters

Parameter	Description
event	The name of the Map Control event that generates the call.
function	The function to run when the event fires. It can be either the name of a function or the function itself.

Return Value

Remarks

For a list of Map Control events, see VEMap Events.

When the event fires, you can specify either the name of the function to call or the function itself. The following example shows each option.

For the keyboard and mouse events, the custom function is executed before the default action is executed. If the custom function returns false, the default action is executed. If the custom function returns true, the default action is not executed. For example, if you have attached the onLeftMouseDoubleClick event, then your custom function is executed first. If it returns false, the default map behavior, which is to zoom-in, is executed. If it returns true, the zoom-in behavior is disabled.

You can also perform actions based on the type of object associated with the event. The VEShape Class object is normally the object associated with an event.

Note:
If you specify the entire function to attach, as opposed to just the function name, it will be impossible to detach it later.

See the VEMap Events topic for more information.

Examples

JScript

<!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 type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"></script>

      <script type="text/javascript">
         var map = null;
         var shape = null;
         // Latitude and longitude values for the approximate center of Boston, MA
         var lat = 42.3595586931348;
         var lon = -71.06094360351562;
        
         // Point values to draw an octagon shape
         var points=[new VELatLong(lat,lon-0.15),
            new VELatLong(lat+0.1,lon-0.05),
            new VELatLong(lat+0.1,lon+0.05),
            new VELatLong(lat,lon+0.15),
            new VELatLong(lat-0.1,lon+0.05),
            new VELatLong(lat-0.1,lon-0.05)];
            
         // Custom HTML for pushpin popup (This is NEW in V5!)
         var description = 
            "<div>" +
            "<h4>This is the center of Boston, MA</h4>" +
            "<p>Latitude = 42.3595586931348.</p>" +
            "<p>Longitude = -71.06094360351562.</p>" +
            "</div>";
        
         function GetMap()
         {
            map = new VEMap('myMap');
            map.LoadMap(new VELatLong(lat,lon));

            map.SetZoomLevel(10);
            document.getElementById('banner').innerHTML = document.title;
         }
        
         function drawPolygon()
         {
            map.DeleteAllShapes();
            
            try
            {
               var shape = new VEShape(VEShapeType.Polygon,points);
               shape.SetLineWidth(2);
               shape.SetTitle("<div id='customTitle'><h3>Custom Title</h3></div>");
               shape.SetDescription(description);
               shape.SetPoints(points);
               shape.ShowIcon();
               map.AddShape(shape);
               document.getElementById('label').innerHTML = 
                  "<p>Hover over the polygon for info about this shape!</p>"
            
               // The onmouseover event which calls the shapeInfo function
               map.AttachEvent("onmouseover", shapeInfo);
            
               // The onmouseout event that calls the shapeInfo function to clear the info element
               map.AttachEvent("onmouseout", shapeInfo);
            
               // The onclick event to call the callPopUp function
               map.AttachEvent("onclick", callPopUp);
            }
            
            // This example features handling exceptions with the VEException object
            catch(VEException)            
            {
               document.getElementById('label').innerText =
                  VEException.message +
                  " : " +
                  VEException.name +
                  " : " +
                  VEException.source;
            }
         }
       
         function detach()
         {
            // Detach all events
            map.DetachEvent("onmouseover", shapeInfo);
            map.DetachEvent("onmouseout", shapeInfo);
            map.DetachEvent("onclick", callPopUp);
         }
        
         function shapeInfo(e)
         {
            if(e.elementID != null)
            {
               document.getElementById("label").innerText = 
                  "Event: " + 
                  e.eventName + 
                  "; Shape ID:  " +
                  e.elementID + 
                  "\n\nClick on the polygon for additional information.";
            }
            else
            {
               document.getElementById("label").innerText = "";
            }
         }
        
         function callPopUp(e)
         {
            if(e.elementID != null)
            {
               alert(
                  "You can now call other functions via events \n" + 
                  "This event was " +
                  e.eventName);
            }
            else
            {
               return false;
            }
         }
      </script>
   </head>
   <body onload="GetMap();">
      <div id="banner" style="background-color: #CCCCFF; border: thin blue dashed; border-bottom: 0px;
         font-family: Helvetica, sans-serif; font-style: italic; font-size: medium; width: 400px">
      </div>
      <div id="myMap" style="position: relative; width: 400px; height: 400px; border: thin blue groove">
      </div>
      <div id="buttons" style="position: static; left: 11px; top: 401px">
         <input name="Button1" type="button" 
            value="Click to Draw Shape and Attach Events" onclick="drawPolygon();" />
         <input name="Button2" type="button" value="Click to Detach Events" onclick="detach();" />
         <div id="label" style="position: relative; left: 0px; top: 0px; width: 399px;">
            <label id="Label1">
            </label>
         </div>
      </div>
   </body>
</html>

Reference

VEMap.DetachEvent Method