Drawing Grid Lines in Bing Maps

One request I see on the Bing Maps forums from time to time is how to draw grid lines on the map. I had looked into this in the past but found some weird issues with the lines disappearing and slow performance. There are a couple of ways to get around these issues. The one method that is often recommended is to create a tile layer out of the data. This approach gets rid of the performance issue but does add a bit of extra work. It also means either storing a lot of tiles or creating a web service to generate the tiles on the fly. Another approach is to draw these lines directly on the map. If you take this approach you will likely find that with the wrap around effect in Bing Maps your lines will disappear at certain zoom levels. So the question is, how do we prevent this from happening. Simple, break the lines up into smaller segments so that only parts of the line that aren’t in view will wrap around to the other side of the map. What we can do is break the line up in four along the longitude coordinates.

Now we could generate all these coordinates and store them in a JavaScript file but that’s just going to mean more data for the user to download. We can write a simple method that will generate these lines for us which will be significantly smaller to download by the user.

<!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">
         var map;         

         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("myMap"),
            {
                credentials:"YOUR_BING_MAPS_KEY"
            });         

            GenerateGridLines();
         }

         function GenerateGridLines(){
            var line;

            //Draw vertical grid lines (Longitudes)
            for(var x = -180; x < 180; x++)
            {
                line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(-85, x), new Microsoft.Maps.Location(85, x)]);
                map.entities.push(line);
            }

            //Draw horizontal grid lines (Latitudes)
            //The wrap around effect in Bing Maps causes shapes that wide to sometimes loop around out of view. 
            //To prevent this we can break the lines into 4 segments. so that these grid lines aways stay in view
            for(var y = -85; y <= 85; y++)
            {
                line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(y, -180),new Microsoft.Maps.Location(y, -90)]);
                map.entities.push(line);

                line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(y, -90),new Microsoft.Maps.Location(y, 0)]);
                map.entities.push(line);

                line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(y, 0),new Microsoft.Maps.Location(y, 90)]);
                map.entities.push(line);

                line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(y, 90),new Microsoft.Maps.Location(y, 180)]);
                map.entities.push(line);
            }
         }
      </script>
   </head>
   <body onload="GetMap();">
    <div id='myMap' style="position:relative;width:600px;height:400px;"></div>
   </body>
</html>

If you run the code you will end up with a map like this.
image

About these ads

4 thoughts on “Drawing Grid Lines in Bing Maps

    • You can do something like change this line:
      line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(-85, x), new Microsoft.Maps.Location(85, x)]);

      to this:

      line = new Microsoft.Maps.Polyline([new Microsoft.Maps.Location(-85, x), new Microsoft.Maps.Location(85, x + 30)]);

  1. Thanks Richard,
    After asking this question I found the solution in your “http://rbrundritt.wordpress.com/2008/10/14/calculate-destination-coordinate/”
    and
    “http://rbrundritt.wordpress.com/2008/10/14/calculating-bearing/”
    blog entries. My task was to draw a line representing a building and create a grid based on that line…
    My Best wishes.

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