Panning and Zooming with the Bing Map Imagery Web Services

The Bing Maps Imagery service is commonly used for mobile applications. A common issue people have when using the Bing map imagery web services is figure out how to take a map and navigate around it by panning and zooming. Zooming is pretty straight forward as all the user has to do is increase or decrease the zoom level that was used to initially retrieve the map image. Panning on the other hand is much more complicated. Generally when panning you want to move a certain pixel distance from where the user is currently viewing. To calculate the coordinate of a new location knowing our current location, direction (heading) and a distance to travel we can use the method described in this post: http://rbrundritt.spaces.live.com/blog/cns!E7DBA9A4BFD458C5!400.entry 

The distance you will want to pan will depend on the size of your map. Generally you will pick a distance in pixels. To use this pixel distance we will have to convert into a physical distance on the earth. To do this we can calculate the resolution of the ground in pixels for a particular zoom level. To calculate the resolution at a particular zoom level and latitude we can use the following formula.

clip_image002

This formula came from the following article on the Bing Maps tiling system: http://msdn.microsoft.com/en-us/library/bb259689.aspx 

The final piece of information that is needed is the direction (heading). Headings generally are an angle in degrees from 0 to 360 with 0 being North, 90 degrees being East, 180 degrees being south and west being 270 degrees. If you want to pan your map North East you will set your heading to 45 degrees.

I’ve thrown together a simple application that pulls all this together. Complete source code can be found here: http://cid-e7dba9a4bfd458c5.skydrive.live.com/self.aspx/VE%20Sample%20code/BingMapsPanZoom.zip

BingPanZoom

Advertisements

4 thoughts on “Panning and Zooming with the Bing Map Imagery Web Services

  1. Hello Ricky!

    I use Bing Map Silverlight control in my current project with two extra modes – Bird’s eye view and Street side view. But I have a problem – when I have Bird’s eye mode selected and there is some Pushpin on this map – when user rotates map (clicks on “rotate” buttons) Pushpin moves outside the borders of SL control. I know that I should set the altitude of current place and I set it in Pushpin location (I can get altitude from gov.usgs.gisdata web-service) but I can’t figure out how to force Pushpin to stay at same location when user rotates the map. Do you know how to solve this issue – may be I can somehow use information from current post?

    Thanks in advance!

    • I have done similar things to try and get the pushpin to appear in the right location. In the end it always tended to be off by up to 100m so I never posted the code. I believe MSFT is aware of this issue and it doesn’t occur in the v7 AJAX control. Hopefully this will be fixed in the next version of the Silverlight control.

  2. The link to the example code seems to be broken. Is the souce code for your example application still available?

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