none
TileLayer Displaying Out of Order RRS feed

  • Question

  • I have a simple map application that is displaying two tile layers from a small server application I have written. The two layers are LiDAR derived terrain and surface models (DTM and DSM) with the intention of letting the user toggle between the layers or display the two + some other layers later. 

    When I add both these to the map the map isn't respecting the zIndex I am passing to it and is rendering tiles on top of each other from different layers, sometimes even the base map tiles on top.

    I have condensed this to the example shown below, and the code I am using is very simple and listed as well. Browser is Chrome, and I have tried all the 3 branches.

    <!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?branch=experimental'></script>
        <script>
            var map = null;
    
            function LoadMap() {
                map = new Microsoft.Maps.Map(document.getElementById('mapTarget'), {
                    credentials: '*',
                    enableClickableLogo: false,
                    enableInertia: false
                });
    
                AddMapLayer("http://127.0.0.1:14401/Layers/FCB120CB", 10000);
                AddMapLayer("http://127.0.0.1:14401/Layers/7DBB3B9F", 9999);
            }
    
            function AddMapLayer(directory, zIndex) {
                var tileSource = new Microsoft.Maps.TileSource({
                    uriConstructor: directory + "/{quadkey}.png",
                    minZoom: 1,
                    maxZoom: 21
                });
    
                var tileLayer = new Microsoft.Maps.TileLayer({
                    mercator: tileSource,
                    opacity: 1,
                    zIndex: zIndex,
                    downloadTimeOut: 5000000
                });
    
                tileLayer.layerName = name;
    
                map.layers.insert(tileLayer);
            }
        </script>
    </head>
    <body onload="LoadMap();">
        <div id='mapTarget' style=";">
        </div>
    </body>
    </html>


    • Edited by Chris Beale Thursday, September 8, 2016 3:54 PM
    Thursday, September 8, 2016 3:49 PM

Answers

  • Try using zIndex values of 10000 and 10001. Any value below 10000 is not valid for custom tile layers. We are working on putting together some documentation around zIndexing in V8.

    [Blog] [twitter] [LinkedIn]

    Friday, September 9, 2016 12:58 AM
  • Odd, I can't reproduce this. I'm wondering if maybe something is timing out. Looking at your image I assume that "7DBB3B9F" is the layer that is green, yellow and blue, while "FCB120CB" has black details. If this is correct, then I suspect that there is no issue with the ordering of the tile layers, but with some tiles not being loaded/rendered. In the area were we see the aerial imagery neither tile layer appears to have rendered. Where we see just "7DBB3B9F", the "FCB120CB" tile likely didn't render. I'm not too surprised, you are accessing two tile layers from a single domain, the browser will be blocking the tiles like crazy and the time for each tile to load will be longer than normal. In the image you provided, more than 60 tiles are requested from your server. Browsers typically have a limit of 8 parallel requests per domain. So this means that the time it would take for all tiles to load would be about 7.5 times longer than it takes for a single tile to load. If you take a look at the network traffic in the browser (F12 then go to network tab) you will likely see this. It's possible some tile requests may fail, but even if they all are successful, it is likely that the time to load took too long and the map stopped waiting for the tile. By default V8 allows a tile to take up to 10 seconds to download. You can adjust this in the tile layer options: https://msdn.microsoft.com/en-us/library/mt712686.aspx

    [Blog] [twitter] [LinkedIn]

    Friday, September 9, 2016 5:14 PM

All replies

  • Try using zIndex values of 10000 and 10001. Any value below 10000 is not valid for custom tile layers. We are working on putting together some documentation around zIndexing in V8.

    [Blog] [twitter] [LinkedIn]

    Friday, September 9, 2016 12:58 AM
  • I've now tried this with the zIndex set to values above 10000, but I still observe the same behavior. I've tried various values around 10000, 10100, 11000 etc but not experience it working correctly.

    It sort of works for a few zooms, but as soon as I start moving the map a bit more it almost seems as if it degrades within a few zooms/pans. There wouldn't be anything required from a HTTP server issuing the tiles, would there? I am serving them from my own HTTP server on a command line server I've written, but this is the same server I was using with 6.3 (I'm converting an old app).

    Friday, September 9, 2016 2:43 PM
  • Odd, I can't reproduce this. I'm wondering if maybe something is timing out. Looking at your image I assume that "7DBB3B9F" is the layer that is green, yellow and blue, while "FCB120CB" has black details. If this is correct, then I suspect that there is no issue with the ordering of the tile layers, but with some tiles not being loaded/rendered. In the area were we see the aerial imagery neither tile layer appears to have rendered. Where we see just "7DBB3B9F", the "FCB120CB" tile likely didn't render. I'm not too surprised, you are accessing two tile layers from a single domain, the browser will be blocking the tiles like crazy and the time for each tile to load will be longer than normal. In the image you provided, more than 60 tiles are requested from your server. Browsers typically have a limit of 8 parallel requests per domain. So this means that the time it would take for all tiles to load would be about 7.5 times longer than it takes for a single tile to load. If you take a look at the network traffic in the browser (F12 then go to network tab) you will likely see this. It's possible some tile requests may fail, but even if they all are successful, it is likely that the time to load took too long and the map stopped waiting for the tile. By default V8 allows a tile to take up to 10 seconds to download. You can adjust this in the tile layer options: https://msdn.microsoft.com/en-us/library/mt712686.aspx

    [Blog] [twitter] [LinkedIn]

    Friday, September 9, 2016 5:14 PM
  • Thanks for the reply. That is correct about the layers. However, I have confirmed that there are no failures returning the tiles both from my server application logs and by monitoring with Fiddler. I have changed the timeout setting (as per my original code sample, I had it set to 5000 seconds, but I've tried with a more realistic 120 seconds to no avail). Previously in 6.3 I was successfully overlaying 5-10 layers at a time without issue.

    I'll keep digging as I suspect I am missing something straight forward with this.

    Friday, September 9, 2016 6:00 PM
  • I've now had some time to dig through this and see what is happening. 

    All tile requests are being made, and returned by my server. However, looking closer through the traffic with Fiddler and with extra logging in my server, I believe the browser is aborting the connection. Fiddler is allowing it to complete but logs a socket aborted error.

    Average response time is < 5 seconds per tile. Timeout is not an issue. The map is making excessive connections and abandoning them (possibly by the browser itself). Again, in 6.3 I never had this issue, all tile loads were queued and responded to to completion, and as I stated before I often overlay 5-10 layers on the map without issue in 6.3 (in the exact same browser). As this control is reaching end of life I am trying to migrate to 8.0 but this is blocking me.

    I have reproduced the exact issue and shown below with Fiddler side by side to demonstrate that all tiles are returned as requested by the map. For simplicity I have used only one map layer, where this also occurs. It starts to stop returning tiles after about 30 seconds. When I changed the map mode it just stopped totally.

    https://www.youtube.com/watch?v=AiBPMN6QeFQ

    I have also recorded the behavior with my current map in 6.3 to demonstrate this works without issue there. It waits, but all tiles are eventually rendered.

    https://www.youtube.com/watch?v=gmUanB5SXnY

    The 404 errors showing are just it returning tiles where the data does not overlap.

    Tuesday, September 13, 2016 11:25 AM
  • I'm not able to reproduce this, but will have the team look into this. 

    [Blog] [twitter] [LinkedIn]

    Tuesday, September 13, 2016 5:21 PM
  • I have managed to track this down.

    The issue appears to be with tiles originating from another domain, or at least different port. I was serving the map.htm from port 14401, and the tiles from port 14402. As soon as I start serving my tiles from 14401 it displays perfectly.

    I proved this simply by churning a set of tiles, dumping them to an Amazon S3 bucket and testing with a simple map.htm as per my original post, both hosted on the bucket and on my local server. It worked fine from the bucket, but when serving the page from my local server targeting the bucket it fails in the way originally described.

    I have made changes to my application to permanently serve the tiles and htm page from the same port. But, this used to work in the legacy 6.3 without issue.

    Monday, October 3, 2016 1:43 PM