 Pierre Granger - 2 years ago 240
Javascript Question

Google map multiple overlay no cumulative opacity

I've got a map with multiple circles crossing each other (bellow is an example with only two but it's about 100 circles at least). When they cross, opacity is doubled, so when i have a cross between 5 or 6 circles it just become about 100% opacity.

Is there a way to allow make the 2nd circle not showing "over" the first one ? Actually a don't think so but maybe someone already expected something like this...

LEFT : What i have ---------------------------------------------- RIGHT : what i want Just in case you wanna play :
http://jsfiddle.net/ZWt6w/

var populationOptions = {
strokeWeight: 0,
fillColor: '#FF0000',
fillOpacity: 0.5,
map: map,
center: citymap[city].center,
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);

Thanks for your help ;) Pierre Granger

With One Polygon draw with multiple paths ---------- With multiples circles drawn @david strachan answer solved a big mart of my question. Here is a par of this solution : first you must use this "drawCircle" function instead of the Circle object of Google Maps API V3 :

function drawCircle(point, radius, dir)
{
var d2r = Math.PI / 180;   // degrees to radians
var r2d = 180 / Math.PI;   // radians to degrees
var earthsradius = 3963; // 3963 is the radius of the earth in miles
var points = 32;

// find the raidus in lat/lon
var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);

var extp = new Array();
if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect the
else{var start=points+1;var end=0}
for (var i=start; (dir==1 ? i < end : i > end); i=i+dir)
{
var theta = Math.PI * (i / (points/2));
ey = point.lng() + (rlng * Math.cos(theta)); // center a + radius x * cos(theta)
ex = point.lat() + (rlat * Math.sin(theta)); // center b + radius y * sin(theta)
}
return extp;
}

This function returns paths, so you can use it to buid an array of paths wich you will use after to build a single Polygon object :

var polys = [] ;
\$(xml).find("trkpt").each(function() { // Parsing every points of my track
var p = new google.maps.LatLng(\$(this).attr("lat"), \$(this).attr("lon"));
points.push(p);
if ( ( i++ % 10 ) == 0 ) // Only display a circle every 10 points
{
polys.push(drawCircle(p,radius/1609.344,1)) ; // Radius value is in meters for me, so i divide to make it in miles
}
});

peanutcircle = new google.maps.Polygon({
paths: polys,
strokeOpacity: 0,
strokeWeight: 0,
fillColor: color,
fillOpacity: 0.35,
});
peanutcircle.setMap(map);

And this is all, you've drawn a complex, but single polygon, probably easier to use.

Only problem for me is that checking markers contained in this single polygon (with google function containsLocation and github.com/tparkin/Google-Maps-Point-in-Polygon) is not working good, so i had to continue using my multiples circles to check if markers are in my zone.

Thank @david strachan for his answer.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download