none
Bing maps tilelayer bounds? RRS feed

  • Question

  • Hi,

    I have a specific set of tiles for part of the UK which I'd like to overlay on Bing Maps.

    However, the  javascript maps API v7 doesn't allow you to set bounds for tilelayers, which means if you do implement it using standard API functionality, every map location and zoom level requests your tiles whether they exist or not, which seems very inefficient.

    Does anyone know if this is likely to be added to the API soon, or if there is a workaround?

    This functionality was in API v6.3

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

     

    Thanks,

    Gavin

     

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

Answers

  • As you know, the Bing Maps AJAX V7 is designed in order to let the possibility to implement your own code or extend/modify the existing one.

    What you can do in order to avoid requesting lots of non-existing tiles, is to implement your own tile layer bounds and override the internal methods use in the TileLayer class and add your own logic around the tile bounds.

     

    On other solution would be to use Alastair technique explained here: http://alastaira.wordpress.com/2011/04/01/displaying-open-street-map-and-esri-tiles-on-bing-maps-ajax-v7/

    So to be simple, here would be a simple approach that might help you:

    <!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>
      <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() {
          // Create a basic map
          var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
           { credentials: "YOURBINGMAPSKEYHERE",
             center: new Microsoft.Maps.Location(56, 2),
             zoom: 5,
             // Don't load the Bing base map tiles
             mapTypeId: Microsoft.Maps.MapTypeId.mercator
           });
    
          // Create the tile source
          var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: getTilePath });
    
          // Construct the layer using the tile source
          var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: 1 });
    
          // Push the tile layer to the map
          map.entities.push(tilelayer);
        }
    
        function getTilePath(tile) {
          var tileUrl = "http://yoursite.com/tiles/blank.png";
    
          if (tile.levelOfDetail > 10)
            if ((tile.x < 120) && (tile.x > 125))
              tileUrl = "http://tile.openstreetmap.org/" + tile.levelOfDetail + "/" + tile.x + "/" + tile.y + ".png";
    
          return tileUrl;
        }
    </script>
    </head>
    <body onload="GetMap();">
      <div id='mapDiv' style="position: relative; width: 640px; height: 480px;">
      </div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Tuesday, May 17, 2011 3:43 PM
    Moderator

All replies

  • As you know, the Bing Maps AJAX V7 is designed in order to let the possibility to implement your own code or extend/modify the existing one.

    What you can do in order to avoid requesting lots of non-existing tiles, is to implement your own tile layer bounds and override the internal methods use in the TileLayer class and add your own logic around the tile bounds.

     

    On other solution would be to use Alastair technique explained here: http://alastaira.wordpress.com/2011/04/01/displaying-open-street-map-and-esri-tiles-on-bing-maps-ajax-v7/

    So to be simple, here would be a simple approach that might help you:

    <!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>
      <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() {
          // Create a basic map
          var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
           { credentials: "YOURBINGMAPSKEYHERE",
             center: new Microsoft.Maps.Location(56, 2),
             zoom: 5,
             // Don't load the Bing base map tiles
             mapTypeId: Microsoft.Maps.MapTypeId.mercator
           });
    
          // Create the tile source
          var tileSource = new Microsoft.Maps.TileSource({ uriConstructor: getTilePath });
    
          // Construct the layer using the tile source
          var tilelayer = new Microsoft.Maps.TileLayer({ mercator: tileSource, opacity: 1 });
    
          // Push the tile layer to the map
          map.entities.push(tilelayer);
        }
    
        function getTilePath(tile) {
          var tileUrl = "http://yoursite.com/tiles/blank.png";
    
          if (tile.levelOfDetail > 10)
            if ((tile.x < 120) && (tile.x > 125))
              tileUrl = "http://tile.openstreetmap.org/" + tile.levelOfDetail + "/" + tile.x + "/" + tile.y + ".png";
    
          return tileUrl;
        }
    </script>
    </head>
    <body onload="GetMap();">
      <div id='mapDiv' style="position: relative; width: 640px; height: 480px;">
      </div>
    </body>
    </html>
    
    


    MVP - Bing Maps - My blog (FR): http://blogs.developpeur.org/nicoboo/ Twitter: http://twitter.com/nicolasboonaert/
    Tuesday, May 17, 2011 3:43 PM
    Moderator
  • Hi,

    Much appreciated! I'll give it a whirl.

    Tuesday, May 31, 2011 11:02 AM