none
Adding many polylines affecting Bing Maps performance RRS feed

  • Question

  • I am adding polylines to Bing Maps at the rate of 10Hz. (10 polylines per second).

    After 10-15 minutes or so, maps performance is gradually slowing down.

    Is there any way I can take care of this issue?

    Following is my code:

    <!DOCTYPE html>
    <html>
        <head>
    		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
        </head>
        <body>        
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
    			var map;
    			var prevLat = 0;
    			var prevLon = 0;
    			var isMapLoadComplete = false;
    						
                function loadMap() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
    				liteMode: true
    				});
    				map.setView({
    					center: new Microsoft.Maps.Location(12.9716, 77.5946),
    					zoom: 15
    				});
    
    				isMapLoadComplete = true;
                }
    			
    			function AddPoint(latitude, longitude, heading, fixTypeColor){
    			
    			if(isMapLoadComplete)
    			{	
    				if(prevLat == 0 && prevLon == 0)
    				{				
    					var Coordinates = [
    					new Microsoft.Maps.Location(latitude, longitude)
    					];
    				}
    				else
    				{
    					var Coordinates = [
    					new Microsoft.Maps.Location(prevLat, prevLon),
    					new Microsoft.Maps.Location(latitude, longitude)
    					];				
    				}
    				
    				prevLat = latitude;
    				prevLon = longitude;
    				
    				var newPoint = new Microsoft.Maps.Location(latitude, longitude);
    				
    				var polyline = new Microsoft.Maps.Polyline(Coordinates, {
    					strokeColor: fixTypeColor,
    					strokeThickness: 2
    				});
    				
    				map.entities.push(polyline);
    				
    				if(map.getBounds().contains(newPoint))
    				{
    					// marker is within map bounds don't Move
    				}
    				else
    				{
    					map.setView({
    					center: newPoint
    					});
    				}			
    			}				
    		}
    					
            </script>
            <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=[my_key]&callback=loadMap' async defer></script>
        </body>
    </html>
    function AddPoint() is called at 10 Hz.

    Monday, June 4, 2018 10:14 AM

All replies

  • When you add your polylines to the map, instead of using map.entities.push, use a layer and add your 10 polylines to an array first and pass the whole array into the layer. This will result in 1 render call to the map instead of 10 which will be much faster. 

    Additionally, if you are adding 10 polylines a second, after 15 minutes that would mean you have 9000 polylines on the map. The map control can handle that many polylines, however if your polylines has a lot of coordinates in each of them, that could increase the memory usage drastically and also mean a lot more calculations are required to render the data which would slow things down. 


    [Blog] [twitter] [LinkedIn]

    Monday, June 4, 2018 4:55 PM
  • Hi Ricky,

    Thanks for the suggestion. I implemented your suggested approach and did thorough testing.

    Following are my observations and requirements:

    • Adding 10 polylines to an array and then adding that array to layer works well initially but performance decreases after 30 mins or so. Please note that each polyline has only 2 coordinates.
    • Receiving data at 10 Hz is not constant. Sometimes data also comes at 1 Hz.
      If I go by above logic, this happens:     
      10 Hz =>  x length line appears on map after 1 sec
      1 Hz => 10x length line appears on map after 10 secs

    What else can I do to get a smooth performance for at least 1 hour?

    Regards,

    Saurabh

    Thursday, June 7, 2018 10:29 AM