High-PPI maps now available in the Bing Maps Control

Have you ever wondered if it’s possible to get high-PPI (high pixel density) map tiles from the Bing Maps Control? Wonder no more. By simply setting a parameter in your Bing Maps AJAX Control code for your application, users that are on high-PPI or Retina supported devices will automatically get high resolution map tiles. High-PPI maps provide larger map labels and street lucidity, which is especially helpful when viewing maps on mobile devices and tablets that have smaller screens.

Default map tile:                                                  High-PPI map tile:

Default map tile                        High PPI map tile

To enable high-PPI tiles, you need to set the parameter enableHighDpi: true in your Bing Maps AJAX Control code (map constructor). Below is sample code that shows how to set this parameter:

<!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&mkt=en-us"></script>

    <script type="text/javascript">
        function GetMap() {

            var map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),
                         {
                             credentials: "YourBingMapsKey",
                             center: new Microsoft.Maps.Location(37.769831,-122.447004),
                             mapTypeId: Microsoft.Maps.MapTypeId.road,
                             zoom: 12,
                             enableHighDpi: true,
                         });
        }
    </script>
</head>
<body onload="GetMap();">
    <div id='mapDiv' style="position:relative; width:700px; height:700px;"></div>
</body>
</html>

 

When high-PPI map tiles are returned, the map tile URL will include the value dpi=d1&device=mobile (in case you want to confirm high-PPI map tiles are being returned). Also, the device that the AJAX Control is being rendered on must return devicePixelRatio >= 2 in order to get the high-PPI map tiles. If the device does not return devicePixelRatio >= 2 then the default map tiles (not high-PPI tiles) will be returned to the user.

Happy mapping!

– Erik Lindeman, Bing Maps Program Manager