none
Reposition Infobox to Fit in Map View RRS feed

  • General discussion

  • Ricky Brundritt blogged a very nice technique for repositioning an infobox:

    http://blogs.bing.com/maps/2011/09/16/dev-tip-repositioning-an-infobox/

    Please consider the following code as a possible refinement (despite, and acknowledging, the verbose variable names to which I am inexplicably partial):

    // Reposition location if necessary to fit infobox in the map view
    
    var GetInfoboxLocation = BingMap.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
    var GetInfoboxOffset = RetailLocationInfobox.getOffset();
    var GetInfoboxAnchor = RetailLocationInfobox.getAnchor();
    
    var VerticalPosition = GetInfoboxLocation.y - GetInfoboxOffset.y - GetInfoboxAnchor.y;
    var HorizontalPosition = GetInfoboxLocation.x + GetInfoboxOffset.x - GetInfoboxAnchor.x;
    var GetRightOverlap = BingMap.getWidth() - HorizontalPosition - RetailLocationInfobox.getWidth();
    
    VerticalPosition = Math.max(MinInfoboxVerticalDisplacement - VerticalPosition, 0);
    HorizontalPosition = Math.max(Math.max(MinInfoboxHorizontalDisplacement - HorizontalPosition), Math.min(GetRightOverlap - MinInfoboxHorizontalDisplacement, 0));
    
    BingMap.setView({centerOffset: new Microsoft.Maps.Point(HorizontalPosition, VerticalPosition), center: BingMap.getCenter()});


    This code revises Mr. Brundritt's technique to achieve the following:

    First, using the definition of the Horizontal Position in calculating the Right Overlap accounts for anyone who makes the x offset something other than zero.

    Second, I used the corresponding y offset as a variable in calculating the Vertical Position.

    Third, the "max(max, min)" revision of the Horizontal Position accounts for any circumstance where an infobox may by wider than the map view.  In such a case, it truncates the right side of the box instead of the (presumably more important) left side of the box.

    I offer this with kind thanks to Mr. Brundritt, whose direction in the blog post showed me the way to solving this problem.


    Jack

    Post "Post" Script:  Please note that I use two separate variables (which are defined elsewhere in the code, not visible in this post) for the top and side buffers.  One could expand that, actually to three (top, left, and right).

    And, finally, probably safest to condition the repositioning on the success of the "tryLocationToPixel" method as follows:

    var GetInfoboxLocation = BingMap.tryLocationToPixel(e.target.getLocation(), Microsoft.Maps.PixelReference.control);
    			
    if (GetInfoboxLocation)
    {
    	// rest of code previously posted
    }
    
    • Edited by Jack Herr Friday, January 16, 2015 1:18 PM
    Thursday, January 15, 2015 10:42 PM

All replies

  • Nice tip. It may also be relevant when using the custom infobox module found here: http://bingmapsv7modules.codeplex.com/wikipage?title=Custom%20Infobox%20Control

    http://rbrundritt.wordpress.com


    Friday, January 16, 2015 3:50 PM
  • I have the same problem. Has this been coded in to V8 or do I need to manually code it like above?

    Thanks in Advance - Dan

    Sunday, December 16, 2018 5:07 PM
  • Hi DDL19,

    Can you outline the problem you are having with the V8 control?  You should be able to set the infobox at any position of your choosing.  See https://www.bing.com/api/maps/sdk/mapcontrol/isdk/setinfoboxoptions

    In the left menu there are a bunch of infobox samples, can you modify one of those to show your issue?  You can edit the code in place then hit the white triangle in the green circle to run the modified code.  Once you have that sample, please paste it in a reply here with and explanation of what is not working for you.

    Sincere thanks,

    IoTGirl


    Sunday, December 16, 2018 5:23 PM
    Owner
  • the default behavior is this..... https://www.bing.com/api/maps/sdk/mapcontrol/isdk/displayinfoboxonclickpushpin. If you drag this map so the pushpin is near the top or near the right and click on it..... The info box is off the page... My app has many points and some fairly large info boxes... it is important that the infobox remains with the pushpin.

    My question is do I need to manually code around this or has there been a method added to recognize this and move it for me.....

    Thanks for quick response.. Much Appreciated. 

    Sunday, December 16, 2018 5:34 PM
  • Hi DDL19,

    I thought work had been done to ensure the box was on the screen but it may not accommodate the dragging off screen case.  I will escalate this to the V8 Control folks for their review.

    Sincerely,

    IoTGirl

    Sunday, December 16, 2018 5:53 PM
    Owner
  • Dragging off is really not my particular use case but it applies. 

    Here is my scenario:

    I draw 4 points and have the view centered on the middle of these points..

    When any of these points are clicked the infobox is displayed with the point. No regard is given to where the infobox is. If it is half off screen that is how it is displayed...…

    Hope this explains further..... Thanks for your help....

    Sunday, December 16, 2018 6:02 PM
  • Hi DDL19,

    Do you have a small snip of sample code that could be placed in the interactive SDK for reproduction of your issue?

    You should have complete configuration control of that infobox but your ask is about the default behavior correct?

    Sincerely,

    IoTGirl

    Sunday, December 16, 2018 6:08 PM
    Owner
  • just take a random point Generator and add info boxes to them. the top of page pins infobox WILL go off top of page if big enough. The control does nothing natively to insure that the infobox is in view.

    Dragging this pin out to edges is same issue.... 

    https://www.bing.com/api/maps/sdk/mapcontrol/isdk/displayinfoboxonclickpushpin

    That is what has prompted this question. Do I need to right the code above in this thread or is there now a way in V8 Control to handle this....

    Monday, December 17, 2018 2:28 PM
  • Hi DDL19,

    I think this is working as designed.  Can you take a look at https://www.bing.com/api/maps/sdk/mapcontrol/isdk/reuseinfobox?

    Click on the pushpin near the edge of the map on the right and you will see that the infobox is rendered in visible area when clicked.  

    Then drag the map so that a pin is near any edge and click to see how it handles each case.

    Sincerely,

    IoTGirl

    Monday, December 17, 2018 5:59 PM
    Owner
  • Thank you for the response. Yes the above thread is the answer: The line of code that does it is:

    var infobox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { visible: false, autoAlignment: true });

    The key piece is the autoAlignment: true 

    This handles all they above for you...

    Monday, December 17, 2018 10:52 PM
  • Excellent!  Thank you for confirming this worked for you.
    Tuesday, December 18, 2018 2:23 AM
    Owner
  • Since you have a line to the development team,  it would be appreciated by all to have this in ALL the examples. Not sure anyone building custom infoboxes would like them to go off screen. 
    Tuesday, December 18, 2018 2:19 PM
  • Hmm, that is an interesting idea.  Maybe we could incorporate a toggle to turn it on and off and that would bring more attention to this setting.
    Tuesday, December 18, 2018 2:40 PM
    Owner