none
Internet explorer 11 4 Tile Layers not rendering properly RRS feed

  • Question

  • Ok this issue will be more complicated to explain.

    I am using Interent Explorer 11.0.9600(fully updated as i can).

    I am loading 4 tileLayers which the uriConstructor is a call back function which executes quite fast and gives the output files instantly. But in IE some layers are loaded and placed on the map, IE seems to have no activity (cpu at 0%) after like 5 seconds and some tiles not still visible, IE makes some more requests(all of them are sucessucfully completed within <30ms still IE takes maybe more 10 seconds(or more) to make the actual request and render the images and so on, taking maybe 25 seconds total to ask and render all the tiles. 

    (i already used with timeout, without timeout, a huge timeout and the beaviour maintains. The issue is that even tho the responses are fast the requests are not being made in a row 

    In firefox and chrome the same code works quite well. And the main issue is that the solution needs to work with Internet explorer 11


    Friday, November 11, 2016 1:21 PM

Answers

  • No i am using a 1080p screen. This behaviour is happening on IE 11 (win7) and doesn't happen (at least noticeable) in other browsers. In Win10 (with IE11 or EDGE) this behaviour doesn't seem to occur.

    After some more extensive search we notice a pattern in this issue, Windows 7 with IE11 and bing maps V8 (i said in an answer i tried the same code just adapting with V7 and it doesn't show the same pattern using the same tile configuration.)

    This behaviour seems to occur in bigger extent when there are  more 404 requests. It is slightly random but occurring with a high incidence, rendering around 13-17 tiles (in our project solution with <5ms responses we render less) and stopping request for some seconds (no processing occurs).

    We are using a workaround for now by returning a transparent tile instead of a 404 message. After applying this, the tile rendering and requests run very fast without delays.

    Also i altered the example sent before to be more noticable in that enviroment (grey tile requests will fail every other request - see code below). It should be noticeable on the last part of the rendering. If you increase the errors response, the performance should degrade.

    <!DOCTYPE html>
    <html>
        <head>
            <title>tileLayerPublicXYZoomHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
    			var map;
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key',
                        center: new Microsoft.Maps.Location(40.750220, -99.476964),
                        zoom: 4
                    });
    				
    				/////////////////////////////////////////////
                    var weatherTileSource3 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl3
                    });
    				
    				
    				var error = true;
    				function getUrl3(tile){
    						return "https://c.tile.openstreetmap.org/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer3 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource3
                    });
                    map.layers.insert(weatherTileLayer3);
    				///////////////////////////////////////////////////
    				var weatherTileSource2 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl2
                    });				
    				function getUrl2(tile){
    					return "http://tile.waymarkedtrails.org/cycling/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer2 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource2
                    });
                    map.layers.insert(weatherTileLayer2);
    				
    				/////////////////////////////////////////////
                    var weatherTileSource4 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl4
                    });
    				
    				function getUrl4(tile){
    					//HERE ERROR FORCED
    					if (error) {
    						error = false;
    						return "https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/a" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    					} else
    					{
    						error = true;
    						return "https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    					}
    				}
                    var weatherTileLayer4 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource4,
    					opacity: 0.5
                    });
                    map.layers.insert(weatherTileLayer4);
    				
                    /////////////////////////////////////////////
                    var weatherTileSource1 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl1
                    });
    				
    				function getUrl1(tile){
    					return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer1 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource1
                    });
                    map.layers.insert(weatherTileLayer1);
                }
            </script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
        </body>
    </html>

    Best regards

    João Mourão

    • Marked as answer by JMRMourao Friday, March 3, 2017 10:41 AM
    Monday, November 14, 2016 5:04 PM

All replies

  • Ok i tried the exact same code with Bing maps v7 SDK and the same issue doesnt happen
    Friday, November 11, 2016 2:35 PM
  • ok another update i made a code example and you can see the reported behaviour. I forced one of the layers to give 404(in our case we have some tiles are not generated so we receive 404 in some tile coordinates on different layers. //HERE ERROR FORCED is where i force a tile to be 404

    <!DOCTYPE html>
    <html>
        <head>
            <title>tileLayerPublicXYZoomHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
    			var map;
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key',
                        center: new Microsoft.Maps.Location(40.750220, -99.476964),
                        zoom: 4
                    });
    				
    				/////////////////////////////////////////////
                    var weatherTileSource3 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl3
                    });
    				
    				function getUrl3(tile){
    					return "https://c.tile.openstreetmap.org/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer3 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource3
                    });
                    map.layers.insert(weatherTileLayer3);
    				///////////////////////////////////////////////////
    				var weatherTileSource2 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl2
                    });
    				//HERE ERROR FORCED
    				function getUrl2(tile){
    					return "http://tile.waymarkedtrails.org/cycling/111" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer2 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource2
                    });
                    map.layers.insert(weatherTileLayer2);
    				
    				/////////////////////////////////////////////
                    var weatherTileSource4 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl4
                    });
    				
    				function getUrl4(tile){
    					return "https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer4 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource4,
    					opacity: 0.5
                    });
                    map.layers.insert(weatherTileLayer4);
    				
                    /////////////////////////////////////////////
                    var weatherTileSource1 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl1
                    });
    				
    				function getUrl1(tile){
    					return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer1 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource1
                    });
                    map.layers.insert(weatherTileLayer1);
                }
            </script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
        </body>
    </html>

    Friday, November 11, 2016 5:30 PM
  • I tried your code in IE11 and it works great. I see all the tiles load, with the exception of those that 404.

    Also, Bing Maps supports x/y/zoom tile layers, no need to use callback functions. You simply need to add a placeholder in the URLs for these values. Here is a list of the values that can be in a tile URL: https://msdn.microsoft.com/en-us/library/mt712690.aspx


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Friday, November 11, 2016 6:03 PM
    • Unproposed as answer by JMRMourao Tuesday, November 15, 2016 10:02 AM
    Friday, November 11, 2016 6:03 PM
  • well i tried now and it still behaves like i reported, mainly in zoom 7-12 is when you can see it better. The layers after some 404 they start not rendering so fast, they stop and if you wait around 8 seconds they make more requests. But they simply stop. 

    I know bing supports but i am trying to replicate my issue, but for confidentiality reasons i cannot show it, but its just there to simulate my case.

    Friday, November 11, 2016 9:41 PM
  • Are you using a 4K screen by chance? The sample you provided is using the full screen. I suspect the issue is simple the sheer volume of tile requests required in your app. Assuming you are using a 4K screen a single tile layer would need 144 tiles to file the screen. In the sample you provided there are 4 tiles layers, plus the base tile layer and the vector label layer. This would mean that each time the map moves and has to load the full map there are 864 HTTP requests being made.

    Now if we were to assume that your browser lets you make 16 parallel HTTP requests and it only takes 250ms on average for each tile to load. The loading time alone would be 13.5 seconds. When an error occurs when loading a tile it can sometimes take longer than 250ms for the server to respond. Then you need to account for all the time it takes to render the tiles on the canvas.

    Even if you weren't using a 4K screen, there likely would still be 240 tile requests to fill the map (what I'm seeing on my monitor/network traffic).

    If your final application won't use a full screen map, try setting the dimensions of the map div. A smaller map would make a big difference. Another small optimization is to put the map into lite mode by setting the map option, liteMode, to false. This will disable the vector labels and add the labels directly to the base map tiles. This would be one less layer of data to be loaded.

    Loading a lot of tile layers will be slow. What many professional GIS applications do is they create a web service which merges the tiles together sever side, this way there is only one tile layer being loaded into the browser. This would require a lot more development but would be the best solution.


    [Blog] [twitter] [LinkedIn]

    • Proposed as answer by Ricky_Brundritt Saturday, November 12, 2016 1:19 AM
    • Unproposed as answer by JMRMourao Tuesday, November 15, 2016 10:02 AM
    Saturday, November 12, 2016 1:19 AM
  • No i am using a 1080p screen. This behaviour is happening on IE 11 (win7) and doesn't happen (at least noticeable) in other browsers. In Win10 (with IE11 or EDGE) this behaviour doesn't seem to occur.

    After some more extensive search we notice a pattern in this issue, Windows 7 with IE11 and bing maps V8 (i said in an answer i tried the same code just adapting with V7 and it doesn't show the same pattern using the same tile configuration.)

    This behaviour seems to occur in bigger extent when there are  more 404 requests. It is slightly random but occurring with a high incidence, rendering around 13-17 tiles (in our project solution with <5ms responses we render less) and stopping request for some seconds (no processing occurs).

    We are using a workaround for now by returning a transparent tile instead of a 404 message. After applying this, the tile rendering and requests run very fast without delays.

    Also i altered the example sent before to be more noticable in that enviroment (grey tile requests will fail every other request - see code below). It should be noticeable on the last part of the rendering. If you increase the errors response, the performance should degrade.

    <!DOCTYPE html>
    <html>
        <head>
            <title>tileLayerPublicXYZoomHTML</title>
            <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
        </head>
        <body>
            <div id='printoutPanel'></div>
            
            <div id='myMap' style='width: 100vw; height: 100vh;'></div>
            <script type='text/javascript'>
    			var map;
                function loadMapScenario() {
                    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
                        credentials: 'Your Bing Maps Key',
                        center: new Microsoft.Maps.Location(40.750220, -99.476964),
                        zoom: 4
                    });
    				
    				/////////////////////////////////////////////
                    var weatherTileSource3 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl3
                    });
    				
    				
    				var error = true;
    				function getUrl3(tile){
    						return "https://c.tile.openstreetmap.org/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer3 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource3
                    });
                    map.layers.insert(weatherTileLayer3);
    				///////////////////////////////////////////////////
    				var weatherTileSource2 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl2
                    });				
    				function getUrl2(tile){
    					return "http://tile.waymarkedtrails.org/cycling/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer2 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource2
                    });
                    map.layers.insert(weatherTileLayer2);
    				
    				/////////////////////////////////////////////
                    var weatherTileSource4 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl4
                    });
    				
    				function getUrl4(tile){
    					//HERE ERROR FORCED
    					if (error) {
    						error = false;
    						return "https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/a" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    					} else
    					{
    						error = true;
    						return "https://cartodb-basemaps-a.global.ssl.fastly.net/dark_all/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    					}
    				}
                    var weatherTileLayer4 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource4,
    					opacity: 0.5
                    });
                    map.layers.insert(weatherTileLayer4);
    				
                    /////////////////////////////////////////////
                    var weatherTileSource1 = new Microsoft.Maps.TileSource({
                        uriConstructor: getUrl1
                    });
    				
    				function getUrl1(tile){
    					return "http://mesonet.agron.iastate.edu/cache/tile.py/1.0.0/nexrad-n0q-900913/" + tile.zoom + "/" + tile.x +"/" + tile.y + ".png";
    				}
                    var weatherTileLayer1 = new Microsoft.Maps.TileLayer({
                        mercator: weatherTileSource1
                    });
                    map.layers.insert(weatherTileLayer1);
                }
            </script>
            <script type='text/javascript' src='http://www.bing.com/api/maps/mapcontrol?branch=release&callback=loadMapScenario' async defer></script>
        </body>
    </html>

    Best regards

    João Mourão

    • Marked as answer by JMRMourao Friday, March 3, 2017 10:41 AM
    Monday, November 14, 2016 5:04 PM