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,
radius: citymap[city].population
};
// Add the circle for this city to the map.
cityCircle = new google.maps.Circle(populationOptions);
Thanks for your help ;)
Overlays are objects on the map that are tied to latitude/longitude coordinates, so they move when you drag or zoom the map. For information on predefined overlay types, see Drawing on the map. The Maps JavaScript API provides an OverlayView class for creating your own custom overlays.
Create a map with the Google Maps API.Google Maps Platform gives you the ability to create a truly custom map that works exactly how you want it to. This method has the advantage of being the most flexible and is free up to certain limits set by Google.
With One Polygon draw with multiple paths ---------- With multiples circles drawn
@david strachan answer solved a big part of my question. Here is a part 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)
extp.push(new google.maps.LatLng(ex, ey));
}
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.
Using Polygon class you can get the overlap opacity to be single.
var peanut = new google.maps.Polygon({
paths: [drawCircle(citymap['chicago'].center, citymap['chicago'].population/3000, 1),//division by 3000 to suit
drawCircle(citymap['losangeles'].center,citymap['losangeles'].population/3000, 1)],
strokeColor: "#ff0000",
strokeOpacity: 0.35,
strokeWeight: 0,
fillColor: "#FF0000",
fillOpacity: 0.35
});
peanut.setMap(map);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With