Draw a circle given a lat/long and radius (in KM)

This Page is locked
Modified: 2007/01/12 01:59 by ViaVE Visitor
Function AddCircle(loc, radius, color, width)

loc: VELatLong, centre of circle
radius: radius in KM
color: VEColor
width: width of line in pixels


Usage:

map = new VEMap('myMap');
map.LoadMap();
map.AddPolyline(AddCircle(new VELatLong(40,30),50,new VEColor(0,0,255,.5),2));




function AddCircle(loc, radius, color, width)
{
    var R = 6371; // earth's mean radius in km
    var lat = (loc.Latitude * Math.PI) / 180; //rad
    var lon = (loc.Longitude * Math.PI) / 180; //rad
    var d = parseFloat(radius)/R;  // d = angular distance covered on earth's surface
    var locs = new Array();
    for (x = 0; x <= 360; x++) 
    { 
        var p2 = new VELatLong(0,0)            
        brng = x * Math.PI / 180; //rad
        p2.Latitude = Math.asin(Math.sin(lat)*Math.cos(d) + Math.cos(lat)*Math.sin(d)*Math.cos(brng));
        p2.Longitude = ((lon + Math.atan2(Math.sin(brng)*Math.sin(d)*Math.cos(lat), Math.cos(d)-Math.sin(lat)*Math.sin(p2.Latitude))) * 180) / Math.PI;
        p2.Latitude = (p2.Latitude * 180) / Math.PI;
        locs.push(p2);
    }
    var poly = new VEPolyline(polyID++, locs, color, width); 
    return poly; 
}


Older method: (not accurate past 200KM)

Function AddCircle(latin, lonin, radius)

latin: Latitude of centre of circle

lonin: Longitiude of centre of circle

radius: radius in miles

Usage:

map = new VEMap('myMap');
map.LoadMap();
map.AddPolyline(AddCircle(0,0,500));



function AddCircle(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++) 
    { 
        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); 
    } 
    var poly = new VEPolyline(999, locs, new VEColor(0,255,0,.5) , 4); 
    return poly; 
}


Note: The method above draws a circle polyline with 360 points for each circle. This is not very browser efficient. If you reduce the number points, you can achieve a virtual circle with far fewer points and have it rendered much quicker, see below.

function AddCircle(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) // 36 points per circle 
    { 
        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); 
    } 
    var poly = new VEPolyline(999, locs, new VEColor(0,255,0,.5) , 4); 
    return poly; 
}