Software and hardware engineering

Mon 17 May 2010 Posted by Matt Williamson in Open Source Libraries

Google Maps Circle Overlay

UPDATE: By popular request, I’ve ported this to Google Maps v3

Another feature missing from Google Maps is the ability to draw a circle overlay. Displaying radii around a location is a very common use of maps. If your website has store searching and you want to show which stores are within X miles of some zip code, you’ll want to show your users the radius on the map. This can also be used in conjunction with our point in polygon library to easily display which points are inside the circle.

Sample:

I made this library in the most logical way. I used a GPolygon and drew a fixed number of points in a circular fashion using standard geometry. In testing, I found that the optimal number of points drawn in the circle for general purposes is 40. You can easily override this using the last parameter of the constructor. Use a higher number for a smoother circle or a lower number for a higher performance circle.

Usage (default resolution):

var circle2 = new CircleOverlay(map, map.getCenter(), 50, \
    "#0000FF", 1, 1, "#0000FF", 0.25);

Usage (custom resolution):

var circle1 = new CircleOverlay(map, map.getCenter(), 100, \
    "#000000", 1, 1, "#009900", 0.25, 100);

Per usual, you can view a sample in use or view and download the code. Use freely.

Sun 16 May 2010 Posted by Matt Williamson in Open Source Libraries

Point in Polygon Checking With Google Maps

The Google Maps API is missing some things. One thing it is missing is the ability to detect whether or not a point lies within a polygon. One use case for this is selecting friends in a social network using a polygon the shape of a state or county.

Sample:

To add this ability, I extended the GPolygon class with a new method called containsLatLng, just like the GLatLngBounds class. The difference is that the method in the GLatLngBounds class will only get the 4 coordinates of the bounding box, which are the farthest points in the polygon, and see if the coordinate lies within that box. My method, however, does true collision detection to see if the point lies within any shape polygon with as many sides as you want. It worked out perfectly using the Ray Cast Algorithm.

The simplest usage of this library looks like this (omitting including the GMaps API and this library):

var coordinate = new GLatLng(40, -90);
var polygon = new GPolygon([], "#000000", 1, 1, "#336699", 0.3);
var isWithinPolygon = polygon.containsLatLng(coordinate);

You can view a sample in action or download/view the source. Use freely.

Update: Tim Parkin kindly updated this library to work with Google Maps v3, check it out at http://github.com/tparkin/Google-Maps-Point-in-Polygon

Page 1 / 1