Draw a filled circle given a lat/long and radius wrapped around map boundaries (in Miles)

This Page is locked
Modified: 2007/02/03 12:34 by ViaVE Visitor
This methodology has a little problem when the point is plotted near the poles and the map boundaries (ie Lat: -179 Long: 84), but it works really well when plotted around the 180 -180 longitude. For my needs i will not have to plot in the Arctic Circle or in Antarctica, so I do not have to worry about that. The example below plots a point near the Fiji Islands in the Pacific Ocean with a circle radius of 2000 miles. Feel free to email me at dad26087@yahoo.com if you have any questions. Thanks.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Testing the draw circle function</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/v4/mapcontrol.js"></script>
<script type="text/javascript">
var map = null;
function onBodyLoad()
{
/**************************************/
//Hack for firefox 2.0//
    var ffv = 0;
    var ffn = "Firefox/"
    var ffp = navigator.userAgent.indexOf(ffn);
    if (ffp != -1) ffv = parseFloat(navigator.userAgent.substring(ffp + ffn.length));
    // If we're using Firefox 1.5 or above override 
    // the Virtual Earth drawing functions to use SVG
    if (ffv >= 1.5) 
    {
        Msn.Drawing.Graphic.CreateGraphic=function(f,b) { return new Msn.Drawing.SVGGraphic(f,b) }
    }
    /**************************************/
    map = new VEMap("MyMapDiv");            
    map.LoadMap(new VELatLong(20, 0), 1 , 'r', false, VEMapMode.Mode2D, true);            
    var points = GetCirclePoints( new VELatLong(-16.694078, 179.835205), 2000);
   
    for (var zz=0; zz < points.length; zz++)
    {
        map.AddPolygon(GetFilledPolygon(points[zz]));
    }
}        
    
//generates 360 points so a approx circle
//can be drawn around a latitude and longitude
function GetCirclePoints(impactPoint, radius)
{
    var R = 3959.872469777;// earth's mean radius in miles
    var lat = (impactPoint.Latitude * Math.PI) / 180; //rad
    var lon = (impactPoint.Longitude * Math.PI) / 180; //rad
    var d = parseFloat(radius)/R;  // d = angular distance covered on earth's surface
    var locs1 = new Array();
    var locs2 = new Array();
    var locs = new Array();
    var alreadyalerted = false;
    var absLongBoundary = 180;
    var absLatBoundary = 89.99995;
    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;
        
        var absLong = Math.abs(p2.Longitude);
        var absLat = Math.abs(p2.Latitude);                
        if (absLong > absLongBoundary || absLat > absLatBoundary)
        {
            if (absLong > absLongBoundary)
            {
                if (p2.Longitude > 0)
                    p2.Longitude = (p2.Longitude - absLongBoundary) - absLongBoundary;
                else
                    p2.Longitude = (p2.Longitude + absLongBoundary) + absLongBoundary;
            }
            if (absLat > absLatBoundary)
            {
                if (p2.Latitude > 0)
                    p2.Latitude = (p2.Latitude - absLatBoundary) - absLatBoundary;
                else
                    p2.Latitude = (p2.Latitude + absLatBoundary) + absLatBoundary;
            }
            locs2.push(p2);
        }
        else
        {
        locs1.push(p2); 
        }
    }
    locs.push(locs1);
    locs.push(locs2);
    return locs; 
} 
       
var polygonID = 0;        
//generates a filled in polygon based
//on passed in points
function GetFilledPolygon(points)
{
    var poly = new VEPolygon(polygonID, points);
    polygonID++;
   
    poly.SetOutlineWidth(1);
    poly.SetOutlineColor(new VEColor(0,150,100,1.0));
    poly.SetFillColor(new VEColor(0,150,100,0.5));            
    return poly;
}
</script>
</head>
<body onload="onBodyLoad();">
<div id="MyMapDiv" style="width: 500px; height:500px;"></div>
</body>
</html>