Posted by: edsyrett | 20 November 2009

Custom Overlays and getting the scale

Custom Overlay and map scale

I needed to create a map with a movable circle on it, and then be able to hit a button and get a list of locations within that circle.

This presented a couple of problems – firstly how to draw a circle over the top of the map, and secondly, how big to make it.   Looking at the map API, there’s not an easy way to figure out what the scale of the map is.  In other words, you have to find out how many pixels wide the circle needs to be to represent a given radius in kilometres on the map, taking into account the current zoom level.

Here’s how I did it….

private function calculateMapScale():Number { var topLeft:LatLng; var bottomLeft:LatLng; var scale:Number; var distance:Number; topLeft = _mapPane.fromPaneCoordsToLatLng(new Point(0,0)); bottomLeft = _mapPane.fromPaneCoordsToLatLng(new Point(0, _map.height)); distance = topLeft.distanceFrom(bottomLeft) / 1000 ; scale = _map.height / distance; return scale; }

All the code above does is get the top and bottom of the map as lat/longs and then find the distance between the two points. Then I have the number of pixels and the distance they represent.

And the caveats are:

  • This relies on the use of one of the later versions of the API library – you need to set applyProjection to true on the GroundOverlayOptions otherwise you’ll get an oval instead of a circle.
  • I just get the vertical scale, and assume that the horizontal scale is the same.

Click on the image to get to my prototype app. The app includes a slider with a range of 0 to 10000 to set the radius in kilometres of the circle. The circle itself just moves automatically to the centre of the map.


Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s


%d bloggers like this: