locked
Infoboxes, HtmlContent, and scrolling RRS feed

  • Question

  • Hi,

    I'm creating an infobox using the API and setting the HTMLContent eg

     

    pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0,0), {visible: true,htmlContent:"<div id='myID'>yadayadayada</div>"});

    If I drag my mouse on top of the infobox, the map behind it scrolls as well.

    Is there any way to stop this eventhandler (whatever it is) from firing when I'm clicking on the infobox?

    The real issue is that I'm trying to put a lot of content into the infobox and using a scrolling div for access - but the scroll bar isn't working because the map is scrolling instead.

     

    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:48 PM (From:Bing Maps: Map Control and Web services Development)
    Wednesday, June 1, 2011 12:33 PM

Answers

  • Basicaly, what you should do is, know if you have your infobox opened and in this case set handled property in the mousewheel event of the Map control.

    To do this, you can do like this:

    • Check the event that fire the opening of your infobox
    • Check the closing event of your infobox (you can use your own method to close it or when one of infobox option is changed).

    Here is a sample solution:

     

    <!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=7.0"></script>
    	 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"></script>
    
      <script type="text/javascript">
    
       var map = null; 
       var pinInfobox = null;  
    
       function GetMap()
       {
       // Initialize the map
       map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
       // Retrieve the location of the map center 
       var center = map.getCenter();
       
       // Add a pin to the center of the map
       var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 
    			
       // Add a handler for the pushpin click event.
       Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap);
    
       // Add the pushpin and info box to the map
       map.entities.push(pin);
    		
       }
    
    		var overInfoBox = false;
    		 
    		function displayInfobox(e)
    		{			
    			pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0,0), {title: 'My Pushpin', visible: true, htmlContent:"<div>MY CONTENT</div>" });
    			overInfoBox = true;
    			Microsoft.Maps.Events.addHandler(pinInfobox, 'entitychanged', function(e) { 
    				overInfoBox = false; 
    			});
    			map.entities.push(pinInfobox);
    		}
    		
    		function scrollMap(e) {
    			if (overInfoBox) {
    				e.handled = true;
    			}
    		}
    		
    	</script>
     </head>
     <body onload="GetMap();">
      <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>  
    </html>
    

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, June 1, 2011 3:08 PM
  • e.handled = true stop the event propagation. So basicaly, you say that you treat the event and don't want it to invoke the default event.

    See: http://msdn.microsoft.com/en-us/library/gg406731.aspx

    handled

    boolean

    A boolean indicating whether the event is handled. If this property is set to true, the default map control behavior for the event is cancelled.

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Friday, June 3, 2011 1:23 PM

All replies

  • Basicaly, what you should do is, know if you have your infobox opened and in this case set handled property in the mousewheel event of the Map control.

    To do this, you can do like this:

    • Check the event that fire the opening of your infobox
    • Check the closing event of your infobox (you can use your own method to close it or when one of infobox option is changed).

    Here is a sample solution:

     

    <!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=7.0"></script>
    	 <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.1.js"></script>
    
      <script type="text/javascript">
    
       var map = null; 
       var pinInfobox = null;  
    
       function GetMap()
       {
       // Initialize the map
       map = new Microsoft.Maps.Map($("#myMap").get(0), {credentials:"Bing Maps Key"}); 
    
       // Retrieve the location of the map center 
       var center = map.getCenter();
       
       // Add a pin to the center of the map
       var pin = new Microsoft.Maps.Pushpin(center, {text: '1'}); 
    			
       // Add a handler for the pushpin click event.
       Microsoft.Maps.Events.addHandler(pin, 'click', displayInfobox);
    			Microsoft.Maps.Events.addHandler(map, 'mousewheel', scrollMap);
    
       // Add the pushpin and info box to the map
       map.entities.push(pin);
    		
       }
    
    		var overInfoBox = false;
    		 
    		function displayInfobox(e)
    		{			
    			pinInfobox = new Microsoft.Maps.Infobox(new Microsoft.Maps.Location(0,0), {title: 'My Pushpin', visible: true, htmlContent:"<div>MY CONTENT</div>" });
    			overInfoBox = true;
    			Microsoft.Maps.Events.addHandler(pinInfobox, 'entitychanged', function(e) { 
    				overInfoBox = false; 
    			});
    			map.entities.push(pinInfobox);
    		}
    		
    		function scrollMap(e) {
    			if (overInfoBox) {
    				e.handled = true;
    			}
    		}
    		
    	</script>
     </head>
     <body onload="GetMap();">
      <div id='myMap' style="overflow: visible !important; position:relative; width:500px; height:500px;"></div>  
    </html>
    

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Wednesday, June 1, 2011 3:08 PM
  • Thanks Nicolas - that should work a treat.

     

    By the way - what does e.handled=true do?

    Thursday, June 2, 2011 7:40 AM
  • e.handled = true stop the event propagation. So basicaly, you say that you treat the event and don't want it to invoke the default event.

    See: http://msdn.microsoft.com/en-us/library/gg406731.aspx

    handled

    boolean

    A boolean indicating whether the event is handled. If this property is set to true, the default map control behavior for the event is cancelled.

     


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Friday, June 3, 2011 1:23 PM