none
v8 control - detect fact of fully-loaded map RRS feed

  • Question

  • Hello!

    We're in process of migration between 6.3 & 8 API.

    In the 6.3 we had an onLoad event handler that could be used to exactly detect that the map is fully loaded.

    In the 8 we don't have such event (which makes work with API a little bit simpler).

    However how can we know that the map is FULLY loaded (including dashboard controls, pushpin icons etc)?

    Now the map is loaded not very nice - at first the background map tiles are shown, only then the dashboard and pushpins

    (it looks like some 'blinking' on screen)

    We'd prefer to know the exact moment of full loading and show some 'loading' blanket over the screen till that moment (like we did in 6.3). How can we achieve this?

    thanks in advance for advice!


    • Edited by leokom Monday, October 31, 2016 3:56 PM
    Monday, October 31, 2016 3:55 PM

Answers

  • The Bing Maps V8 control does not have such a method. Simply add your post load code after the map creation code.

    If you aren't happy with this, you could use a Custom Overlay to detect when it has been added to the map and then hide show your splash screen accordingly. Here is an example that shows a gray area for the map while it loads (you can change this to any HTML element you want:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&uncrunched=1' async defer></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		var MapWithSplashScreen = function(mapDiv, mapOptions){
    			var self = this;
    			this.onLoad = null;
    
    			if(!mapDiv || !mapOptions){
    				return;
    			}
    			
    			//Crate a splash screen. For simplicity, using a gray div.
    			var ss = document.createElement('div');
    			ss.style.width = '100%';
    			ss.style.height = '100%';
    			ss.style.position = 'absolute';
    			ss.style.top = '0px';
    			ss.style.left = '0px';
    			ss.style.zIndex = 10000;
    			ss.style.backgroundColor = 'gray';
    			
    			mapDiv.appendChild(ss);
    			
    			//Create a temporary custom overlay.
    			var SplashScreenOverlay = function () {
    			}
    			//Set prototype to sub-class CustomOverlay
    			SplashScreenOverlay.prototype = new Microsoft.Maps.CustomOverlay();
    			
    			SplashScreenOverlay.prototype.onAdd = function () {
    				//Need to add something to the DOM so we can track when it gets added to the map.
    				this.setHtmlElement(document.createElement('div'));
    			};
    
    			//Implement the onLoad method to perform custom operations of rendering the DOM element
    			SplashScreenOverlay.prototype.onLoad = function () {
    				//Map should be fully loaded at this point, remove spalsh screen.				
    				mapDiv.removeChild(ss);
    				
    				if(self.onLoad){
    					self.onLoad(map);
    				}
    				
    				this.getMap().layers.remove(this);
    			};
    			
    			var map = new Microsoft.Maps.Map(mapDiv, mapOptions);
    			
    			map.layers.insert(new SplashScreenOverlay());	
    		};
    
    		//Load the map
    		new MapWithSplashScreen(document.getElementById("myMap"), { 
    			credentials: "Your Bing Maps Key"
    		});
    	}	
    	</script> 
    </head>
    <body>
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]


    • Edited by Ricky_Brundritt Monday, October 31, 2016 6:55 PM
    • Proposed as answer by Ricky_Brundritt Monday, October 31, 2016 6:55 PM
    • Marked as answer by leokom Monday, October 31, 2016 8:02 PM
    Monday, October 31, 2016 6:54 PM
  • This behavior won't change. Custom Overlays are a child of the map control, so it can't be loaded until the map DOM is loaded itself.

    [Blog] [twitter] [LinkedIn]

    Monday, October 31, 2016 7:53 PM

All replies

  • The Bing Maps V8 control does not have such a method. Simply add your post load code after the map creation code.

    If you aren't happy with this, you could use a Custom Overlay to detect when it has been added to the map and then hide show your splash screen accordingly. Here is an example that shows a gray area for the map while it loads (you can change this to any HTML element you want:

    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    
      <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&uncrunched=1' async defer></script>
      
      <script type="text/javascript">
    	var map;
    	
    	function GetMap()
    	{	
    		var MapWithSplashScreen = function(mapDiv, mapOptions){
    			var self = this;
    			this.onLoad = null;
    
    			if(!mapDiv || !mapOptions){
    				return;
    			}
    			
    			//Crate a splash screen. For simplicity, using a gray div.
    			var ss = document.createElement('div');
    			ss.style.width = '100%';
    			ss.style.height = '100%';
    			ss.style.position = 'absolute';
    			ss.style.top = '0px';
    			ss.style.left = '0px';
    			ss.style.zIndex = 10000;
    			ss.style.backgroundColor = 'gray';
    			
    			mapDiv.appendChild(ss);
    			
    			//Create a temporary custom overlay.
    			var SplashScreenOverlay = function () {
    			}
    			//Set prototype to sub-class CustomOverlay
    			SplashScreenOverlay.prototype = new Microsoft.Maps.CustomOverlay();
    			
    			SplashScreenOverlay.prototype.onAdd = function () {
    				//Need to add something to the DOM so we can track when it gets added to the map.
    				this.setHtmlElement(document.createElement('div'));
    			};
    
    			//Implement the onLoad method to perform custom operations of rendering the DOM element
    			SplashScreenOverlay.prototype.onLoad = function () {
    				//Map should be fully loaded at this point, remove spalsh screen.				
    				mapDiv.removeChild(ss);
    				
    				if(self.onLoad){
    					self.onLoad(map);
    				}
    				
    				this.getMap().layers.remove(this);
    			};
    			
    			var map = new Microsoft.Maps.Map(mapDiv, mapOptions);
    			
    			map.layers.insert(new SplashScreenOverlay());	
    		};
    
    		//Load the map
    		new MapWithSplashScreen(document.getElementById("myMap"), { 
    			credentials: "Your Bing Maps Key"
    		});
    	}	
    	</script> 
    </head>
    <body>
    	<div id='myMap' style=";width:800px;height:600px;"></div>
    </body>
    </html>


    [Blog] [twitter] [LinkedIn]


    • Edited by Ricky_Brundritt Monday, October 31, 2016 6:55 PM
    • Proposed as answer by Ricky_Brundritt Monday, October 31, 2016 6:55 PM
    • Marked as answer by leokom Monday, October 31, 2016 8:02 PM
    Monday, October 31, 2016 6:54 PM
  • Thanks, Ricky! It's a nice example!

    Does Bing Maps API guarantee that the custom overlays will be loaded after the standard controls, or it's a reflection of how the custom overlays work right now (and can be a subject to changes in the next updates)?

    Monday, October 31, 2016 7:11 PM
  • This behavior won't change. Custom Overlays are a child of the map control, so it can't be loaded until the map DOM is loaded itself.

    [Blog] [twitter] [LinkedIn]

    Monday, October 31, 2016 7:53 PM
  • Thanks! It's clear now.
    Monday, October 31, 2016 8:02 PM