Sign in
 
Microsoft Developer Network > Forums Home > Windows Live Developer Forums Forums > Bing Maps: Map Control Development > How to disable Mouse wheel event?
Ask a questionAsk a question
Search Forums:
 

AnswerHow to disable Mouse wheel event?

  • Tuesday, May 29, 2007 10:25 PMNAVI2 Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    Can anyone help me how to disable mousewheel event for VE map? My application want to disable the mouse wheel action for zooming.
     

Answers

  • Wednesday, May 30, 2007 12:12 AMDerek Chan Old Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Answer
    Sign In to Vote
    0
    Sign In to Vote

    Sure, just override the behaviour of a mousewheel using VE Events.  Sample code that demonstrates this below:

    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;
               
          function GetMap()
          {
             map = new VEMap('myMap');
       map.LoadMap();
       map.AttachEvent("onmousewheel", ShapeHandler);
       }  
    function ShapeHandler(e)
    {
      return true;
    }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       </body>
    </html>
         

     
    Hope that helps,

     
  • Tuesday, October 23, 2007 5:23 PMRichard_BrundrittMVP, ModeratorUsers MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Answer
    Sign In to Vote
    0
    Sign In to Vote
    If you want to disable the zooming of the mouse wheel but still be able to scroll the page when over top of the map you can do what I did in the sample code below.

    Code Block

    <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=6"></script>
          <script>
             var map = null;
             var pinID = 1;
             var y=0;
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
                map.AttachEvent("onmousewheel", wheelCallback);
             }  
           
            function wheelCallback(e)
            {
                //returning true to cancel default action.
               
                window.scrollBy(0,-5*e.mouseWheelChange);

                 return true;
            }
            
             function AddPin()
             { 
                 try
                 {
                      map.DeleteAllShapes();
                     var latlong=new VELatLong(parseFloat(document.getElementById('lat').value),parseFloat(document.getElementById('long').value));
                    var shape = new VEShape( VEShapeType.Pushpin,latlong);
                    map.AddShape(shape);
                    map.SetCenterAndZoom(latlong, 15);
                }
                catch(e)
                 {
                    alert(e.message);
                 }
             }  
          </script>
       </head>
    <body onload="GetMap();">
    <div align="center">
    <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
    Lat: <INPUT id="lat" type="text" name="start" value="0"/>
    Long: <INPUT id="long" type="text" name="end" value="0"/>
    <INPUT id="addpin" type="button" value="Add Pin" name="addpin" onclick="AddPin();">
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />End of page
       </body>
    </html>


     

All Replies

  • Wednesday, May 30, 2007 12:12 AMDerek Chan Old Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Answer
    Sign In to Vote
    0
    Sign In to Vote

    Sure, just override the behaviour of a mousewheel using VE Events.  Sample code that demonstrates this below:

    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;
               
          function GetMap()
          {
             map = new VEMap('myMap');
       map.LoadMap();
       map.AttachEvent("onmousewheel", ShapeHandler);
       }  
    function ShapeHandler(e)
    {
      return true;
    }
          </script>
       </head>
       <body onload="GetMap();">
          <div id='myMap' style="position:relative; width:400px; height:400px;"></div>
       </body>
    </html>
         

     
    Hope that helps,

     
  • Wednesday, May 30, 2007 5:03 PMNAVI2 Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    thanx  Derek its working as per my requirment, its a very simple change Smile
     
  • Tuesday, October 23, 2007 11:51 AMymikhel Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    Hi,

    What if I'd like to change map's event(s) to my handler upon certain conditions, and restore it to the native behaviour after? How do I get the native handler for a map's event(s)?

    Regards,
     
  • Tuesday, October 23, 2007 12:28 PMCraig731 Users MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     
    Sign In to Vote
    0
    Sign In to Vote
    Code Block

    map.DetachEvent("[Handler]", "function()");


    That will cancel out your EventHandler
     
  • Tuesday, October 23, 2007 5:23 PMRichard_BrundrittMVP, ModeratorUsers MedalsUsers MedalsUsers MedalsUsers MedalsUsers Medals
     Answer
    Sign In to Vote
    0
    Sign In to Vote
    If you want to disable the zooming of the mouse wheel but still be able to scroll the page when over top of the map you can do what I did in the sample code below.

    Code Block

    <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=6"></script>
          <script>
             var map = null;
             var pinID = 1;
             var y=0;
             function GetMap()
             {
                map = new VEMap('myMap');
                map.LoadMap();
                map.AttachEvent("onmousewheel", wheelCallback);
             }  
           
            function wheelCallback(e)
            {
                //returning true to cancel default action.
               
                window.scrollBy(0,-5*e.mouseWheelChange);

                 return true;
            }
            
             function AddPin()
             { 
                 try
                 {
                      map.DeleteAllShapes();
                     var latlong=new VELatLong(parseFloat(document.getElementById('lat').value),parseFloat(document.getElementById('long').value));
                    var shape = new VEShape( VEShapeType.Pushpin,latlong);
                    map.AddShape(shape);
                    map.SetCenterAndZoom(latlong, 15);
                }
                catch(e)
                 {
                    alert(e.message);
                 }
             }  
          </script>
       </head>
    <body onload="GetMap();">
    <div align="center">
    <div id='myMap' style="position:relative; width:600px; height:400px;"></div>
    Lat: <INPUT id="lat" type="text" name="start" value="0"/>
    Long: <INPUT id="long" type="text" name="end" value="0"/>
    <INPUT id="addpin" type="button" value="Add Pin" name="addpin" onclick="AddPin();">
    </div>
    <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
    <br /><br /><br /><br /><br /><br />End of page
       </body>
    </html>