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:
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