none
How to display a TileLayer in Birdseye mode (AJAX v7.0)? RRS feed

  • Question

  •  

    The documentation of the TileLayer class supports returning the TileSource for the different projections (mercator, enhancedBirdseyeNorthUp, enhancedBirdseyeSouthUp, enhancedBirdseyeEastUp, enhancedBirdseyeWestUp) whereas the TileLayerOptions class support setting the source only for the mercator projection.

    So the question is, how to set the tile source for non mercator projections? 

    http://msdn.microsoft.com/en-us/library/gg427598.aspx

    Thanks

     


    • Moved by Ricky_Brundritt Friday, March 9, 2012 5:29 PM (From:Bing Maps: Map Control and Web services Development)
    Monday, May 9, 2011 5:07 PM

Answers

  • You should be aware that there's a difference between enhanced birdseye mode (i.e. the new aerial) and birdseye mode. You can't add a tilelayer to birdseye mode, as far as I'm aware, and it would be very difficult to make any custom layers line up correctly with the oblique-shot base imagery.

    You can, however, add a tilelayer to enhanced birdseye mode by supplying the relevant projection string as shown below - the MSDN documentation only mentions the mercator projection, but you can pass the other projection strings to the TileLayer constructor too. I've only supplied East and North orientation tiles - I think you can probably guess where I'm going with the tiles for the other directions ;)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
       <script type="text/javascript">
         function GetMap()
         {
          // Initialize the map
          var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
          { credentials: "YOUR BING MAPS KEY",
           center: new Microsoft.Maps.Location(52.6, 1.3),
           zoom: 16,
           mapTypeId: Microsoft.Maps.MapTypeId.birdseye
          }); 
    
          // Create the "North" tile layer source
          var NtileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://www.beginningspatial.com/files/msdn/e853a869-3758-4cf7-85e2-fa6ecb4d039f_northtile.png' });
          var Ntilelayer = new Microsoft.Maps.TileLayer({ enhancedBirdseyeNorthUp: NtileSource, opacity: 0.3 });
          map.entities.push(Ntilelayer);
    
          // Create the "East" tile layer source
          var EtileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://www.beginningspatial.com/files/msdn/e853a869-3758-4cf7-85e2-fa6ecb4d039f_easttile.png' });
          var Etilelayer = new Microsoft.Maps.TileLayer({ enhancedBirdseyeEastUp: EtileSource, opacity: 0.3 });
          map.entities.push(Etilelayer);  
          
         }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='mapDiv' style="position:relative; width:640px; height:480px;"></div>
      </body>
    </html>
    
    


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Tuesday, May 10, 2011 10:14 AM
    Moderator

All replies

  • You should be aware that there's a difference between enhanced birdseye mode (i.e. the new aerial) and birdseye mode. You can't add a tilelayer to birdseye mode, as far as I'm aware, and it would be very difficult to make any custom layers line up correctly with the oblique-shot base imagery.

    You can, however, add a tilelayer to enhanced birdseye mode by supplying the relevant projection string as shown below - the MSDN documentation only mentions the mercator projection, but you can pass the other projection strings to the TileLayer constructor too. I've only supplied East and North orientation tiles - I think you can probably guess where I'm going with the tiles for the other directions ;)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
      <head>
       <title></title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
       <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
       <script type="text/javascript">
         function GetMap()
         {
          // Initialize the map
          var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
          { credentials: "YOUR BING MAPS KEY",
           center: new Microsoft.Maps.Location(52.6, 1.3),
           zoom: 16,
           mapTypeId: Microsoft.Maps.MapTypeId.birdseye
          }); 
    
          // Create the "North" tile layer source
          var NtileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://www.beginningspatial.com/files/msdn/e853a869-3758-4cf7-85e2-fa6ecb4d039f_northtile.png' });
          var Ntilelayer = new Microsoft.Maps.TileLayer({ enhancedBirdseyeNorthUp: NtileSource, opacity: 0.3 });
          map.entities.push(Ntilelayer);
    
          // Create the "East" tile layer source
          var EtileSource = new Microsoft.Maps.TileSource({ uriConstructor: 'http://www.beginningspatial.com/files/msdn/e853a869-3758-4cf7-85e2-fa6ecb4d039f_easttile.png' });
          var Etilelayer = new Microsoft.Maps.TileLayer({ enhancedBirdseyeEastUp: EtileSource, opacity: 0.3 });
          map.entities.push(Etilelayer);  
          
         }
       </script>
      </head>
      <body onload="GetMap();">
       <div id='mapDiv' style="position:relative; width:640px; height:480px;"></div>
      </body>
    </html>
    
    


    twitter: @alastaira blog: http://alastaira.wordpress.com/
    Tuesday, May 10, 2011 10:14 AM
    Moderator
  • Thank you for taking the time to test this and for sharing the code snippet.

    I think what's missing here is the documentation of the different map modes (namely Birdseye and enhanced Birdseye); without that it would very difficult to make custom layers line up properly. What we learned also and after looking more into this issue is that the map control queries 2 additional REST web services (elevation and imagery) besides the Tiles web service in order to manage the Birdseye tiles properly. Understanding these web services responses is key for understanding the current "map context" and preparing the custom tiles accordingly.

    The elevation and imagery web services are documented at http://msdn.microsoft.com/en-us/library/ff701716.aspx

    It's unfortunate that all this is no official support/sample code for doing this and that the 3D map control is no longer a choice. We service many customers in the public sector where displaying facility data (i.e.: water mains, fire, hydrants, etc..) at detailed zoom level (i.e.: the Birdseye mode) is very valuable and badly needed.

     

     



    Tuesday, May 10, 2011 10:10 PM