Inverted Fill Color For A Circle

[skygizmo]

Hi All,

First post here.

There is an option to fill the inside of circle with a color . I
want the inverse. I want everything outside of the circle to be filled
in with the color and opacity that I set.

I use the google.maps.Circle function to draw my circles. I ideally,
if I were to draw 3 concentric circles, the center would be clear, the
space between it and the next would be colored with a very light
opacity. The area between circle two and three would be the same color
but double the opacity. The are outside of the third ring would be the
most heavily colored.

The circles are service zones. The further out from the center, the
more the trip charge. My application allows up to 7 concentric
circles/zones. The shading is meant to give the dispatcher a clue as
to which zone a marker is in. I chose three circles to simply things.

Any ideas, links, or comments will be sincerely appreciated.
JavaScript ain't my thing so please be gentle!

JCU

[Chris Broadfoot]

Unfortunately this isn't possible with the google.maps.Circle class.

It is, however possible using a google.maps.Polygon, where you can create holes. You can create your own circles using the computeOffset method in the google.maps.geometry.spherical namespace:

http://code.google.com/apis/maps/documentation/javascript/reference.html#spherical

Here's a demo I wrote a while ago, it could serve as a decent starting point:

http://geoapis.appspot.com/agdnZW9hcGlzchMLEgtFeGFtcGxlQ29kZRjxqAIM

Hope this gets you on the right track.

Chris

--

http://twitter.com/broady

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

[skygizmo]

Thanks Chris. Here is what I think I need to do to implement your
code.

1) Instead of the list of lat/lng I would build a loop and use your
offset function a certain number of times to derive the coordinates
that your function needs.

2) Draw circles and shade them as per my goals.

3) Shade everything else outside of the circles.

I suppose I could even eliminate the circles and just shade different
areas.

As I mentioned, I a new to this. I write desktop applications using
Delphi. I am integrating Google maps into a scheduling module of the
application. Any clarification would be appreciated.

JCU

[Berry Ratliff]

The API does not provide a way to control the
"globalCompositeOperation" in CANVAS. If it did, you could set it to
"COPY" to provide the capability you request. It is a simple
addition. Perhaps you ought to file a request. Some older versions
of IE do not support CANVAS. Some older versions of Opera implement
it incorrectly.

[Bahram Ardalan]

Draw a circle in the opposite location and negative radius ;)

Like...

// complement coordinates

lat = -lat;

lng = lng-180;

rad = 20037508.34-rad;

// add circle to map

var circle = new google.maps.Circle({

strokeWeight: 0,

fillColor: '#000000',

fillOpacity: 0.5,

map: map,

center: {lat:lat,lng:lng},

radius: rad

});