locked
Unable to load multiple tile layers from different sources.

    Question

  • I have some code that loads tiles from several different tile sources (9 in my example). Unfortunately mobile browsers (droid, iphone) and FF4 do not render the page correctly.  Not all of my tile directories are utilized, and in the FF4 example, even the bing basemap doesnt finish loading. IE seems to load this scenario fine.

    I have constructed a working example here: http://99.27.99.144:86/v7TileLayers.html

    and below is the code from the above example.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
     <title></title>
     <script charset="UTF-8" type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
     <script type="text/javascript">
       var map = null;
     </script>
    </head>
    <body onload="GetMap();">
     <div id="MapTest" style="position:absolute; top:0px; left:0px; width:100%; height:100%;"></div>
     
     <script type="text/javascript">
       function GetMap() 
       {
         map = new Microsoft.Maps.Map(document.getElementById("MapTest"),
         {
           credentials: 'Bing Map Key',
           center: new Microsoft.Maps.Location(39, -73),
           mapTypeId: Microsoft.Maps.MapTypeId.aerial,
           zoom: 7,
           showDashboard: true,
           showScalebar: false,
           showMapTypeSelector: false,
           useInertia: false
         });
    
         for (i = 0; i < 9; i++) 
         {
           var tileLocation = "";
           tileLocation = "http://99.27.99.144:86/" + i + "/{quadkey}.png";
           var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: tileLocation });
           // Construct the layer using the tile source
           var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: 1.0, visible: true, zIndex: 20 });
           // Push the tile layer to the map
           map.entities.push(tilelayer);
         }
       }
     </script> 
    </body>
    </html>
    
    Friday, May 13, 2011 9:22 PM

Answers

  • @lan-lord: Pls check the fiddler traffic with your example. Network is choked due to number of tilelayer requests, most of them are returning 404. Try to reduce the number of tilelayers, 10 would definately affect perf & cease the network. The base tile are also not rendered because of network requests. Try reducing tilelayer to 1 or 2.  


    HemantGoyal
    Saturday, May 14, 2011 6:19 PM
  • What about if you created an event handler that added your tile layers one at a time, by only added each subsequent tile layer after the tiledownloadcomplete event had fired from the previous layer?
    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Sunday, May 15, 2011 5:03 PM
    Moderator

All replies