bing maps infobox with scroll sticks

Question

I'm trying to make sure content inside an infobox popup scrolls so all the info is shown but when I try to scroll using the scrollbar on releasing the mouse button the map sticks to this point as if holding down and panning. Here's some code to reproduce:

    var location = new Microsoft.Maps.Location(0, 0);
    var html = "title<br/>description desc desc"
            + " description desc desc description desc desc"
            + " description desc desc description desc desc"
            + " description desc desc description desc desc"
            + " description desc desc description desc desc"
        ;

    var popupHTML = '<div style="height: 50px; width: 100px; overflow: auto; background: white;">{content}</div>';

    var options = {
        htmlContent: popupHTML.replace('{content}', html),
        visible: true,
    };
    var popup = new Microsoft.Maps.Infobox(location, options);

    map.entities.push(popup);

or alternatively paste the below into the Bing maps SDK under infobox section:

    map.entities.clear(); 
    var infoboxOptions = {title:'Infobox Title', description:'<div style="height:20px; overflow: auto;">Infobox description description description description description description description description description description description description description description description description description description description<div>'}; 
    var defaultInfobox = new Microsoft.Maps.Infobox(map.getCenter(), infoboxOptions );    
    map.entities.push(defaultInfobox);

Then try to scroll down and when you release, the map will be stuck to that position as if you're holding down and panning.

Any suggestions welcome, Thanks!

score 3 · Accepted Answer · answered Oct 12 '12 at 14:23

You must disable the default event handlers!

Try something like the following in your infobox creation func:

map.infobox = new Microsoft.Maps.Infobox(center, infoboxOptions);
        map.moveHandler = Microsoft.Maps.Events.addHandler(map, 'mousemove', function (e) {
                    e.handled = true;});
        map.wheelHandler = Microsoft.Maps.Events.addHandler(map, 'mousewheel', function (e) {
                    e.handled = true;});
        Microsoft.Maps.Events.addHandler(map, 'click', function(e) { 
            if (map.infobox) 
                {map.entities.remove(map.infobox);
                map.infobox = false;
                Microsoft.Maps.Events.removeHandler(map.moveHandler);
                Microsoft.Maps.Events.removeHandler(map.wheelHandler);
                map.moveHandler = false;
                map.wheelHandler = false}});

Thanks obi068! Seems to work ok but need to re-add the handlers when you close the infobox. I ended up just going with a larger box to the side as in compatibility mode the scrollbar crashed internet explorer! — John Leonard, Oct 15 '12 at 16:17

score 3 · Answer 2 · answered Aug 19 '15 at 13:25

I know I'm a little late to the party here, but I had the same issue, and solved it using the built-in events.

The cause

Through a lot of logging statements in various eventhandlers, I found out the issue occurs because a mousedown event happens on the map, but the scrollbar somehow prevents a mouseup event from happening, leaving the map to be dragged around.

The solution

When the map is initialized, I add eventhandlers for the mouseDown event on the map.

Microsoft.Maps.Events.addHandler(map, 'mousedown', map_mousedown);

For the displaybox I add eventhandlers for mouseenter, mouseleave and entitychanged events.

Microsoft.Maps.Events.addHandler(infobox, 'mouseenter', infobox_mouseenter);
Microsoft.Maps.Events.addHandler(infobox, 'mouseleave', infobox_mouseleave);
Microsoft.Maps.Events.addHandler(infobox, 'entitychanged', infobox_entitychanged);

In the mouseenter and mouseleave eventhandlers, I set a value indicating if the mouse is over the infobox, and reset it using entitychanged when the infobox closes.

var overInfobox = false;

function infobox_mouseenter(event) {
    overInfobox = true;
}

function infobox_mouseleave(event) {
    overInfobox = false;
}

function infobox_entitychanged(event) {
    overInfobox = false;
}

In the mousedown eventhandler for the map, this value is examined. If it is true, then the default action for the event (which is dragging the map) is prevented.

function map_mousedown(event) {
    if (overInfobox)
        event.handled = true;
}

This way, when the mouse clicks something within the infobox, it will not affect the map. The scrollbars will work, and you can drag the map outsite of the infobox (and when you close the infobox using the X in the top corner).

This should be the accepted answer works better than above one — Akshay Randive, Nov 18 '15 at 10:40
Thanks @eddie.sholl - I hadn't worked much with Bing maps before, so it took me a long time to figure out why this problem was ocurring. I'm glad my solution could help someone else :-) — Lars Kristensen, Jun 10 '16 at 07:58

score 0 · Answer 3 · answered Oct 14 '14 at 13:52

You could apply this css to a div parent of your html code:

  <style>
    .infobox{

     border: 1px solid #777 ;
     font: 11px ;
     width: 95%;
      margin:auto;
     min-height: 3em;
     max-height: 18em;
     overflow: auto;
    padding: 5px;
            }
   </style>

bing maps infobox with scroll sticks

3 Answers3

The cause

The solution