circle overlap using google maps api v3
I found that you can use the Google maps v3 to do drawing of maps for the Palm WebOS, iPhone and Android and you can still scroll around but it took me a bit to figure out how to draw a nice circle. Not all the platforms support the arc method so i just did a small 40 point polygon to get this going. Free free to use it. You can find the code the code and an example at circleoverlay.
Thanks for the sample code, very helpful! Anyway, the canvas method doesn’t work in IE, so i will prefer the polygon method.
The canvas method seems different : the circle’s radius doesn’t scale when the map zooms in or out. It’s a bit annoying. Is it a bug or do you wanted it to be like this ?
Thx!
The benefit of the canvas model is speed. Canvas can draw lines and points pretty fast. Browsers generally build a render tree and when they save a canvas node in the tree they will just render it like an image. It wont redraw. I did not really care if it would/would not redraw but i would reccommend using it on mobile devices for speed and just implement the draw routine to draw properly on the motion of the app.
google maps v3 has a Circle method that does scale:
google.maps.Circle()
http://code.google.com/apis/maps/documentation/javascript/reference.html#Circle
Now if you can figure out how to get circle objects that overlap not to add opacity I would be forever in your debt!
Thanks for the update on the API, it was added after I did this example. I think the only way to do what you want in terms of the opacity is for you to not draw circles that overlap but to draw arcs for the circles and get rid of the overlap areas for the lower layers of the circle. You should be able to do that pretty easily. There are simple formulas to find the intersection of two circles in a 2D space.