none
Bing Maps v8 InfoBox Close Button Bubbling RRS feed

  • Question

  • Hello,

    This is a feature request to remove the bubbling from the default Infobox close button.

    The close button on the non-custom Infobox is a convenience for non-custom Infoboxes.

    However, the click event that closes the button currently bubbles down to the map with no way of detecting it since the originalTarget is removed from v8. 

    On mobile devices that display an Infobox, this often means the map unexpectedly zooms because the close button is directly over the default zoom button.

    The bubbling cannot be stopped without the originalEvent and has no development utility.  The result is unavoidable chaos in event handling.

    Why not just remove it?



    Friday, October 6, 2017 5:43 AM

Answers

  • Which browser are you using? I just tried this and am not able to reproduce it. Here is the code I used to test this:

    <!DOCTYPE html>
    <html>
        <head>
            <title>mapMouseEventsHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'><div id="mapClick">click</div></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key'
                    });
    				
    				var center = map.getCenter();
    				var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
    					description: 'Seattle' });
    				infobox.setMap(map);
    				
                    // Binding the events
                    Microsoft.Maps.Events.addHandler(map, 'click', function (e) { handleArgs('mapClick', e); });
    				
                    var highlights = {};
                    function highlight(id) {
                        document.getElementById(id).style.background = 'LightGreen';
                        if (highlights[id]) {
                            clearTimeout(highlights[id]);
                        }
                        highlights[id] = setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
                    }
    				
                    function showValue(id, value, defaultValue) {
                        var strVal = (value || defaultValue).toString();
                        document.getElementById(id).innerHTML = strVal;
                    }
    				
                    function handleArgs(id, e) {
                        highlight(id);
                        showValue('isPrimaryVal', e.isPrimary, false);
                        showValue('isSecondaryVal', e.isSecondary, false);
                        showValue('wheelDeltaVal', e.wheelDelta, 0);
                    }                
                }
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Friday, October 6, 2017 11:13 PM
  • If you click the close button, the events don't pass through to the shapes that are under the infobox. It wouldn't make sense for it to and testing this on all supported browsers I'm not seeing this happen. I've tested both experimental and the main release branch. Here is an example that attaches all mouse events to pushpins.

    <!DOCTYPE html>
    <html>
        <head>
            <title>addDefaultInfoboxHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    					credentials: 'Your Bing Maps Key',
    					center: new Microsoft.Maps.Location(47.60357, -122.32945)
    				});
    				var center = map.getCenter();
    				var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
    					description: 'Seattle' });
    				infobox.setMap(map);
    
    				var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
    				var layer = new Microsoft.Maps.Layer();
    				layer.add(pushpins);
    				map.layers.insert(layer);
    				
    				// Binding the events
    				Microsoft.Maps.Events.addHandler(layer, 'click', function () { highlight('layerClick'); });
    				Microsoft.Maps.Events.addHandler(layer, 'dblclick', function () { highlight('layerDblclick'); });
    				Microsoft.Maps.Events.addHandler(layer, 'rightclick', function () { highlight('layerRightclick'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mousedown', function () { highlight('layerMousedown'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mouseout', function () { highlight('layerMouseout'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mouseover', function () { highlight('layerMouseover'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mouseup', function () { highlight('layerMouseup'); });
    				// Setting up the printout panel
    				document.getElementById('printoutPanel').innerHTML =
    					'<div id="layerClick">click</div><div id="layerDblclick">dblclick</div><div id="layerRightclick">rightclick</div><div id="layerMousedown">mousedown</div><div id="layerMouseout">mouseout</div><div id="layerMouseover">mouseover</div><div id="layerMouseup">mouseup</div>';
    				function highlight(id) {
    					document.getElementById(id).style.background = 'LightGreen';
    					setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
    				}
                }
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario&branch=experimental' async defer></script>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Monday, October 9, 2017 4:58 PM
  • Ok, that helps. If it appears above the navigation bar, then you must be using the experimental branch, as it appears below the navigation bar in the main release branch. That said, if I position the infobox such that the close button appears above any part of the navigation bar/controls, and then press the close button, the event doesn't propagate through to the controls. You can try this out here: https://www.bing.com/api/maps/mapcontrol/isdk?autoRedirect=false#displayInfoboxOnClickPushpin+JS

    [Blog] [twitter] [LinkedIn]

    Thursday, October 12, 2017 8:27 PM

All replies

  • Which browser are you using? I just tried this and am not able to reproduce it. Here is the code I used to test this:

    <!DOCTYPE html>
    <html>
        <head>
            <title>mapMouseEventsHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'><div id="mapClick">click</div></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key'
                    });
    				
    				var center = map.getCenter();
    				var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
    					description: 'Seattle' });
    				infobox.setMap(map);
    				
                    // Binding the events
                    Microsoft.Maps.Events.addHandler(map, 'click', function (e) { handleArgs('mapClick', e); });
    				
                    var highlights = {};
                    function highlight(id) {
                        document.getElementById(id).style.background = 'LightGreen';
                        if (highlights[id]) {
                            clearTimeout(highlights[id]);
                        }
                        highlights[id] = setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
                    }
    				
                    function showValue(id, value, defaultValue) {
                        var strVal = (value || defaultValue).toString();
                        document.getElementById(id).innerHTML = strVal;
                    }
    				
                    function handleArgs(id, e) {
                        highlight(id);
                        showValue('isPrimaryVal', e.isPrimary, false);
                        showValue('isSecondaryVal', e.isSecondary, false);
                        showValue('wheelDeltaVal', e.wheelDelta, 0);
                    }                
                }
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario' async defer></script>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Friday, October 6, 2017 11:13 PM
  • That's good news. 

    Now all I have to do is get to the documentation again. 

    Your URL from the google search 

    https://msdn.microsoft.com/Areas/Epx/Content/500.aspx?aspxerrorpath=/en-us/library/mt750279.aspx

    is returning a server error.  

    Anyway if isPrimary and isSecondary is a way to tell which node triggered an event, things will work out.

    Thank you.

    Server Error in '/' Application.

    Runtime Error

    Description: An exception occurred while processing your request. Additionally, another exception occurred while executing the custom error page for the first exception. The request has been terminated. 

    Saturday, October 7, 2017 12:10 AM
  • I got to the documentation and I think I am right.

    isPrimary and isSecondary flags the mouse button that triggered the event.

    Under the current API, there is no way to identify a click event on the Infobox close button to stop that event from propogating and being captured by whatever is under the close button.



    Saturday, October 7, 2017 1:02 AM
  • If you click the close button, the events don't pass through to the shapes that are under the infobox. It wouldn't make sense for it to and testing this on all supported browsers I'm not seeing this happen. I've tested both experimental and the main release branch. Here is an example that attaches all mouse events to pushpins.

    <!DOCTYPE html>
    <html>
        <head>
            <title>addDefaultInfoboxHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
                function loadMapScenario() {
                    var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    					credentials: 'Your Bing Maps Key',
    					center: new Microsoft.Maps.Location(47.60357, -122.32945)
    				});
    				var center = map.getCenter();
    				var infobox = new Microsoft.Maps.Infobox(center, { title: 'Map Center',
    					description: 'Seattle' });
    				infobox.setMap(map);
    
    				var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(1000, map.getBounds());
    				var layer = new Microsoft.Maps.Layer();
    				layer.add(pushpins);
    				map.layers.insert(layer);
    				
    				// Binding the events
    				Microsoft.Maps.Events.addHandler(layer, 'click', function () { highlight('layerClick'); });
    				Microsoft.Maps.Events.addHandler(layer, 'dblclick', function () { highlight('layerDblclick'); });
    				Microsoft.Maps.Events.addHandler(layer, 'rightclick', function () { highlight('layerRightclick'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mousedown', function () { highlight('layerMousedown'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mouseout', function () { highlight('layerMouseout'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mouseover', function () { highlight('layerMouseover'); });
    				Microsoft.Maps.Events.addHandler(layer, 'mouseup', function () { highlight('layerMouseup'); });
    				// Setting up the printout panel
    				document.getElementById('printoutPanel').innerHTML =
    					'<div id="layerClick">click</div><div id="layerDblclick">dblclick</div><div id="layerRightclick">rightclick</div><div id="layerMousedown">mousedown</div><div id="layerMouseout">mouseout</div><div id="layerMouseover">mouseover</div><div id="layerMouseup">mouseup</div>';
    				function highlight(id) {
    					document.getElementById(id).style.background = 'LightGreen';
    					setTimeout(function () { document.getElementById(id).style.background = 'white'; }, 1000);
    				}
                }
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?callback=loadMapScenario&branch=experimental' async defer></script>
        </body>
    </html>


    [Blog] [twitter] [LinkedIn]

    Monday, October 9, 2017 4:58 PM
  • I see this with navigation bar buttons, particularly in a mobile context.

    An Infobox frequently displays with the close button over a navigation bar button.

    Tapping the close button triggers any navigation bar button under it. 

    I tried extensively to intercept and stop the event. All methods failed.

    Finally, I determined the best attempt to stop this behavior is to post here. 



    Tuesday, October 10, 2017 5:15 AM
  • In that case, the issue is that infoboxes are rendered below the navigation bar. This is by design as majority of the time users want to use the navigation bar rather than close the infobox.

    [Blog] [twitter] [LinkedIn]

    Thursday, October 12, 2017 1:59 AM
  • The close button and the infobox are rendered above the navigation bar buttons.

    Thursday, October 12, 2017 4:31 AM
  • Ok, that helps. If it appears above the navigation bar, then you must be using the experimental branch, as it appears below the navigation bar in the main release branch. That said, if I position the infobox such that the close button appears above any part of the navigation bar/controls, and then press the close button, the event doesn't propagate through to the controls. You can try this out here: https://www.bing.com/api/maps/mapcontrol/isdk?autoRedirect=false#displayInfoboxOnClickPushpin+JS

    [Blog] [twitter] [LinkedIn]

    Thursday, October 12, 2017 8:27 PM

  • I see this problem with a tap on a mobile device touch screen.

    Friday, October 13, 2017 3:51 AM
  • Which mobile device/OS version. Just tried iOS, Android and WP10 without any issue.

    [Blog] [twitter] [LinkedIn]

    Friday, October 13, 2017 5:39 PM
  • I removed zIndex from Infobox Options to get the close button beneath the navbar buttons. 

    I also no longer see the event passing through to the map.

    Upon testing, the issue appears to be resolved.

    Thank you.

    Saturday, October 14, 2017 9:24 AM