CODEWITHSUNDEEP
javascriptajaxbing-maps
Uriel Arvizu
Uriel Arvizu

Reputation: 1916

How to draw a circle with Bing Maps Ajax Control 6.3?

I've been searching for a solution for this and haven't been successful, what I want to do is that by specifying a radius and a center, to draw a circle on a map. The documentation for Bing Maps Ajax Control 6.3 for shapes doesn't cover circles. Is there a way to draw circles on a map?

Any help would be appreciated.

Upvotes: 0

Views: 1744

Answers (1)

Nicolas Boonaert
Nicolas Boonaert

Reputation: 2952

You should check Mike Garza's blog (Garzilla) that created really interesting examples around your needs: http://www.garzilla.net/vemaps/CircleDragHandle.aspx

Here is a sample code to generate the circle locations: 

function buildCircle(latin, lonin, radius) {
    var locs = new Array();
    var lat1 = latin * Math.PI / 180.0;
    var lon1 = lonin * Math.PI / 180.0;
    var d = radius / 3956;
    var x;
    for (x = 0; x <= 360; x+=10) {
        var tc = (x / 90) * Math.PI / 2;
        var lat = Math.asin(Math.sin(lat1) * Math.cos(d) + Math.cos(lat1) * Math.sin(d) * Math.cos(tc));
        lat = 180.0 * lat / Math.PI;
        var lon;
        if (Math.cos(lat1) == 0) {
            lon = lonin; // endpoint a pole 
        }
        else {
            lon = ((lon1 - Math.asin(Math.sin(tc) * Math.sin(d) / Math.cos(lat1)) + Math.PI) % (2 * Math.PI)) - Math.PI;
        }
        lon = 180.0 * lon / Math.PI;
        var loc = new VELatLong(lat, lon);
        locs.push(loc);
    }
    return locs;
}

And here the code to add it on the map and use the previous method: 

//Build circle        
circle = new VEShape(VEShapeType.Polygon, circlePoints);        
circle.HideIcon();        
circle.SetLineWidth(2);        
map.AddShape(circle);

Upvotes: 1

Related Questions