Data Browser - Viewing Site  Sector 23 Code Bank Logged in as:  Guest  




           


Bing Maps InfoBox getting Cut Off if near edge of Map
If you put an InfoBox on a Bing Map using API version 7, it cuts off if it's near the edge of the map.
In previous version 6, it overflowed off the map, but now you can't read all of the text.
Suggestions typically involve implementing your own infobox or using JQuery to modify custom html with the correct z-index.

However, there is a MUCH SIMPLER, EASY way to fix this using the existing Bing elements!
In just a few lines of code you can eliminate the problem. All that is lost is the cute little 'pointer' (sometimes), but this code could be optimized further to reduce the chances of that occurring.
I think losing the pointer is no big deal given how easy this was to implement. In fact, I eventually ended up turning it off in all cases, because if you have too many pins on the map, and links in your infobox, it's difficult to mouse over to the infobox if there's empty space around the pointer containing other pins. The pointer just caused more problems as if you accidentally mouse over a different pin hiding beside the pointer you lose the infobox.

Solution:

Assuming you have infobox named 'lastBox', a pushpin named 'pin', and a map named 'myVEMap', add the following javascript whenever it is shown:
(for performance reasons, I have one infobox on the map which gets shown regardless which pin is hovered over)

>>>

// set correct position of infobox so it shows on the map
var mapQuadrantWidth = myVEMap.getWidth()/2;
var infoWidth = lastBox.getWidth();

// if you wanted you could also optimize for height, but my infoboxes are too tall to matter
//var mapQuadrantHeight = myVEMap.getHeight() / 2;
var infoHeight = lastBox.getHeight();

var point = myVEMap.tryLocationToPixel(lastBox.getLocation());
if (point.x > 0 && point.y < 0) { // your box is in the top right quadrant.
lastBox.setOptions({ showPointer: false, offset: new Microsoft.Maps.Point(infoWidth * -1, (infoHeight * -1) + pin.getHeight()) }); // show box lined with top of pin (for easier mouse over to box)
}
else if (point.y < 0) { // your box is in the top left quadrant
lastBox.setOptions({ showPointer: false, offset: new Microsoft.Maps.Point(0, (infoHeight * -1) + pin.getHeight()) }); // show box lined with top of pin (for easier mouse over to box)
}
else if (point.x + infoWidth > mapQuadrantWidth) { // your box is in the bottom right quadrant
lastBox.setOptions({ showPointer: false, offset: new Microsoft.Maps.Point(infoWidth * -1, 0) }); // show box
}
else { // your box is in the bottom left quadrant
lastBox.setOptions({ showPointer: true, offset: new Microsoft.Maps.Point(0, 0) }); // show box. NOTE: you could also put 'false' for showPointer just to be consistent.
}

>>>


And that's it!

Created By: amos 2/25/2014 5:48:27 PM
Updated: 2/25/2014 6:21:45 PM


 Comments:
 > amos 3/21/2014 12:19:51 PM
Variation 2:
If you are using mouseover on pin to show the infobox, you may want the infobox to completely overlap the pin, so that you can leave the infobox (and thereby remove the infobox on mouse out), without passing over the pin and showing it again.

To do this, just shift the box a bit more to cover the pin. I then had to change the Y position of top-left quadrant so that the 'close' button isn't on top of the pin (which would show the infobox again as soon as it is closed since your mouse is over it)

// set correct position of infobox so it shows on the map
var mapQuadrantWidth = myVEMap.getWidth() / 2;
var infoWidth = lastBox.getWidth();
var infoHeight = lastBox.getHeight();

// if you wanted you could also optimize for height, but my infoboxes are too tall to matter
//var mapQuadrantHeight = myVEMap.getHeight() / 2;
var infoHeight = lastBox.getHeight(); // dynamic because of auto in stylesheet on control
var shift = pin.getWidth(); // cover pin to help with mouseover

var point = myVEMap.tryLocationToPixel(lastBox.getLocation());
if (point.x > 0 && point.y < 0) { // your box is in the top right quadrant.
lastBox.setOptions({ offset: new Microsoft.Maps.Point(infoWidth * -1 + shift, (infoHeight * -1) + (pin.getHeight() * 3)) }); // show box lined just above top of pin (for easier mouse over to box), and above so that close btn isn't over original pin
}
else if (point.y < 0) { // your box is in the top left quadrant
lastBox.setOptions({ offset: new Microsoft.Maps.Point(shift*-1, (infoHeight * -1) + pin.getHeight()) }); // show box lined with top of pin (for easier mouse over to box)
}
else if (point.x + infoWidth > mapQuadrantWidth) { // your box is in the bottom right quadrant
lastBox.setOptions({ offset: new Microsoft.Maps.Point(infoWidth * -1 + shift, 0) }); // show box
}
else { // your box is in the bottom left quadrant
lastBox.setOptions({ offset: new Microsoft.Maps.Point(shift*-1, 0) }); // show box
}