Bing Maps v8 - Infobox does not appear in the expected location when the map is zoomed out

Question

I'm trying to use an infobox as a tooltip. I want the infobox to appear at the pushpin the mouse hovers above.

This functionality seems to work fine when the map is sufficiently zoomed in. However when the map is zoomed out - the infobox sometimes appears off the view-port (the infobox behaves as if the map has been translated horizontally).

see here

It's my suspicion that the map is simply wrapping on itself, because it's zoomed out almost all the way. Perhaps this means there are duplicate coordinates on the map canvas, though they're not shown in the view-port.

Pushpins with coordinates that appear only once on the map canvas show the infobox in the correct location.

Can anybody shed some light on this? Any help is appreciated.

I've included a basic version of my code below.

var map;
function loadMapScenario() {
    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'api key',
        maxZoom: 2,
        enableSearchLogo: false,
        disableBirdseye: true,
        showDashboard: false,
        showMapLabel: true,
        showScalebar: false,
        disablePanning: true,
        disableZooming: true,
        disableKeyboardInput: true,
        disableMouseInput: false,
        disableTouchInput: true,
        disableUserInput: false
    });

    var pushpins = Microsoft.Maps.TestDataGenerator.getPushpins(10, map.getBounds());

    var infoBox = new Microsoft.Maps.Infobox(pushpins[0].getLocation(), { title: 'title',
    description: 'description', showCloseButton: false });

    infoBox.setMap(map);

    for (var i = 0; i < pushpins.length; i++) {
        var pushpin = pushpins[i];

        Microsoft.Maps.Events.addHandler(pushpin, "mouseover", function (e) {
            infoBox.setLocation(e.target.getLocation());
        });
    }

    map.entities.push(pushpins);
}

<!DOCTYPE html>
<html>
    <head>
        <title>Bing Maps Full Width</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
    </head>
    <body>
        
        <div id='myMap' style='width: 100%; height: 500px;'></div>
        <script type='text/javascript' src='js/maps.js'></script>
        <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
    </body>
</html>

EDIT

Removing the TestDataGenerator in favour of hard coded coordinate values yields the same problem.

See here.

Updated JS:

map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    credentials: 'api key',
    maxZoom: 2,
    disableBirdseye: true,
    showDashboard: false,
    showMapLabel: true,
    showScalebar: false,
    disablePanning: true,
    disableZooming: true
});

var pushpins = [
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -79.08), null),
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 108.51), null),
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, 95.03), null),
    new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(-28.14, -134.58), null)
];

rbrundritt rbrundritt · Accepted Answer · 2016-07-11T19:16:15

There is a known issue with the TestDataGenerator and "world-wrap" when zoomed out all the way. Notice that not all 10 pushpins are displayed on the map. The infobox is being displayed in the correct position, but the pushpin isn't being rendered.

Also, looking through your map options there are a few that aren't needed:

enableSearchLogo - There is no search logo in V8.
disableBirdseye - Birdseye is not yet available in V8. We have a new experience and imagery coming later this fiscal year. When birdseye is released we will likely expose this option. You can leave this in your code so you don't have to make changes later.
disableKeyboardInput/disableMouseInput/disableTouchInput/disableUserInput not used in V8

Bing Maps v8 - Infobox does not appear in the expected location when the map is zoomed out

1 Answers