none
Bing Maps v8 - Multiple TileLayers RRS feed

  • Question

  • In Bing maps v8, loading more than 2 tile layers is taking long to show in the map using IE v11.

    var tileSource1 = new Microsoft.Maps.TileSource({ uriConstructor: getTilePath1 });
    var tileLayer1 = new Microsoft.Maps.TileLayer({ mercator: tileSource1, opacity: 0.25, zIndex: 100 });
    map.layers.insert(tileLayer1);
    tileLayer1.setVisible(true);

    var tileSource2 = new Microsoft.Maps.TileSource({ uriConstructor: getTilePath2 });
    var tileLayer2 = new Microsoft.Maps.TileLayer({ mercator: tileSource2, opacity: 0.25, zIndex: 100 });
    map.layers.insert(tileLayer2);
    tileLayer2.setVisible(true);

    var tileSource3 = new Microsoft.Maps.TileSource({ uriConstructor: getTilePath3 });
    var tileLayer3 = new Microsoft.Maps.TileLayer({ mercator: tileSource3, opacity: 0.25, zIndex: 100 });
    map.layers.insert(tileLayer3);
    tileLayer3.setVisible(true);

    Two layers are showing up good. As soon as we add third layer, layers in 1/4 of the map shows up first and rest taking 20 to 35 seconds to show completely.

    Any one know fix to this?

    Sunday, March 5, 2017 4:19 PM

Answers

  • Are you having some 404? 

    I had some similar issues with IE11 in win7 (In windows 10 with ie11 or Edge it worked) and with chrome and firefox would work perfectly. IE11 with bing maps v7 also worked. Only windows 7 with IE11 and Bing maps v8 this issues showed up. But the sympthoms are similar so it might help

    My solution was to return a blank tile everytime a 404 happened(server side)

    redirect to my thread and lets hope it helps

    https://social.msdn.microsoft.com/Forums/en-US/c0e8e097-7992-4184-ae4b-7c6d8d85067c/internet-explorer-11-4-tile-layers-not-rendering-properly?forum=bingmaps#9bd0a1d5-321d-48fa-89ae-7514b4a83c1b


    Monday, March 6, 2017 10:44 AM
  • You just highlighted the issue. The last few tiles are taking 374 ms to load. This is independent of Bing Maps and is due to one of two reasons:

    • Your tile service is slowing down or slow.
    • With all the tiles your app is loading the number of HTTP requests is high and as such the browser is limiting the number of concurrent tiles being downloaded. If you look closer at the tile request time in the Network tab you likely will find that most of that time is spent waiting for the browser. This is a browser limitation that has existed for ages. If you have a webpages with 100's of files you will run into the same issue.

    [Blog] [twitter] [LinkedIn]

    Wednesday, March 15, 2017 3:45 PM

All replies

  • A couple of things to take a look at:

    • take a loom at the network tab and see if there is a backlog of tiles waiting to be downloaded. The browser limits how many concurrent files can be downloaded.
    • there is no need to call the setVisible function after adding the tilelayer to the map. This will just trigger another re-render of the map canvas.
    • try using the experimental branch to see if it is better. The team has been adding a number of performance enhancements to the experimental branch recently.

    [Blog] [twitter] [LinkedIn]

    Sunday, March 5, 2017 5:28 PM
  • Thank you for the response.

    Tried all you mentioned.


    •take a loom at the network tab and see if there is a backlog of tiles waiting to be downloaded. The browser limits how many concurrent files can be downloaded.
    -- From IE network tab, time taken to load last tile was 78ms

    •there is no need to call the setVisible function after adding the tilelayer to the map. This will just trigger another re-render of the map canvas.
    -- Took out setVisible to true after creating tile layer

    •try using the experimental branch to see if it is better. The team has been adding a number of performance enhancements to the experimental branch recently.
    --<script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?callback=GetMap&branch=experimental' async></script>

    To load three layers, still it is taking 25 seconds.



    Sunday, March 5, 2017 9:49 PM
  • Odd, I have seen other load 16 tile layers without any issue. Try to moving the zindex. ZIndixes work a lot differently in v8. I believe a value of 100 would render the tiles below the base map tiles. Will do some experiments at work tomorrow to see if I can reproduce issue.

    [Blog] [twitter] [LinkedIn]

    Monday, March 6, 2017 3:01 AM
  • Are you having some 404? 

    I had some similar issues with IE11 in win7 (In windows 10 with ie11 or Edge it worked) and with chrome and firefox would work perfectly. IE11 with bing maps v7 also worked. Only windows 7 with IE11 and Bing maps v8 this issues showed up. But the sympthoms are similar so it might help

    My solution was to return a blank tile everytime a 404 happened(server side)

    redirect to my thread and lets hope it helps

    https://social.msdn.microsoft.com/Forums/en-US/c0e8e097-7992-4184-ae4b-7c6d8d85067c/internet-explorer-11-4-tile-layers-not-rendering-properly?forum=bingmaps#9bd0a1d5-321d-48fa-89ae-7514b4a83c1b


    Monday, March 6, 2017 10:44 AM
  • Thank you JMRMourao and Ricky_Brundritt.

    1) Updated zIndex on TileLayers to more than 100.
    2) Serving a blank tile everytime a 404 happened.

    We have total seven layers to show at a time.
    Up to 5 layers showing up quick (< 1 sec) in IE 11. 

    From 6th layer on wards it is slowing down. 

    5 layers on - taking < 1 sec., 6th layer on - taking 16 seconds, 7th layer on - taking 20 sec.

    When all seven layers on, last few tiles are taking 374 ms time to load. (This info is from Network tab in IE 11) 
    BTW, there are no 404 tiles as we are serving blank tile.

    I did not find any parameters that makes tiles load fast from v8 api. Am I missing any? 

    Sunday, March 12, 2017 8:01 PM
  • You just highlighted the issue. The last few tiles are taking 374 ms to load. This is independent of Bing Maps and is due to one of two reasons:

    • Your tile service is slowing down or slow.
    • With all the tiles your app is loading the number of HTTP requests is high and as such the browser is limiting the number of concurrent tiles being downloaded. If you look closer at the tile request time in the Network tab you likely will find that most of that time is spent waiting for the browser. This is a browser limitation that has existed for ages. If you have a webpages with 100's of files you will run into the same issue.

    [Blog] [twitter] [LinkedIn]

    Wednesday, March 15, 2017 3:45 PM