How to draw a complex transparent circle on Google Maps API

Question

Recently I got a task that is to draw circles on my own website with Google Maps API. The complexity is the center of the circle is representing a "signal transmitter" and I need to make the circle transparent, with the opacity of each pixel reprseting the signal intensity of the exact location.

My basic idea is to extend the "Overlay" of Google Map API, so I have to write it in javascript I think.

The key part is to draw a circle with gradually changing opacity (inner stronger, outter lighter) and idealy, I can specify the opacity of each pixel.

I've been looking for approaches like CSS3, SVG, VML and even jquery and AJAX but still having no idea about how to archve this.

Thank you very much for your helping!

Answer 1

It looks like you're going to have to manually set every pixel, if you want that level of control over the opacity. I'd use something like this:

var centerX = 100 // Center X coordinate of the circle.
var centerY = 100 // Center Y coordinate of the circle.
var radius = 25 // Radius of circle.
//(var diameter = 2 * radius // Diameter of circle)

for(x = -radius; x < radius; x++){
    for(y = -radius; y < radius; y++){
        var hypotenuse = Math.sqrt((x * x) + (y * y)); // Line from point (x,y) to the center of the circle.
        if(hypotenuse < radius){ // If the point falls within the circle
            var opacity = hypotenuse / radius; // Should return a value between 0 and 1
            drawPointAt(x + centerX, y + centerY, colour, opacity); // You'll have to look up what function to use here, yourself.
        }
    }
}

Here's a small example of this code returning a circle.

Answer 2

Here I got the solution. It's making use of the Canvas element of HTML5 (which is widely supported).

Here is the javascript code for locating the canvas element and draw the circle with gradually changing transparency. The key part is to use the "Gradient".

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");


//draw a circle
gradient = ctx.createRadialGradient(200, 200, 0, 200, 200, 200);
gradient.addColorStop("0", "blue");
gradient.addColorStop("1.0", "transparent");
ctx.fillStyle = gradient;

//ctx.beginPath();
ctx.arc(200, 200, 200, 0, Math.PI*2, true); 
//ctx.closePath();
ctx.fill();