CODEWITHSUNDEEP
javascripteventsbing-maps
Ihor Deyneka
Ihor Deyneka

Reputation: 1409

Bing Maps Fully Loaded Event

I'm using Bing Maps version 8. I was trying to find but couldn't understand if there's an event when the map is fully loaded.

The issue I have is I first create a map:

var theMap = new MM.Map(document.getElementById('divMap'), ...

Then at some point after I get data for my map, I call 

theMap.setView({
            bounds: MM.LocationRect.fromLocations(locations)
        });

The problem is there's some kind of race condition, I noticed that this does not work well when the map is not fully loaded. When the "divMap" doesn't yet contain a map canvas rendered by bing maps, then the height of the map is 0 and setView function sets incorrect zoom.

However when the map is loaded fully and I later call the same line through console in Chrome, it works fine.

I suppose I should call setView when the map is fully loaded, but I couldn't find the event I can use for this. Any ideas?

EDIT: I think the problem is with the height of the DIV. In your example, the DIV has static 400px height, while in my situation it is dynamic and before the map is loaded and canvas is rendered, then the div height is 0px, causing setView to work incorrectly. I was trying to debug bing source files in javascript and noticed that it is dependent on the height, so that's the problem. enter image description here

The event when the canvas is ready would help in this situation. For now I'm thinking to add a setInterval to check regularly.

Upvotes: 1

Views: 1896

Answers (4)

Daps
Daps

Reputation: 61

I found the viewrendered event (which is fired after viewchangeend) works well for my use-case.

I'm using it to listen for the initial map load & then hide a "loading" prompt and display the control:

    Microsoft.Maps.Events.addOne(map, 'viewrendered', () => {
        hideElement("mapLoadingPrompt");
        showElement("mapControl");
    });

Notes:

  • Use of Events.addOne() because I only want the function to be called once (the first time it renders).
  • The event doesn't seem to fire if the div containing the control has display: none, so I've had to make it invisible another way while it's loading.

Upvotes: 0

Icerear
Icerear

Reputation: 19

I don't know if it is a little too late for this answer, but i bumbed into this question, and later found a solution. I noticed that the map has a _mapHasLoaded field, which is undefined and turns True when the map is ready.

So a solution could be:

var interval = setInterval(() => {
 if (this.map._mapHasLoaded === true){
    // Do something...
    clearInterval(interval);
 }
}, 100);

Upvotes: 1

lord5et
lord5et

Reputation: 500

I had similar issue with Bing Maps Version 8 (V8) and resolved it with following code:

    this.map.viewchangeend._handlers[0]  = () => {
        this.map._rootElement[0].childNodes[1].childNodes[1].style.display = "none";
    }

Above code removes div which contains info about address of current location from the map.

Later on I discovered proper way to handle this in Bing Maps docs https://www.bing.com/api/maps/sdk/mapcontrol/isdk/addeventhandler#JS

Upvotes: 1

rbrundritt
rbrundritt

Reputation: 18052

There is no map loaded event. That said, I'm not able to reproduce this. If you call the setView function right after creating the map, it works then, so it would definitely work after loading some data. Here is a sample that shows this: https://www.bing.com/api/maps/sdkrelease/mapcontrol/isdk#setMapViewOptions+JS

Perhaps there is an issue with how you are creating/adding data which is causing the issue. Please add more information if this does not resolve your issue.

Edit: If the map div has no height initially, then an error will occur in the calculations. Delay the loading of the map until the map div has a height and your issue should be resolved.

Upvotes: 0

Related Questions