Google Map Multiple Overlay No Cumulative Opacity
Solution 1:
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 :
functiondrawCircle(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 milesvar points = 32;
// find the raidus in lat/lon var rlat = (radius / earthsradius) * r2d;
var rlng = rlat / Math.cos(point.lat() * d2r);
var extp = newArray();
if (dir==1) {var start=0;var end=points+1} // one extra here makes sure we connect theelse{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 trackvar 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.
Solution 2:
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);
Solution 3:
I have a similar problem, but my overlays are irrigular shape rusters. The ellips in the following example are just to demonstrate the issue but the actual rasters are shapes of any form but having all the same colour:
<!DOCTYPE html><html><head><title>Multi-Raster</title><styletype="text/css">html { height: 100% }body { height: 100%}</style><scriptlanguage="javascript"type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><scripttype="text/javascript">var map;
functioninitialize() {
var coord = new google.maps.LatLng( 45.4931831359863,-73.6133499145508);
var myOptions = {zoom: 10,center: coord, mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions );
var boundaries1 = new google.maps.LatLngBounds(new google.maps.LatLng( 44.59386,-74.89627), new google.maps.LatLng( 46.39251,-72.33043));
rmap1 =new google.maps.GroundOverlay("scrap.png", boundaries1);
rmap1.setMap(map);
rmap2 =new google.maps.GroundOverlay("scrap2.png", boundaries1);
rmap2.setMap(map);
}
functionshowcov(m,v){if(v.checked) {m.setOpacity(0);m.setMap(map); }else {m.setMap(null);m.setOpacity(100);}}
</script></head><bodyonload="initialize()"><divid="map_canvas"style="width:100%;height:100%"></div></form></td></tr></table></div></body></html>
Post a Comment for "Google Map Multiple Overlay No Cumulative Opacity"