Creating a Custom Bing Maps Scale Bar (A.K.A. “Yes, but how many Space Needles is that?”)

Earlier in the year, during the Microsoft MVP summit, myself and a group of fellow delegates spent a very enjoyable Sunday afternoon sightseeing around Seattle (although February in Seattle was a bit cold for Soul Solutions’ John O’Brien, who is used to the slightly more clement weather down under!)

Whilst ascending the glass elevator during the guided tour of the Seattle Space Needle, the tour guide took pride in pointing out various objects that could be seen in the distance, and comparing their relative size in terms of “space needles”.

This then became a bit of a running joke for the duration of the summit. The Boeing factory was big, but how big was it in space needles? Likewise, the Safeco field, home of the Seattle Mariners. Bigger or smaller than a space needle?

Fortunately, you need wonder no more. The following simple (and slightly silly) code listing demonstrates how you can add your own custom scale bar to Bing Maps AJAX v7. It makes use of the getMetersPerPixel() method of the Map class to obtain the resolution in metres/pixel at the centre of the current map view. If you also know the length (or height, in this case) or any arbitrary object, you can then use this information to create your own units of map measurement.

<!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">
  <style type="text/css">
    #SpaceNeedleScaleBar
    {
      white-space: nowrap;
      color: #FFFFFF;
      font-size: 80%;
      position: absolute;
      z-index: 1;
      width: 100px;
      right: 167px;
      bottom: 30px;
      height: 34px;
    }
    #SpaceNeedleScaleBarbg
    {
      position: absolute;
      top: 1px;
      right: 0;
    }
    #SpaceNeedleScaleBarfg
    {
      position: absolute;
      top: 0;
      right: 1px;
      color: #000000;
    }
    #SpaceNeedleimg
    {
      position: absolute;
      width: 80px;
      bottom: 0;
      right: 3px;
    }
  </style>
  <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&amp;mkt=en-gb"></script>
  <script type="text/javascript">
    var map = null;
    function GetMap() {
      // Create a basic map
      map = new Microsoft.Maps.Map(
         document.getElementById("mapDiv"),
         { credentials: "INSERTYOURBINGMAPSKEY",
           center: new Microsoft.Maps.Location(54, -3),
           zoom: 5
         });

      // Update the scale bar every time the map view changes
      Microsoft.Maps.Events.addHandler(map, 'viewchangeend', updateScaleBar);
    }

    function updateScaleBar() {
      var spaceNeedleHeight = 184; // Actual height of space needle (metres)
      var spaceNeedleImage = 60; // Size of space needle image (pixels)
      var mapResolution = map.getMetersPerPixel(); // Resolution at centre of map (metres/pixel)

      // Calculate how many space needles will fit into the length of the image at this zoom level 
      var howmanyspaceneedles = (mapResolution / spaceNeedleHeight * spaceNeedleImage).toFixed(2) + ' space needles';

      // Update the display
      document.getElementById('SpaceNeedleScaleBarbg').childNodes[0].nodeValue = howmanyspaceneedles;
      document.getElementById('SpaceNeedleScaleBarfg').childNodes[0].nodeValue = howmanyspaceneedles;
    }
  </script>

</head>
<body onload="GetMap();">
  <div id='mapDiv' style="position: relative; width: 480px; height: 640px;">
    <div id="SpaceNeedleScaleBar">
      <div id="SpaceNeedleScaleBarbg">space needles</div>
      <div id="SpaceNeedleScaleBarfg">space needles</div>
      <div id="SpaceNeedleimg"><img alt="Seattle Space Needle" src="spaceneedle.png" /></div>
    </div>
  </div>
</body>
</html>

The result, showing the new “space needles” scale alongside the more traditional imperial and metric units at the bottom of the map, looks like that below. Or you can try out an example here.

image

This entry was posted in Bing Maps, Spatial and tagged . Bookmark the permalink.

One Response to Creating a Custom Bing Maps Scale Bar (A.K.A. “Yes, but how many Space Needles is that?”)

  1. Pedro Sousa says:

    Lol, nice one🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s