Forever Learning

Feed Rss

Google Maps Radius to Zoom

12.17.2011, Tech, by .

So I couldn’t find anything good online for converting a google maps search radius to a zoom level.  Google’s docs said that their zoom levels followed a geometric series (not in so many words) so I jumped in the way-back machine, dusted off the old math degree, and performed the simple high-school level algebra/trig needed to calculate this.

Step 1: Figure out miles to pixels.

So no you can’t really calculate the scale of a google map on your monitor because that depends on your resolution, but you can calculate the distance between 2 pixels a certain number of pixels apart in the grid.  So I went on over to http://gmap-pedometer.com/ and did a rough calculation of pixels to miles at zoom level 14 because 14 just seems about right for figuring out a mile radius on my screen.  Conveniently enough for me, since the map I’m working on is 500px wide, 500px at zoom 14 is about 2.3 miles across.  This means that if I want to show a 1 mile search radius on a 500X500 map I simply need to set it to zoom level 14 and it will show just slightly more than the 1 mile.

Step 2: The series

So zoom level 14 is a 1 mile radius search, that’s nice, what about 15, 16, 13, 12, …  Well from the google documentation we know we have a geometric series:

Maps on Google Maps have an integer “zoom level” which defines the resolution of the current view. Zoom levels between 0 (the lowest zoom level, in which the entire world can be seen on one map) to 21+ (down to individual buildings) are possible within the default roadmap maps view.

Google Maps sets zoom level 0 to encompass the entire earth. Each succeeding zoom level doubles the precision in both horizontal and vertical dimensions. More information on how this is done is available in the Google Maps API documentation.

What does that mean?  Zoom 0 shows approximately 25000 miles across what looks like 1000 pixels on my laptop’s screen. If I go to zoom 1 then that same screen area shows 1/4 as much of the globe, 1/2 the width and 1/2 the height.  In terms of search radius, we’ve cut the search radius in half because we could search x miles in any direction and now 1 level closer we can only show x/2 miles (on a square screen map region obviously).  So what does this series look like in the more practical zoom levels?

16 = 1/4 mile, 15 = 1/2 mile, 14 = 1 mile, 13 = 2 miles, 12 = 4 miles, 11 = 8 miles, …

Not convinced?  Go on over to the aforementioned site and test it out.  500px on my screen at zoom 16 gave diameters of  .577 miles, zoom 15 gives 1.15 miles, and zoom 13 gives 4.4 miles.  Seems pretty consistent.

Step 3: The Function (show your work)

//15 = 1/2, 14 = 1, 13 = 2, 12 = 4, 11 = 8, 10 = 16
//-1 = 1/2, 0 = 1, 1 = 2, 2 = 4, 3 = 8, 4 = 16
//2^(14-zoom) = radius
//ln(x^y) = y*ln(x)
//ln(2^(14-zoom)) = ln(radius) = (14-zoom) * ln(2)
//ln(radius)/ln(2) -14 = -zoom
//zoom = 14 - ln(radius)/ln(2)
//throw  round on there to make sure we get an integer
//and don't make the g-maps API angry
radiusToZoom: function(radius){
    return Math.round(14-Math.log(radius)/Math.LN2);
}

Step 4: Testing

console.log(this.map.radiusToZoom(.5));
console.log(this.map.radiusToZoom( 1));
console.log(this.map.radiusToZoom( 2));
console.log(this.map.radiusToZoom( 4));
console.log(this.map.radiusToZoom( 8));
console.log(this.map.radiusToZoom(16));
console.log(this.map.radiusToZoom(32));

gives:
15
14
13
12
11
10
9

“Bingo, I got bingo, I win again.” -T. Brown

Step 5: Normalization

To use this with an arbitrary size map you would need to normalize for the number of pixels the radius is being projected on.  I am going to leave that as an exerrcise for the reader, since I don’t need it right now :-).  Hint: a straightforward scaling of the radius should do fine.

Comments

  1. […] zoom option to the required level. On the map zoom level scales the map to by certain factor (*2). Read here for more on how google map zoom works. However above technique requires us to find the radius of our plot […]